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
This commit is contained in:
@@ -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 };
|
||||
}
|
||||
@@ -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 className="relative w-full max-w-2xl rounded-2xl bg-zinc-900 shadow-xl">
|
||||
<div
|
||||
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>
|
||||
<p className="mt-0.5 text-sm text-zinc-500">
|
||||
<h2 className="text-xl font-semibold text-white">Import Schedule</h2>
|
||||
<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"
|
||||
: "border-zinc-800 text-zinc-400 hover:bg-zinc-800"
|
||||
? "bg-violet-100 border border-violet-300 text-violet-700"
|
||||
: "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-zinc-600 hover:border-slate-400 hover:bg-zinc-800"
|
||||
? "border-emerald-500 bg-emerald-50"
|
||||
: "border-stone-300 hover:border-emerald-400 hover:bg-stone-50"
|
||||
}`}
|
||||
>
|
||||
<p className="text-2xl text-slate-400">📄</p>
|
||||
<p className="mt-2 font-medium text-zinc-300">
|
||||
<div className="flex justify-center mb-4">
|
||||
<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="h-8 w-8 animate-spin rounded-full border-2 border-zinc-600 border-t-slate-900" />
|
||||
<p className="text-zinc-400">Parsing file…</p>
|
||||
<div className="flex flex-col items-center gap-4 py-12">
|
||||
<div className="h-10 w-10 animate-spin rounded-full border-3 border-emerald-200 border-t-emerald-600" />
|
||||
<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">
|
||||
<p className="font-medium">Parsing warnings:</p>
|
||||
<ul className="mt-1 list-disc list-inside space-y-0.5">
|
||||
<div className="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm">
|
||||
<p className="font-semibold text-amber-800">Parsing warnings:</p>
|
||||
<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">
|
||||
{parsedStops.length} stop{parsedStops.length !== 1 ? "s" : ""} found — review and edit below before importing.
|
||||
</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm font-medium text-stone-700">
|
||||
{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">
|
||||
<table className="w-full text-xs">
|
||||
<thead className="sticky top-0 bg-zinc-900 text-zinc-400">
|
||||
<div className="max-h-72 overflow-y-auto rounded-xl border border-stone-200 bg-white">
|
||||
<table className="w-full text-sm">
|
||||
<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-2 py-2 text-left font-semibold">State</th>
|
||||
<th className="px-2 py-2 text-left font-semibold">Location</th>
|
||||
<th className="px-2 py-2 text-left font-semibold">Date</th>
|
||||
<th className="px-2 py-2 text-left font-semibold">Time</th>
|
||||
<th className="px-2 py-2 text-left font-semibold">Address</th>
|
||||
<th className="w-8 px-2 py-2" />
|
||||
<th className="px-3 py-3 text-left text-xs font-semibold uppercase tracking-wide text-stone-500">City</th>
|
||||
<th className="px-3 py-3 text-left text-xs font-semibold uppercase tracking-wide text-stone-500">State</th>
|
||||
<th className="px-3 py-3 text-left text-xs font-semibold uppercase tracking-wide text-stone-500">Location</th>
|
||||
<th className="px-3 py-3 text-left text-xs font-semibold uppercase tracking-wide text-stone-500">Date</th>
|
||||
<th className="px-3 py-3 text-left text-xs font-semibold uppercase tracking-wide text-stone-500">Time</th>
|
||||
<th className="w-10 px-3 py-3" />
|
||||
</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">
|
||||
<td className="px-1 py-1">
|
||||
<tr key={idx} className="hover:bg-stone-50 transition-colors">
|
||||
<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">
|
||||
<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">
|
||||
<td className="px-2 py-2">
|
||||
<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">
|
||||
<p className="text-sm text-zinc-500">
|
||||
<div className="flex items-center justify-between pt-2">
|
||||
<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="h-8 w-8 animate-spin rounded-full border-2 border-zinc-600 border-t-slate-900" />
|
||||
<p className="text-zinc-400">Creating draft stops…</p>
|
||||
<div className="flex flex-col items-center gap-4 py-12">
|
||||
<div className="h-10 w-10 animate-spin rounded-full border-3 border-emerald-200 border-t-emerald-600" />
|
||||
<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">
|
||||
<p className="text-4xl">✅</p>
|
||||
<p className="text-lg font-bold text-zinc-100">
|
||||
{created} draft stop{created !== 1 ? "s" : ""} created
|
||||
</p>
|
||||
<p className="text-zinc-400">
|
||||
Review them in the stops list and publish when ready.
|
||||
</p>
|
||||
<div className="flex flex-col items-center gap-5 py-12 text-center">
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-emerald-100">
|
||||
<svg className="h-8 w-8 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<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">
|
||||
<p className="text-4xl">❌</p>
|
||||
<p className="text-red-400">{error}</p>
|
||||
<div className="flex flex-col items-center gap-4 py-12 text-center">
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-red-100">
|
||||
<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>
|
||||
|
||||
@@ -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)}
|
||||
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"
|
||||
onClick={() => setShowImport(true)}
|
||||
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
|
||||
href="/admin/stops/new"
|
||||
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"
|
||||
<button
|
||||
onClick={() => setShowAdd(true)}
|
||||
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
|
||||
</a>
|
||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
Add Stop
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{open && (
|
||||
<ScheduleImportModal
|
||||
brandId={brandId}
|
||||
onClose={() => setOpen(false)}
|
||||
onComplete={handleComplete}
|
||||
/>
|
||||
)}
|
||||
<ScheduleImportModal
|
||||
brandId={brandId}
|
||||
onClose={() => setShowImport(false)}
|
||||
onComplete={handleImportComplete}
|
||||
/>
|
||||
|
||||
<AddStopModal
|
||||
isOpen={showAdd}
|
||||
onClose={() => setShowAdd(false)}
|
||||
brandId={brandId}
|
||||
onSuccess={handleAddSuccess}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user