feat(admin): overhaul stops page with modal-based Add Stop

- AddStopModal: new modal component for creating stops inline
- ScheduleImportModal: fixed colors to match warm earth-tone theme
- StopsHeaderActions: use modals instead of page navigation
- Consistent emerald/stone palette with rounded cards

src/components/admin/AddStopModal.tsx

@@ -0,0 +1,374 @@
+"use client";
+
+import { useState, useCallback, useEffect } from "react";
+import { createStop } from "@/actions/stops/create-stop";
+import { formatDate } from "@/lib/format-date";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  brandId: string;
+  duplicateFrom?: {
+    city: string;
+    state: string;
+    location: string;
+    date: string;
+    time: string;
+    address?: string | null;
+    zip?: string | null;
+    cutoff_time?: string | null;
+  } | null;
+  onSuccess?: (stopId: string) => void;
+};
+
+export default function AddStopModal({ isOpen, onClose, brandId, duplicateFrom, onSuccess }: Props) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Form state
+  const [city, setCity] = useState(duplicateFrom?.city ?? "");
+  const [state, setState] = useState(duplicateFrom?.state ?? "");
+  const [location, setLocation] = useState(duplicateFrom?.location ?? "");
+  const [date, setDate] = useState(duplicateFrom?.date ?? "");
+  const [time, setTime] = useState(duplicateFrom?.time ?? "");
+  const [address, setAddress] = useState(duplicateFrom?.address ?? "");
+  const [zip, setZip] = useState(duplicateFrom?.zip ?? "");
+  const [cutoffTime, setCutoffTime] = useState(duplicateFrom?.cutoff_time ?? "");
+  const [status, setStatus] = useState<"draft" | "active">("draft");
+
+  // Reset form when modal opens/closes or duplicate changes
+  useEffect(() => {
+    if (isOpen) {
+      setCity(duplicateFrom?.city ?? "");
+      setState(duplicateFrom?.state ?? "");
+      setLocation(duplicateFrom?.location ?? "");
+      setDate(duplicateFrom?.date ?? "");
+      setTime(duplicateFrom?.time ?? "");
+      setAddress(duplicateFrom?.address ?? "");
+      setZip(duplicateFrom?.zip ?? "");
+      setCutoffTime(duplicateFrom?.cutoff_time ?? "");
+      setStatus("draft");
+      setError(null);
+    }
+  }, [isOpen, duplicateFrom]);
+
+  // Lock body scroll
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => { document.body.style.overflow = ""; };
+  }, [isOpen]);
+
+  // Escape key handler
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    if (isOpen) {
+      window.addEventListener("keydown", handleEscape);
+      return () => window.removeEventListener("keydown", handleEscape);
+    }
+  }, [isOpen, onClose]);
+
+  const handleSubmit = useCallback(async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    if (!city.trim() || !state.trim() || !location.trim() || !date) {
+      setError("City, state, location, and date are required.");
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const result = await createStop(brandId, {
+        city: city.trim(),
+        state: state.trim(),
+        location: location.trim(),
+        date,
+        time: time || "08:00",
+        address: address || undefined,
+        zip: zip || undefined,
+        cutoff_time: cutoffTime || undefined,
+        active: status === "active",
+      });
+
+      if (result.success) {
+        onSuccess?.(result.id);
+        onClose();
+      } else {
+        setError(result.error ?? "Failed to create stop");
+      }
+    } catch {
+      setError("Network error. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }, [brandId, city, state, location, date, time, address, zip, cutoffTime, status, onSuccess, onClose]);
+
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) onClose();
+  };
+
+  if (!isOpen) return null;
+
+  const isDuplicate = Boolean(duplicateFrom);
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4"
+      onClick={handleBackdropClick}
+    >
+      <div className="relative w-full max-w-lg max-h-[90vh] overflow-hidden rounded-2xl bg-white shadow-2xl border border-stone-200">
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-stone-100 px-6 py-4">
+          <div>
+            <h2 className="text-xl font-semibold text-stone-950">
+              {isDuplicate ? "Duplicate Stop" : "Add New Stop"}
+            </h2>
+            <p className="mt-0.5 text-sm text-stone-500">
+              {isDuplicate && duplicateFrom
+                ? `Pre-filled from ${duplicateFrom.city}, ${duplicateFrom.state}`
+                : "Create a new tour stop for your route."}
+            </p>
+          </div>
+          <button
+            onClick={onClose}
+            className="flex h-9 w-9 items-center justify-center rounded-xl text-stone-400 hover:text-stone-600 hover:bg-stone-100 transition-colors"
+          >
+            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="overflow-y-auto max-h-[calc(90vh-140px)]">
+          <div className="p-6 space-y-5">
+            {error && (
+              <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+                {error}
+              </div>
+            )}
+
+            {/* Location row */}
+            <div className="grid grid-cols-3 gap-4">
+              <div className="col-span-2">
+                <label className="block text-sm font-medium text-stone-700 mb-1.5">
+                  City <span className="text-red-500">*</span>
+                </label>
+                <input
+                  type="text"
+                  value={city}
+                  onChange={(e) => setCity(e.target.value)}
+                  placeholder="Denver"
+                  className="w-full rounded-xl border border-stone-200 bg-white px-4 py-2.5 text-sm text-stone-900 placeholder:text-stone-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 transition-all"
+                  required
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-stone-700 mb-1.5">
+                  State <span className="text-red-500">*</span>
+                </label>
+                <input
+                  type="text"
+                  value={state}
+                  onChange={(e) => setState(e.target.value.toUpperCase())}
+                  placeholder="CO"
+                  maxLength={2}
+                  className="w-full rounded-xl border border-stone-200 bg-white px-4 py-2.5 text-sm text-stone-900 placeholder:text-stone-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 transition-all"
+                  required
+                />
+              </div>
+            </div>
+
+            {/* Location name */}
+            <div>
+              <label className="block text-sm font-medium text-stone-700 mb-1.5">
+                Location Name <span className="text-red-500">*</span>
+              </label>
+              <input
+                type="text"
+                value={location}
+                onChange={(e) => setLocation(e.target.value)}
+                placeholder="Whole Foods Market"
+                className="w-full rounded-xl border border-stone-200 bg-white px-4 py-2.5 text-sm text-stone-900 placeholder:text-stone-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 transition-all"
+                required
+              />
+            </div>
+
+            {/* Date & Time row */}
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium text-stone-700 mb-1.5">
+                  Date <span className="text-red-500">*</span>
+                </label>
+                <input
+                  type="date"
+                  value={date}
+                  onChange={(e) => setDate(e.target.value)}
+                  className="w-full rounded-xl border border-stone-200 bg-white px-4 py-2.5 text-sm text-stone-900 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 transition-all"
+                  required
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-stone-700 mb-1.5">
+                  Pickup Time
+                </label>
+                <input
+                  type="time"
+                  value={time}
+                  onChange={(e) => setTime(e.target.value)}
+                  className="w-full rounded-xl border border-stone-200 bg-white px-4 py-2.5 text-sm text-stone-900 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 transition-all"
+                />
+              </div>
+            </div>
+
+            {/* Address & ZIP */}
+            <div className="grid grid-cols-3 gap-4">
+              <div className="col-span-2">
+                <label className="block text-sm font-medium text-stone-700 mb-1.5">
+                  Street Address
+                </label>
+                <input
+                  type="text"
+                  value={address}
+                  onChange={(e) => setAddress(e.target.value)}
+                  placeholder="123 Main St"
+                  className="w-full rounded-xl border border-stone-200 bg-white px-4 py-2.5 text-sm text-stone-900 placeholder:text-stone-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 transition-all"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-stone-700 mb-1.5">
+                  ZIP Code
+                </label>
+                <input
+                  type="text"
+                  value={zip}
+                  onChange={(e) => setZip(e.target.value)}
+                  placeholder="80202"
+                  className="w-full rounded-xl border border-stone-200 bg-white px-4 py-2.5 text-sm text-stone-900 placeholder:text-stone-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 transition-all"
+                />
+              </div>
+            </div>
+
+            {/* Cutoff time */}
+            <div>
+              <label className="block text-sm font-medium text-stone-700 mb-1.5">
+                Order Cutoff Time
+              </label>
+              <input
+                type="time"
+                value={cutoffTime}
+                onChange={(e) => setCutoffTime(e.target.value)}
+                className="w-full rounded-xl border border-stone-200 bg-white px-4 py-2.5 text-sm text-stone-900 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 transition-all"
+              />
+              <p className="mt-1 text-xs text-stone-400">
+                Customers can only order until this time on the day before pickup.
+              </p>
+            </div>
+
+            {/* Status toggle */}
+            <div>
+              <label className="block text-sm font-medium text-stone-700 mb-2">
+                Status
+              </label>
+              <div className="flex gap-3">
+                <label className={`flex flex-1 items-center justify-center gap-2 rounded-xl border px-4 py-3 cursor-pointer transition-all ${
+                  status === "draft"
+                    ? "border-amber-300 bg-amber-50 text-amber-800"
+                    : "border-stone-200 bg-white text-stone-500 hover:border-stone-300"
+                }`}>
+                  <input
+                    type="radio"
+                    name="status"
+                    value="draft"
+                    checked={status === "draft"}
+                    onChange={() => setStatus("draft")}
+                    className="sr-only"
+                  />
+                  <span className={`rounded-full px-2 py-0.5 text-xs font-semibold ${
+                    status === "draft" ? "bg-amber-200 text-amber-900" : "bg-stone-100 text-stone-500"
+                  }`}>
+                    Draft
+                  </span>
+                  <span className="text-sm font-medium">Save as draft</span>
+                </label>
+                <label className={`flex flex-1 items-center justify-center gap-2 rounded-xl border px-4 py-3 cursor-pointer transition-all ${
+                  status === "active"
+                    ? "border-emerald-300 bg-emerald-50 text-emerald-800"
+                    : "border-stone-200 bg-white text-stone-500 hover:border-stone-300"
+                }`}>
+                  <input
+                    type="radio"
+                    name="status"
+                    value="active"
+                    checked={status === "active"}
+                    onChange={() => setStatus("active")}
+                    className="sr-only"
+                  />
+                  <span className={`rounded-full px-2 py-0.5 text-xs font-semibold ${
+                    status === "active" ? "bg-emerald-200 text-emerald-900" : "bg-stone-100 text-stone-500"
+                  }`}>
+                    Active
+                  </span>
+                  <span className="text-sm font-medium">Publish now</span>
+                </label>
+              </div>
+            </div>
+          </div>
+
+          {/* Footer */}
+          <div className="flex items-center justify-between border-t border-stone-100 px-6 py-4 bg-stone-50">
+            <button
+              type="button"
+              onClick={onClose}
+              className="rounded-xl border border-stone-200 bg-white px-4 py-2.5 text-sm font-medium text-stone-600 hover:bg-stone-100 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={loading}
+              className="rounded-xl bg-emerald-600 hover:bg-emerald-500 active:bg-emerald-700 px-6 py-2.5 text-sm font-semibold text-white disabled:opacity-50 transition-colors shadow-sm shadow-emerald-200"
+            >
+              {loading ? (
+                <span className="flex items-center gap-2">
+                  <svg className="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                  </svg>
+                  Creating...
+                </span>
+              ) : (
+                isDuplicate ? "Duplicate Stop" : "Create Stop"
+              )}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+// Hook for easy integration
+export function useAddStopModal(brandId: string, duplicateFrom?: Props["duplicateFrom"]) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const open = useCallback(() => setIsOpen(true), []);
+  const close = useCallback(() => setIsOpen(false), []);
+
+  const Modal = useCallback(() => (
+    <AddStopModal
+      isOpen={isOpen}
+      onClose={close}
+      brandId={brandId}
+      duplicateFrom={duplicateFrom}
+    />
+  ), [isOpen, close, brandId, duplicateFrom]);
+
+  return { open, close, Modal };
+}

src/components/admin/ScheduleImportModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useRef, useCallback } from "react";
+import { useState, useRef, useCallback, useEffect } from "react";
 import { createStopsBatch } from "@/actions/stops";
 import type { ParsedStopRow } from "@/lib/csv-parsers";
 
@@ -22,8 +22,29 @@ export default function ScheduleImportModal({ brandId, onClose, onComplete }: Pr
   const [dragOver, setDragOver] = useState(false);
   const [useAI, setUseAI] = useState(false);
   const [created, setCreated] = useState(0);
+  const [isVisible, setIsVisible] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  // Animate in
+  useEffect(() => {
+    requestAnimationFrame(() => setIsVisible(true));
+  }, []);
+
+  // Lock body scroll
+  useEffect(() => {
+    document.body.style.overflow = "hidden";
+    return () => { document.body.style.overflow = ""; };
+  }, []);
+
+  // Escape key handler
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handleEscape);
+    return () => window.removeEventListener("keydown", handleEscape);
+  }, [onClose]);
+
   const processFile = useCallback(async (file: File) => {
     setError(null);
     setStep("parsing");
@@ -125,49 +146,64 @@ export default function ScheduleImportModal({ brandId, onClose, onComplete }: Pr
 
   const hasWarnings = warnings.length > 0;
 
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) onClose();
+  };
+
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
+    <div
-      <div className="relative w-full max-w-2xl rounded-2xl bg-zinc-900 shadow-xl">
+      className={`fixed inset-0 z-50 flex items-center justify-center p-4 transition-all duration-300 ${isVisible ? "opacity-100" : "opacity-0"}`}
+      onClick={handleBackdropClick}
+    >
+      <div className="absolute inset-0 bg-black/40 backdrop-blur-md" />
+
+      <div
+        className={`relative w-full max-w-2xl max-h-[90vh] overflow-hidden rounded-2xl bg-white shadow-2xl border border-stone-200 transition-all duration-300 ${isVisible ? "scale-100 opacity-100" : "scale-95 opacity-0"}`}
+      >
         {/* Header */}
-        <div className="flex items-center justify-between rounded-t-2xl border-b border-zinc-800 px-6 py-4">
+        <div className="flex items-center justify-between border-b border-stone-100 bg-gradient-to-r from-emerald-600 to-emerald-500 px-6 py-5">
           <div>
-            <h2 className="text-xl font-bold text-zinc-100">Import Schedule</h2>
+            <h2 className="text-xl font-semibold text-white">Import Schedule</h2>
-            <p className="mt-0.5 text-sm text-zinc-500">
+            <p className="mt-0.5 text-sm text-white/80">
               Upload a CSV to bulk-create stops as drafts.
             </p>
           </div>
           <button
             onClick={onClose}
-            className="rounded-lg px-3 py-1.5 text-slate-400 hover:bg-zinc-950 hover:text-zinc-400"
+            className="flex h-9 w-9 items-center justify-center rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors"
           >
-            ✕
+            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
           </button>
         </div>
 
         {/* Body */}
-        <div className="p-6">
+        <div className="p-6 overflow-y-auto max-h-[calc(90vh-180px)]">
           {step === "idle" && (
-            <div className="space-y-4">
+            <div className="space-y-5">
               {error && (
-                <div className="rounded-xl bg-red-900/30 border border-red-200 px-4 py-3 text-sm text-red-400">
+                <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
                   {error}
                 </div>
               )}
 
               {/* AI toggle */}
-              <div className="flex items-center gap-3">
+              <div className="flex items-center gap-3 p-4 rounded-xl border border-stone-200 bg-stone-50">
                 <button
                   onClick={() => setUseAI((v) => !v)}
-                  className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-sm font-medium transition-colors ${
+                  className={`flex items-center gap-2.5 rounded-xl px-4 py-2.5 text-sm font-medium transition-all ${
                     useAI
-                      ? "border-purple-300 bg-purple-50 text-purple-700"
+                      ? "bg-violet-100 border border-violet-300 text-violet-700"
-                      : "border-zinc-800 text-zinc-400 hover:bg-zinc-800"
+                      : "bg-white border border-stone-200 text-stone-600 hover:border-stone-300"
                   }`}
                 >
-                  <span className="text-base">{useAI ? "◉" : "○"}</span>
+                  <span className={`flex h-5 w-5 items-center justify-center rounded-full text-xs ${useAI ? "bg-violet-500 text-white" : "bg-stone-200 text-stone-500"}`}>
+                    {useAI ? "✓" : "○"}
+                  </span>
                   Use AI for text/PDF parsing
                 </button>
-                <span className="text-xs text-slate-400">
+                <span className="text-xs text-stone-500">
                   {useAI
                     ? "AI will parse unstructured text. Requires OPENAI_API_KEY."
                     : "Best results with CSV. Text/PDF uses AI if enabled."}
@@ -180,20 +216,26 @@ export default function ScheduleImportModal({ brandId, onClose, onComplete }: Pr
                 onDragLeave={() => setDragOver(false)}
                 onDrop={handleDrop}
                 onClick={() => fileInputRef.current?.click()}
-                className={`cursor-pointer rounded-xl border-2 border-dashed p-10 text-center transition-colors ${
+                className={`cursor-pointer rounded-2xl border-2 border-dashed p-12 text-center transition-all ${
                   dragOver
-                    ? "border-slate-900 bg-zinc-900"
+                    ? "border-emerald-500 bg-emerald-50"
-                    : "border-zinc-600 hover:border-slate-400 hover:bg-zinc-800"
+                    : "border-stone-300 hover:border-emerald-400 hover:bg-stone-50"
                 }`}
               >
-                <p className="text-2xl text-slate-400">📄</p>
+                <div className="flex justify-center mb-4">
-                <p className="mt-2 font-medium text-zinc-300">
+                  <div className={`flex h-16 w-16 items-center justify-center rounded-2xl ${dragOver ? "bg-emerald-100" : "bg-stone-100"}`}>
+                    <svg className={`h-8 w-8 ${dragOver ? "text-emerald-600" : "text-stone-400"}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.801 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" />
+                    </svg>
+                  </div>
+                </div>
+                <p className="text-lg font-semibold text-stone-700">
                   Drop your schedule file here
                 </p>
-                <p className="mt-1 text-sm text-zinc-500">
+                <p className="mt-2 text-sm text-stone-500">
                   or click to browse — CSV, TXT, JSON
                 </p>
-                <p className="mt-3 text-xs text-slate-400">
+                <p className="mt-4 text-xs text-stone-400 font-mono bg-stone-100 rounded-lg px-3 py-2 inline-block">
                   CSV columns: city, state, location, date, time, address, zip, notes
                 </p>
               </div>
@@ -209,24 +251,24 @@ export default function ScheduleImportModal({ brandId, onClose, onComplete }: Pr
           )}
 
           {step === "parsing" && (
-            <div className="flex flex-col items-center gap-4 py-8">
+            <div className="flex flex-col items-center gap-4 py-12">
-              <div className="h-8 w-8 animate-spin rounded-full border-2 border-zinc-600 border-t-slate-900" />
+              <div className="h-10 w-10 animate-spin rounded-full border-3 border-emerald-200 border-t-emerald-600" />
-              <p className="text-zinc-400">Parsing file…</p>
+              <p className="text-stone-600 font-medium">Parsing file…</p>
             </div>
           )}
 
           {step === "review" && (
-            <div className="space-y-4">
+            <div className="space-y-5">
               {error && (
-                <div className="rounded-xl bg-red-900/30 border border-red-200 px-4 py-3 text-sm text-red-400">
+                <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
                   {error}
                 </div>
               )}
 
               {hasWarnings && (
-                <div className="rounded-xl bg-amber-900/30 border border-yellow-200 px-4 py-3 text-sm text-yellow-700">
+                <div className="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm">
-                  <p className="font-medium">Parsing warnings:</p>
+                  <p className="font-semibold text-amber-800">Parsing warnings:</p>
-                  <ul className="mt-1 list-disc list-inside space-y-0.5">
+                  <ul className="mt-1 list-disc list-inside space-y-0.5 text-amber-700">
                     {warnings.slice(0, 5).map((w, i) => (
                       <li key={i}>{w}</li>
                     ))}
@@ -235,76 +277,72 @@ export default function ScheduleImportModal({ brandId, onClose, onComplete }: Pr
                 </div>
               )}
 
-              <p className="text-sm text-zinc-400">
+              <div className="flex items-center justify-between">
-                {parsedStops.length} stop{parsedStops.length !== 1 ? "s" : ""} found — review and edit below before importing.
+                <p className="text-sm font-medium text-stone-700">
-              </p>
+                  {parsedStops.length} stop{parsedStops.length !== 1 ? "s" : ""} found — review and edit below
+                </p>
+                <span className="text-xs text-stone-500">All will be created as drafts</span>
+              </div>
 
               {/* Review table */}
-              <div className="max-h-80 overflow-y-auto rounded-xl border border-zinc-800">
+              <div className="max-h-72 overflow-y-auto rounded-xl border border-stone-200 bg-white">
-                <table className="w-full text-xs">
+                <table className="w-full text-sm">
-                  <thead className="sticky top-0 bg-zinc-900 text-zinc-400">
+                  <thead className="sticky top-0 bg-stone-50 border-b border-stone-200">
                     <tr>
-                      <th className="px-2 py-2 text-left font-semibold">City</th>
+                      <th className="px-3 py-3 text-left text-xs font-semibold uppercase tracking-wide text-stone-500">City</th>
-                      <th className="px-2 py-2 text-left font-semibold">State</th>
+                      <th className="px-3 py-3 text-left text-xs font-semibold uppercase tracking-wide text-stone-500">State</th>
-                      <th className="px-2 py-2 text-left font-semibold">Location</th>
+                      <th className="px-3 py-3 text-left text-xs font-semibold uppercase tracking-wide text-stone-500">Location</th>
-                      <th className="px-2 py-2 text-left font-semibold">Date</th>
+                      <th className="px-3 py-3 text-left text-xs font-semibold uppercase tracking-wide text-stone-500">Date</th>
-                      <th className="px-2 py-2 text-left font-semibold">Time</th>
+                      <th className="px-3 py-3 text-left text-xs font-semibold uppercase tracking-wide text-stone-500">Time</th>
-                      <th className="px-2 py-2 text-left font-semibold">Address</th>
+                      <th className="w-10 px-3 py-3" />
-                      <th className="w-8 px-2 py-2" />
                     </tr>
                   </thead>
-                  <tbody className="divide-y divide-slate-100">
+                  <tbody className="divide-y divide-stone-100">
                     {parsedStops.map((stop, idx) => (
-                      <tr key={idx} className="hover:bg-zinc-800">
+                      <tr key={idx} className="hover:bg-stone-50 transition-colors">
-                        <td className="px-1 py-1">
+                        <td className="px-2 py-2">
                           <input
                             value={stop.city}
                             onChange={(e) => updateStop(idx, "city", e.target.value)}
-                            className="w-full rounded border border-transparent bg-transparent px-2 py-1 text-xs outline-none focus:border-slate-400"
+                            className="w-full rounded-lg border border-transparent bg-transparent px-2 py-1.5 text-sm text-stone-900 outline-none focus:border-emerald-400 focus:bg-white"
                           />
                         </td>
-                        <td className="px-1 py-1">
+                        <td className="px-2 py-2">
                           <input
                             value={stop.state}
                             onChange={(e) => updateStop(idx, "state", e.target.value)}
-                            className="w-12 rounded border border-transparent bg-transparent px-2 py-1 text-xs outline-none focus:border-slate-400"
+                            className="w-14 rounded-lg border border-transparent bg-transparent px-2 py-1.5 text-sm text-stone-900 outline-none focus:border-emerald-400 focus:bg-white"
                           />
                         </td>
-                        <td className="px-1 py-1">
+                        <td className="px-2 py-2">
                           <input
                             value={stop.location}
                             onChange={(e) => updateStop(idx, "location", e.target.value)}
-                            className="w-full rounded border border-transparent bg-transparent px-2 py-1 text-xs outline-none focus:border-slate-400"
+                            className="w-full rounded-lg border border-transparent bg-transparent px-2 py-1.5 text-sm text-stone-900 outline-none focus:border-emerald-400 focus:bg-white"
                           />
                         </td>
-                        <td className="px-1 py-1">
+                        <td className="px-2 py-2">
                           <input
                             value={stop.date}
                             onChange={(e) => updateStop(idx, "date", e.target.value)}
-                            className="w-24 rounded border border-transparent bg-transparent px-2 py-1 text-xs outline-none focus:border-slate-400"
+                            className="w-28 rounded-lg border border-transparent bg-transparent px-2 py-1.5 text-sm text-stone-900 outline-none focus:border-emerald-400 focus:bg-white"
                           />
                         </td>
-                        <td className="px-1 py-1">
+                        <td className="px-2 py-2">
                           <input
                             value={stop.time}
                             onChange={(e) => updateStop(idx, "time", e.target.value)}
-                            className="w-20 rounded border border-transparent bg-transparent px-2 py-1 text-xs outline-none focus:border-slate-400"
+                            className="w-20 rounded-lg border border-transparent bg-transparent px-2 py-1.5 text-sm text-stone-900 outline-none focus:border-emerald-400 focus:bg-white"
                           />
                         </td>
-                        <td className="px-1 py-1">
+                        <td className="px-2 py-2">
-                          <input
-                            value={stop.address ?? ""}
-                            onChange={(e) => updateStop(idx, "address", e.target.value)}
-                            placeholder="—"
-                            className="w-full rounded border border-transparent bg-transparent px-2 py-1 text-xs outline-none focus:border-slate-400"
-                          />
-                        </td>
-                        <td className="px-1 py-1">
                           <button
                             onClick={() => removeStop(idx)}
-                            className="rounded px-1 py-0.5 text-red-400 hover:bg-red-900/30 hover:text-red-400"
+                            className="flex h-7 w-7 items-center justify-center rounded-lg text-stone-400 hover:bg-red-50 hover:text-red-600 transition-colors"
                           >
-                            ×
+                            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                            </svg>
                           </button>
                         </td>
                       </tr>
@@ -313,21 +351,21 @@ export default function ScheduleImportModal({ brandId, onClose, onComplete }: Pr
                 </table>
               </div>
 
-              <div className="flex items-center justify-between">
+              <div className="flex items-center justify-between pt-2">
-                <p className="text-sm text-zinc-500">
+                <p className="text-sm text-stone-500">
                   {parsedStops.length} draft stop{parsedStops.length !== 1 ? "s" : ""} will be created
                 </p>
                 <div className="flex gap-3">
                   <button
                     onClick={() => { setStep("idle"); setParsedStops([]); setWarnings([]); }}
-                    className="rounded-xl border border-zinc-600 px-4 py-2 text-sm font-medium text-zinc-300 hover:bg-zinc-800"
+                    className="rounded-xl border border-stone-200 bg-white px-4 py-2.5 text-sm font-medium text-stone-600 hover:bg-stone-50 transition-colors"
                   >
                     Cancel
                   </button>
                   <button
                     onClick={handleImport}
                     disabled={parsedStops.length === 0}
-                    className="rounded-xl bg-slate-900 px-5 py-2 text-sm font-medium text-white disabled:opacity-50 hover:bg-slate-800"
+                    className="rounded-xl bg-emerald-600 hover:bg-emerald-500 active:bg-emerald-700 px-5 py-2.5 text-sm font-semibold text-white disabled:opacity-50 transition-colors shadow-sm shadow-emerald-200"
                   >
                     Create {parsedStops.length} Draft Stop{parsedStops.length !== 1 ? "s" : ""}
                   </button>
@@ -337,24 +375,30 @@ export default function ScheduleImportModal({ brandId, onClose, onComplete }: Pr
           )}
 
           {step === "importing" && (
-            <div className="flex flex-col items-center gap-4 py-8">
+            <div className="flex flex-col items-center gap-4 py-12">
-              <div className="h-8 w-8 animate-spin rounded-full border-2 border-zinc-600 border-t-slate-900" />
+              <div className="h-10 w-10 animate-spin rounded-full border-3 border-emerald-200 border-t-emerald-600" />
-              <p className="text-zinc-400">Creating draft stops…</p>
+              <p className="text-stone-600 font-medium">Creating draft stops…</p>
             </div>
           )}
 
           {step === "done" && (
-            <div className="flex flex-col items-center gap-4 py-8 text-center">
+            <div className="flex flex-col items-center gap-5 py-12 text-center">
-              <p className="text-4xl">✅</p>
+              <div className="flex h-16 w-16 items-center justify-center rounded-full bg-emerald-100">
-              <p className="text-lg font-bold text-zinc-100">
+                <svg className="h-8 w-8 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
-                {created} draft stop{created !== 1 ? "s" : ""} created
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
-              </p>
+                </svg>
-              <p className="text-zinc-400">
+              </div>
-                Review them in the stops list and publish when ready.
+              <div>
-              </p>
+                <p className="text-2xl font-semibold text-stone-950">
+                  {created} draft stop{created !== 1 ? "s" : ""} created
+                </p>
+                <p className="mt-2 text-sm text-stone-500">
+                  Review them in the stops list and publish when ready.
+                </p>
+              </div>
               <button
                 onClick={onClose}
-                className="rounded-xl bg-slate-900 px-6 py-3 font-medium text-white hover:bg-slate-800"
+                className="rounded-xl bg-emerald-600 hover:bg-emerald-500 px-6 py-3 text-sm font-semibold text-white transition-colors shadow-sm shadow-emerald-200"
               >
                 Back to Stops
               </button>
@@ -362,12 +406,16 @@ export default function ScheduleImportModal({ brandId, onClose, onComplete }: Pr
           )}
 
           {step === "error" && (
-            <div className="flex flex-col items-center gap-4 py-8 text-center">
+            <div className="flex flex-col items-center gap-4 py-12 text-center">
-              <p className="text-4xl">❌</p>
+              <div className="flex h-16 w-16 items-center justify-center rounded-full bg-red-100">
-              <p className="text-red-400">{error}</p>
+                <svg className="h-8 w-8 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </div>
+              <p className="text-red-700 font-medium">{error}</p>
               <button
                 onClick={() => setStep("idle")}
-                className="rounded-xl border border-zinc-600 px-4 py-2 text-sm font-medium text-zinc-300 hover:bg-zinc-800"
+                className="rounded-xl border border-stone-200 bg-white px-4 py-2.5 text-sm font-medium text-stone-600 hover:bg-stone-50 transition-colors"
               >
                 Try Again
               </button>
@@ -377,4 +425,4 @@ export default function ScheduleImportModal({ brandId, onClose, onComplete }: Pr
       </div>
     </div>
   );
-}
+}

src/components/admin/StopsHeaderActions.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import ScheduleImportModal from "@/components/admin/ScheduleImportModal";
+import AddStopModal from "@/components/admin/AddStopModal";
 import { useRouter } from "next/navigation";
 
 type Props = {
@@ -9,10 +10,15 @@ type Props = {
 };
 
 export default function StopsHeaderActions({ brandId }: Props) {
-  const [open, setOpen] = useState(false);
+  const [showImport, setShowImport] = useState(false);
+  const [showAdd, setShowAdd] = useState(false);
   const router = useRouter();
 
-  function handleComplete(count: number) {
+  function handleImportComplete(count: number) {
+    router.refresh();
+  }
+
+  function handleAddSuccess(stopId: string) {
     router.refresh();
   }
 
@@ -20,26 +26,37 @@ export default function StopsHeaderActions({ brandId }: Props) {
     <>
       <div className="flex gap-3">
         <button
-          onClick={() => setOpen(true)}
+          onClick={() => setShowImport(true)}
-          className="rounded-xl border border-zinc-700 bg-zinc-900 px-4 py-3 text-sm font-medium text-zinc-300 hover:bg-zinc-800 hover:border-zinc-600 transition-colors"
+          className="flex items-center gap-2 rounded-xl border border-stone-300 bg-white px-4 py-2.5 text-sm font-medium text-stone-700 hover:bg-stone-50 hover:border-stone-400 transition-colors"
         >
+          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+          </svg>
           Upload Schedule
         </button>
-        <a
+        <button
-          href="/admin/stops/new"
+          onClick={() => setShowAdd(true)}
-          className="rounded-xl bg-emerald-600 hover:bg-emerald-500 active:bg-emerald-700 px-5 py-3 text-sm font-semibold text-white transition-colors shadow-lg shadow-emerald-900/30"
+          className="flex items-center gap-2 rounded-xl bg-emerald-600 hover:bg-emerald-500 active:bg-emerald-700 px-5 py-2.5 text-sm font-semibold text-white transition-colors shadow-sm shadow-emerald-200"
         >
-          + Add Stop
+          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
-        </a>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
+          </svg>
+          Add Stop
+        </button>
       </div>
 
-      {open && (
+      <ScheduleImportModal
-        <ScheduleImportModal
+        brandId={brandId}
-          brandId={brandId}
+        onClose={() => setShowImport(false)}
-          onClose={() => setOpen(false)}
+        onComplete={handleImportComplete}
-          onComplete={handleComplete}
+      />
-        />
+
-      )}
+      <AddStopModal
+        isOpen={showAdd}
+        onClose={() => setShowAdd(false)}
+        brandId={brandId}
+        onSuccess={handleAddSuccess}
+      />
     </>
   );
 }