-
-
- {/* Tabs */}
-
+ {/* Header */}
+
-
- {/* Content */}
-
- {TABS.map((t) => {
- const active = t.value === tab;
- return (
-
- {t.label}
- {active && (
-
- )}
-
- );
- })}
+
+
+ {/* Card: tabs + content */}
+
>(new Set());
const [bulkPublishing, setBulkPublishing] = useState(false);
+ const [showImport, setShowImport] = useState(false);
+ const [showAdd, setShowAdd] = useState(false);
const PAGE_SIZE = 50;
- // Simulate loading when filters change
useEffect(() => {
setIsLoading(true);
- const timer = setTimeout(() => setIsLoading(false), 300);
+ const timer = setTimeout(() => setIsLoading(false), 220);
return () => clearTimeout(timer);
}, [page, statusFilter, search]);
- const filtered = stops.filter((s) => {
- const matchesSearch =
- !search ||
- s.city.toLowerCase().includes(search.toLowerCase()) ||
- s.location.toLowerCase().includes(search.toLowerCase());
- const matchesStatus =
- statusFilter === "all" ||
- (statusFilter === "active" && s.active && s.status !== "draft") ||
- (statusFilter === "inactive" && !s.active && s.status !== "draft") ||
- (statusFilter === "draft" && s.status === "draft");
- return matchesSearch && matchesStatus;
- });
+ const filtered = useMemo(() => {
+ const q = search.trim().toLowerCase();
+ return stops.filter((s) => {
+ const matchesSearch =
+ !q ||
+ s.city.toLowerCase().includes(q) ||
+ s.location.toLowerCase().includes(q);
+ const matchesStatus =
+ statusFilter === "all" ||
+ (statusFilter === "active" && s.active && s.status !== "draft") ||
+ (statusFilter === "inactive" && !s.active && s.status !== "draft") ||
+ (statusFilter === "draft" && s.status === "draft");
+ return matchesSearch && matchesStatus;
+ });
+ }, [stops, search, statusFilter]);
- const statusCounts = {
- all: stops.length,
- active: stops.filter(s => s.active && s.status !== "draft").length,
- inactive: stops.filter(s => !s.active && s.status !== "draft").length,
- draft: stops.filter(s => s.status === "draft").length,
- };
+ const statusCounts = useMemo(
+ () => ({
+ all: stops.length,
+ active: stops.filter((s) => s.active && s.status !== "draft").length,
+ inactive: stops.filter((s) => !s.active && s.status !== "draft").length,
+ draft: stops.filter((s) => s.status === "draft").length,
+ }),
+ [stops]
+ );
- const tabs = [
- { value: "all", label: "All", count: statusCounts.all },
- { value: "active", label: "Active", count: statusCounts.active },
- { value: "inactive", label: "Inactive", count: statusCounts.inactive },
- { value: "draft", label: "Draft", count: statusCounts.draft },
- ];
+ const tabs = useMemo(
+ () => [
+ { value: "all", label: "All", count: statusCounts.all },
+ { value: "active", label: "Active", count: statusCounts.active },
+ { value: "inactive", label: "Inactive", count: statusCounts.inactive },
+ { value: "draft", label: "Draft", count: statusCounts.draft },
+ ],
+ [statusCounts]
+ );
- const totalPages = Math.ceil(filtered.length / PAGE_SIZE);
+ const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
const paginatedStops = filtered.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
- const draftStops = stops.filter(s => s.status === "draft" && s.active);
- // Bulk selection
const toggleSelectAll = () => {
if (selectedStops.size === paginatedStops.length) {
setSelectedStops(new Set());
} else {
- setSelectedStops(new Set(paginatedStops.map(s => s.id)));
+ setSelectedStops(new Set(paginatedStops.map((s) => s.id)));
}
};
const toggleStopSelection = (stopId: string) => {
- setSelectedStops(prev => {
+ setSelectedStops((prev) => {
const next = new Set(prev);
if (next.has(stopId)) {
next.delete(stopId);
@@ -99,13 +124,11 @@ export default function StopTableClient({ stops }: Props) {
async function handleBulkPublish() {
if (selectedStops.size === 0) return;
-
setBulkPublishing(true);
let successCount = 0;
let failCount = 0;
-
for (const stopId of selectedStops) {
- const stop = stops.find(s => s.id === stopId);
+ const stop = stops.find((s) => s.id === stopId);
if (stop && stop.status === "draft") {
const result = await publishStop(stopId, stop.brand_id);
if (result.success) {
@@ -115,83 +138,123 @@ export default function StopTableClient({ stops }: Props) {
}
}
}
-
setBulkPublishing(false);
setSelectedStops(new Set());
-
if (failCount === 0) {
- showSuccess(`${successCount} stop${successCount !== 1 ? 's' : ''} published`);
+ showSuccess(`${successCount} stop${successCount !== 1 ? "s" : ""} published`);
} else {
showError("Some stops failed", `${successCount} succeeded, ${failCount} failed`);
}
-
startTransition(() => router.refresh());
}
function handleDeleted() {
setDeleteError(null);
- startTransition(() => {
- router.refresh();
- });
+ startTransition(() => router.refresh());
+ }
+
+ function refresh() {
+ startTransition(() => router.refresh());
}
return (
<>
{/* Filter bar */}
-
-
diff --git a/src/components/admin/StatsStrip.tsx b/src/components/admin/StatsStrip.tsx
new file mode 100644
index 0000000..2325e66
--- /dev/null
+++ b/src/components/admin/StatsStrip.tsx
@@ -0,0 +1,31 @@
+type Stat = {
+ label: string;
+ value: number | string;
+ emphasis?: boolean;
+};
+
+type Props = {
+ stats: Stat[];
+ /** Right-aligned slot (e.g. an inline "Next stop" pill or refresh action) */
+ right?: React.ReactNode;
+};
+
+export default function StatsStrip({ stats, right }: Props) {
+ return (
+
- {tab === "stops" ? (
-
+
+ {tab === "stops" ? (
+
+
+ );
+}
diff --git a/src/components/admin/StopTableClient.tsx b/src/components/admin/StopTableClient.tsx
index 4fe5d08..0c4cac1 100644
--- a/src/components/admin/StopTableClient.tsx
+++ b/src/components/admin/StopTableClient.tsx
@@ -1,11 +1,20 @@
"use client";
/* eslint-disable react-hooks/set-state-in-effect */
-import React, { useState, useTransition, useEffect } from "react";
+import React, { useState, useTransition, useEffect, useMemo } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { publishStop } from "@/actions/stops";
-import { AdminSearchInput, AdminFilterTabs, AdminButton, AdminIconButton, useToast, Skeleton } from "@/components/admin/design-system";
+import {
+ AdminSearchInput,
+ AdminFilterTabs,
+ AdminButton,
+ AdminIconButton,
+ useToast,
+ Skeleton,
+} from "@/components/admin/design-system";
+import ScheduleImportModal from "@/components/admin/ScheduleImportModal";
+import AddStopModal from "@/components/admin/AddStopModal";
type Stop = {
id: string;
@@ -18,13 +27,21 @@ type Stop = {
deleted_at?: string | null;
brand_id: string;
status?: string;
- brands: { name: string } | { name: string }[];
+ address?: string | null;
+ brands: { name: string } | { name: string }[] | null;
};
type Props = {
stops: Stop[];
};
+const TAB_NUMERIC: Record<"all" | "active" | "inactive" | "draft", "all" | "active" | "inactive" | "draft"> = {
+ all: "all",
+ active: "active",
+ inactive: "inactive",
+ draft: "draft",
+};
+
export default function StopTableClient({ stops }: Props) {
const router = useRouter();
const { success: showSuccess, error: showError } = useToast();
@@ -36,57 +53,65 @@ export default function StopTableClient({ stops }: Props) {
const [isLoading, setIsLoading] = useState(false);
const [selectedStops, setSelectedStops] = useState
+ {stats.map((s, i) => (
+
+
+ {s.value}
+
+ {s.label}
+
+ ))}
+
+ {right && {right}
}
+
+
{ setSearch(e.target.value); setPage(0); }}
- onClear={() => { setSearch(""); setPage(0); }}
- showClear={true}
- className="flex-1 min-w-48 max-w-64"
+ onChange={(e) => {
+ setSearch(e.target.value);
+ setPage(0);
+ }}
+ onClear={() => {
+ setSearch("");
+ setPage(0);
+ }}
+ showClear
+ className="flex-1 min-w-[180px] max-w-[280px]"
/>
{ setStatusFilter(value as typeof statusFilter); setPage(0); }}
+ onTabChange={(value) => {
+ setStatusFilter(TAB_NUMERIC[value as keyof typeof TAB_NUMERIC] ?? "all");
+ setPage(0);
+ }}
tabs={tabs}
size="sm"
- showCounts={true}
+ showCounts
/>
- {filtered.length} stops
+
+ {filtered.length} stop{filtered.length !== 1 ? "s" : ""}
+
{totalPages > 1 && (
setPage(p => Math.max(0, p - 1))}
+ onClick={() => setPage((p) => Math.max(0, p - 1))}
disabled={page === 0 || isLoading}
className="!rounded-lg border border-[var(--admin-border)]"
>
-
+
- {page + 1}/{totalPages}
+
+ {page + 1}/{totalPages}
+
setPage(p => Math.min(totalPages - 1, p + 1))}
+ onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
disabled={page >= totalPages - 1 || isLoading}
className="!rounded-lg border border-[var(--admin-border)]"
>
-
+
)}
+ setShowImport(true)}
+ icon={
+
+ }
+ >
+ Upload Schedule
+
+ setShowAdd(true)}
+ icon={
+
+ }
+ >
+ Add Stop
+
{/* Bulk actions bar */}
{selectedStops.size > 0 && (
-
+
-
- {selectedStops.size} stop{selectedStops.size !== 1 ? 's' : ''} selected
+
+ {selectedStops.size} stop{selectedStops.size !== 1 ? "s" : ""} selected
@@ -209,7 +272,7 @@ export default function StopTableClient({ stops }: Props) {
{/* Delete error */}
{deleteError && (
-
+
{deleteError}{" "}