feat(admin): add Cmd+K command palette component
Adds a self-contained <CommandPalette /> client component plus a static data file that lists every admin page (per the new IA in docs/superpowers/specs/2026-06-17-admin-redesign.md §4) and a small set of quick actions. Behavior: - Toggles on Cmd+K (mac) / Ctrl+K (win/linux) at document level. - Escape or backdrop click closes; Enter or click navigates. - Fuzzy case-insensitive match on label / category / keywords, top 8 results, highlighted match substring. - ↑/↓ keyboard nav, mouse hover updates selection, auto-focus on input when opened, body scroll lock while open. - Visual: uses existing --admin-card-bg / --admin-border / --admin-primary-soft / --admin-radius-lg / --admin-shadow-lg tokens; fade-in 180ms, scale 0.98→1 animation. - Returns null when closed (no DOM noise). Out of scope for this pass: - Component is NOT mounted in the admin layout (main thread wires it in). The data file is the source of truth; the palette does not import from AdminSidebar. - localStorage-based Recent items are left as a TODO comment in the component; v1 ships without persistence. No new dependencies; uses lucide-react (already in package.json). npx tsc --noEmit is clean.
This commit is contained in:
Tyler
@@ -0,0 +1,468 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* CommandPalette — Cmd+K / Ctrl+K global quick-launcher for the admin.
|
||||
*
|
||||
* Behavior:
|
||||
* - Toggled with Cmd+K (mac) or Ctrl+K (win/linux) on `document`.
|
||||
* - Closes on Escape, on backdrop click, or after a navigation.
|
||||
* - Fuzzy case-insensitive match on `label` / `category` / `keywords`.
|
||||
* - Top 8 results. Renders null when closed (no DOM noise).
|
||||
* - Keyboard: ↑/↓ to move, Enter to select, type to filter.
|
||||
*
|
||||
* Self-contained: does not read from the sidebar, does not depend on any
|
||||
* server data. The static list lives in `./command-palette-data.ts`.
|
||||
*
|
||||
* The component is intentionally NOT mounted in the admin layout by this
|
||||
* file. The main thread / sidebar agent wires it in once it's reviewed.
|
||||
*/
|
||||
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import {
|
||||
BarChart3,
|
||||
Clock,
|
||||
Command,
|
||||
CreditCard,
|
||||
Droplets,
|
||||
FileText,
|
||||
LayoutDashboard,
|
||||
LucideIcon,
|
||||
Map as MapIcon,
|
||||
MapPin,
|
||||
Megaphone,
|
||||
Package,
|
||||
Plug,
|
||||
PlusCircle,
|
||||
Puzzle,
|
||||
Receipt,
|
||||
RefreshCw,
|
||||
Route,
|
||||
ScrollText,
|
||||
Search,
|
||||
Send,
|
||||
Settings,
|
||||
ShoppingCart,
|
||||
Sparkles,
|
||||
Store,
|
||||
Tag,
|
||||
Truck,
|
||||
Upload,
|
||||
UserPlus,
|
||||
Users,
|
||||
Wallet,
|
||||
} from "lucide-react";
|
||||
import { PALETTE_ENTRIES, type PaletteEntry } from "./command-palette-data";
|
||||
|
||||
const MAX_RESULTS = 8;
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Icon registry
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const ICON_MAP: Record<string, LucideIcon> = {
|
||||
// Pages
|
||||
LayoutDashboard,
|
||||
Command,
|
||||
ShoppingCart,
|
||||
MapPin,
|
||||
Package,
|
||||
Truck,
|
||||
Send,
|
||||
Megaphone,
|
||||
FileText,
|
||||
Users,
|
||||
ScrollText,
|
||||
Store,
|
||||
Upload,
|
||||
Sparkles,
|
||||
Clock,
|
||||
Droplets,
|
||||
Route,
|
||||
BarChart3,
|
||||
Receipt,
|
||||
Settings,
|
||||
Tag,
|
||||
CreditCard,
|
||||
Plug,
|
||||
Wallet,
|
||||
Puzzle,
|
||||
// Quick actions
|
||||
PlusCircle,
|
||||
UserPlus,
|
||||
RefreshCw,
|
||||
// Misc / fallbacks
|
||||
Search,
|
||||
Map: MapIcon,
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Filtering / scoring
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function scoreEntry(entry: PaletteEntry, query: string): number {
|
||||
if (!query) return 1;
|
||||
const q = query.toLowerCase();
|
||||
const label = entry.label.toLowerCase();
|
||||
const category = entry.category.toLowerCase();
|
||||
|
||||
let score = 0;
|
||||
if (label === q) score += 100;
|
||||
else if (label.startsWith(q)) score += 50;
|
||||
else if (label.includes(q)) score += 25;
|
||||
|
||||
if (category.toLowerCase().includes(q)) score += 10;
|
||||
if (entry.keywords?.some((k) => k.toLowerCase().includes(q))) score += 5;
|
||||
|
||||
// Quick actions get a small boost when no specific match (so they surface
|
||||
// on the empty query list, alongside the first batch of pages).
|
||||
if (!query && entry.type === "action") score = 0.5;
|
||||
if (!query && entry.type === "page") score = 1 - entry.label.length * 0.001;
|
||||
|
||||
return score;
|
||||
}
|
||||
|
||||
function filterEntries(query: string): PaletteEntry[] {
|
||||
const scored = PALETTE_ENTRIES
|
||||
.map((e) => ({ entry: e, score: scoreEntry(e, query) }))
|
||||
.filter((r) => r.score > 0)
|
||||
.sort((a, b) => b.score - a.score)
|
||||
.slice(0, MAX_RESULTS);
|
||||
return scored.map((r) => r.entry);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Highlight helper
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function HighlightedText({ text, query }: { text: string; query: string }) {
|
||||
if (!query) return <>{text}</>;
|
||||
const q = query.toLowerCase();
|
||||
const idx = text.toLowerCase().indexOf(q);
|
||||
if (idx === -1) return <>{text}</>;
|
||||
return (
|
||||
<>
|
||||
{text.slice(0, idx)}
|
||||
<mark
|
||||
style={{
|
||||
background: "transparent",
|
||||
color: "var(--admin-primary)",
|
||||
fontWeight: 600,
|
||||
padding: 0,
|
||||
}}
|
||||
>
|
||||
{text.slice(idx, idx + query.length)}
|
||||
</mark>
|
||||
{text.slice(idx + query.length)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export default function CommandPalette() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [query, setQuery] = useState("");
|
||||
const [selected, setSelected] = useState(0);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const router = useRouter();
|
||||
|
||||
// Open/close on Cmd+K / Ctrl+K. Toggle so the same shortcut closes it.
|
||||
useEffect(() => {
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
|
||||
e.preventDefault();
|
||||
setOpen((o) => !o);
|
||||
}
|
||||
}
|
||||
document.addEventListener("keydown", onKeyDown);
|
||||
return () => document.removeEventListener("keydown", onKeyDown);
|
||||
}, []);
|
||||
|
||||
// Reset on open, focus the input, and lock body scroll.
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
document.body.style.overflow = "";
|
||||
return;
|
||||
}
|
||||
setQuery("");
|
||||
setSelected(0);
|
||||
document.body.style.overflow = "hidden";
|
||||
// Defer focus to next frame so the input is mounted and the modal
|
||||
// animation has started (keeps the focus ring from flickering in).
|
||||
const raf = requestAnimationFrame(() => inputRef.current?.focus());
|
||||
return () => {
|
||||
cancelAnimationFrame(raf);
|
||||
document.body.style.overflow = "";
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
// Global Escape while open (covers the case where focus is not on input).
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
function onKey(e: KeyboardEvent) {
|
||||
if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
setOpen(false);
|
||||
}
|
||||
}
|
||||
document.addEventListener("keydown", onKey);
|
||||
return () => document.removeEventListener("keydown", onKey);
|
||||
}, [open]);
|
||||
|
||||
// Filtering
|
||||
const results = useMemo(() => filterEntries(query), [query]);
|
||||
|
||||
// Reset selection on every query change so the top result is always active.
|
||||
useEffect(() => {
|
||||
setSelected(0);
|
||||
}, [query]);
|
||||
|
||||
// Clamp selection to results length
|
||||
useEffect(() => {
|
||||
if (selected >= results.length && results.length > 0) {
|
||||
setSelected(results.length - 1);
|
||||
} else if (results.length === 0) {
|
||||
setSelected(0);
|
||||
}
|
||||
}, [results, selected]);
|
||||
|
||||
const navigate = useCallback(
|
||||
(href: string) => {
|
||||
setOpen(false);
|
||||
router.push(href);
|
||||
},
|
||||
[router]
|
||||
);
|
||||
|
||||
// In-input keyboard nav. Attached to the input itself so it works whether
|
||||
// the user is typing or the input just has focus.
|
||||
const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === "ArrowDown") {
|
||||
e.preventDefault();
|
||||
if (results.length === 0) return;
|
||||
setSelected((s) => (s + 1) % results.length);
|
||||
} else if (e.key === "ArrowUp") {
|
||||
e.preventDefault();
|
||||
if (results.length === 0) return;
|
||||
setSelected((s) => (s - 1 + results.length) % results.length);
|
||||
} else if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
const entry = results[selected];
|
||||
if (entry) navigate(entry.href);
|
||||
}
|
||||
};
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Command palette"
|
||||
onClick={() => setOpen(false)}
|
||||
style={{
|
||||
position: "fixed",
|
||||
inset: 0,
|
||||
zIndex: 60,
|
||||
backgroundColor: "rgba(26, 24, 20, 0.4)",
|
||||
backdropFilter: "blur(4px)",
|
||||
WebkitBackdropFilter: "blur(4px)",
|
||||
display: "flex",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "center",
|
||||
paddingTop: "15vh",
|
||||
animation: "cp-fade-in 180ms ease-out",
|
||||
}}
|
||||
>
|
||||
{/* Local keyframes — scoped via the dialog's runtime so they don't
|
||||
leak into the global stylesheet. */}
|
||||
<style>{`
|
||||
@keyframes cp-fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@keyframes cp-scale-in {
|
||||
from { opacity: 0; transform: scale(0.98); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
width: "100%",
|
||||
maxWidth: "36rem",
|
||||
margin: "0 1rem",
|
||||
backgroundColor: "var(--admin-card-bg)",
|
||||
border: "1px solid var(--admin-border)",
|
||||
borderRadius: "var(--admin-radius-lg)",
|
||||
boxShadow: "var(--admin-shadow-lg)",
|
||||
overflow: "hidden",
|
||||
animation: "cp-scale-in 180ms ease-out",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
{/* Search input row */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "0.75rem",
|
||||
padding: "0.875rem 1rem",
|
||||
borderBottom: "1px solid var(--admin-border)",
|
||||
}}
|
||||
>
|
||||
<Search
|
||||
size={18}
|
||||
style={{ color: "var(--admin-text-muted)", flexShrink: 0 }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
onKeyDown={handleInputKeyDown}
|
||||
placeholder="Search pages, actions, anything…"
|
||||
aria-label="Search command palette"
|
||||
spellCheck={false}
|
||||
autoComplete="off"
|
||||
style={{
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
border: "none",
|
||||
outline: "none",
|
||||
background: "transparent",
|
||||
fontSize: "1rem",
|
||||
lineHeight: 1.4,
|
||||
color: "var(--admin-text-primary)",
|
||||
fontFamily: "inherit",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Results */}
|
||||
<div
|
||||
role="listbox"
|
||||
aria-label="Results"
|
||||
style={{
|
||||
maxHeight: "60vh",
|
||||
overflowY: "auto",
|
||||
padding: "0.375rem",
|
||||
}}
|
||||
>
|
||||
{/*
|
||||
TODO (next pass): recent items
|
||||
- Persist a small ring buffer of last-visited entries in localStorage
|
||||
under "rc-cmdk-recent" (cap at 5).
|
||||
- Read on mount, render as a "Recent" section above "Pages" when
|
||||
present and the query is empty.
|
||||
- Update on `navigate()` after a successful route push.
|
||||
Skipped for v1 per the design spec.
|
||||
*/}
|
||||
{results.length === 0 ? (
|
||||
<div
|
||||
style={{
|
||||
padding: "2rem 1rem",
|
||||
textAlign: "center",
|
||||
color: "var(--admin-text-muted)",
|
||||
fontSize: "0.875rem",
|
||||
}}
|
||||
>
|
||||
No results for “{query}”
|
||||
</div>
|
||||
) : (
|
||||
results.map((entry, i) => {
|
||||
const Icon = ICON_MAP[entry.iconName] ?? Search;
|
||||
const isSelected = i === selected;
|
||||
return (
|
||||
<button
|
||||
key={entry.id}
|
||||
type="button"
|
||||
role="option"
|
||||
aria-selected={isSelected}
|
||||
onClick={() => navigate(entry.href)}
|
||||
onMouseEnter={() => setSelected(i)}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "0.75rem",
|
||||
width: "100%",
|
||||
padding: "0.625rem 0.75rem",
|
||||
borderRadius: "var(--admin-radius-md)",
|
||||
border: "none",
|
||||
background: isSelected
|
||||
? "var(--admin-primary-soft)"
|
||||
: "transparent",
|
||||
color: isSelected
|
||||
? "var(--admin-primary)"
|
||||
: "var(--admin-text-primary)",
|
||||
cursor: "pointer",
|
||||
textAlign: "left",
|
||||
fontSize: "0.875rem",
|
||||
lineHeight: 1.3,
|
||||
fontFamily: "inherit",
|
||||
transition:
|
||||
"background-color 80ms ease-out, color 80ms ease-out",
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
size={16}
|
||||
style={{
|
||||
flexShrink: 0,
|
||||
opacity: isSelected ? 1 : 0.7,
|
||||
}}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
<HighlightedText text={entry.label} query={query} />
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "0.6875rem",
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.05em",
|
||||
color: "var(--admin-text-muted)",
|
||||
fontWeight: 500,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{entry.category}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer hint */}
|
||||
<div
|
||||
style={{
|
||||
padding: "0.5rem 1rem 0.625rem",
|
||||
borderTop: "1px solid var(--admin-border)",
|
||||
fontSize: "0.6875rem",
|
||||
color: "var(--admin-text-muted)",
|
||||
textAlign: "center",
|
||||
letterSpacing: "0.02em",
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
↑↓ to navigate · ↵ to select · esc to close
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,402 @@
|
||||
/**
|
||||
* Command Palette — static entry list.
|
||||
*
|
||||
* Source of truth for the Cmd+K palette. The palette component imports
|
||||
* `PALETTE_ENTRIES` and filters/scores this list. This file does NOT
|
||||
* import from the sidebar — keep them independent so the palette
|
||||
* works even if the sidebar is restructured.
|
||||
*
|
||||
* Entries are grouped by the new admin IA (see
|
||||
* docs/superpowers/specs/2026-06-17-admin-redesign.md §4):
|
||||
* Workspace · Operations · Communications · Growth ·
|
||||
* Tracking · Insights · Settings · Public
|
||||
*
|
||||
* `type` distinguishes pages (jump to a route) from quick actions
|
||||
* (a route + query string that opens a creation flow / composer).
|
||||
*/
|
||||
|
||||
export type PaletteEntryType = "page" | "action";
|
||||
|
||||
export type PaletteEntry = {
|
||||
/** Stable id, used as React key. */
|
||||
id: string;
|
||||
/** "page" = nav to route, "action" = nav to a creation flow / composer. */
|
||||
type: PaletteEntryType;
|
||||
/** Primary text shown in the result row. */
|
||||
label: string;
|
||||
/** Route to navigate to when selected. */
|
||||
href: string;
|
||||
/** Sidebar group (Pages) or "Quick action" (Actions). */
|
||||
category: string;
|
||||
/** Lucide icon name (PascalCase, e.g. "ShoppingCart"). */
|
||||
iconName: string;
|
||||
/** Extra search terms (lowercase, comma-separated in code). */
|
||||
keywords?: string[];
|
||||
};
|
||||
|
||||
export const PALETTE_ENTRIES: PaletteEntry[] = [
|
||||
// ── Workspace ──────────────────────────────────────────────────────
|
||||
{
|
||||
id: "page-dashboard",
|
||||
type: "page",
|
||||
label: "Dashboard",
|
||||
href: "/admin",
|
||||
category: "Workspace",
|
||||
iconName: "LayoutDashboard",
|
||||
keywords: ["home", "overview"],
|
||||
},
|
||||
{
|
||||
id: "page-command-center",
|
||||
type: "page",
|
||||
label: "Command Center",
|
||||
href: "/admin/command-center",
|
||||
category: "Workspace",
|
||||
iconName: "Command",
|
||||
keywords: ["platform", "admin", "ops", "triage"],
|
||||
},
|
||||
|
||||
// ── Operations ─────────────────────────────────────────────────────
|
||||
{
|
||||
id: "page-orders",
|
||||
type: "page",
|
||||
label: "Orders",
|
||||
href: "/admin/orders",
|
||||
category: "Operations",
|
||||
iconName: "ShoppingCart",
|
||||
keywords: ["sales", "purchases", "invoices"],
|
||||
},
|
||||
{
|
||||
id: "page-stops",
|
||||
type: "page",
|
||||
label: "Stops & Routes",
|
||||
href: "/admin/stops",
|
||||
category: "Operations",
|
||||
iconName: "MapPin",
|
||||
keywords: ["schedule", "pickup locations", "calendar"],
|
||||
},
|
||||
{
|
||||
id: "page-products",
|
||||
type: "page",
|
||||
label: "Products",
|
||||
href: "/admin/products",
|
||||
category: "Operations",
|
||||
iconName: "Package",
|
||||
keywords: ["catalog", "sku", "inventory"],
|
||||
},
|
||||
{
|
||||
id: "page-pickup",
|
||||
type: "page",
|
||||
label: "Driver Pickup",
|
||||
href: "/admin/pickup",
|
||||
category: "Operations",
|
||||
iconName: "Truck",
|
||||
keywords: ["fulfillment", "driver"],
|
||||
},
|
||||
{
|
||||
id: "page-shipping",
|
||||
type: "page",
|
||||
label: "Shipping",
|
||||
href: "/admin/shipping",
|
||||
category: "Operations",
|
||||
iconName: "Send",
|
||||
keywords: ["shipments", "labels", "fedex"],
|
||||
},
|
||||
|
||||
// ── Communications ─────────────────────────────────────────────────
|
||||
{
|
||||
id: "page-communications",
|
||||
type: "page",
|
||||
label: "Harvest Reach",
|
||||
href: "/admin/communications",
|
||||
category: "Communications",
|
||||
iconName: "Megaphone",
|
||||
keywords: ["email", "sms", "campaigns", "templates", "contacts", "blasts"],
|
||||
},
|
||||
{
|
||||
id: "page-communications-templates",
|
||||
type: "page",
|
||||
label: "Email Templates",
|
||||
href: "/admin/communications?tab=templates",
|
||||
category: "Communications",
|
||||
iconName: "FileText",
|
||||
keywords: ["harvest reach", "templates"],
|
||||
},
|
||||
{
|
||||
id: "page-communications-contacts",
|
||||
type: "page",
|
||||
label: "Contacts",
|
||||
href: "/admin/communications?tab=contacts",
|
||||
category: "Communications",
|
||||
iconName: "Users",
|
||||
keywords: ["harvest reach", "audience", "subscribers"],
|
||||
},
|
||||
{
|
||||
id: "page-communications-logs",
|
||||
type: "page",
|
||||
label: "Message Logs",
|
||||
href: "/admin/communications?tab=logs",
|
||||
category: "Communications",
|
||||
iconName: "ScrollText",
|
||||
keywords: ["harvest reach", "history", "delivered"],
|
||||
},
|
||||
|
||||
// ── Growth ─────────────────────────────────────────────────────────
|
||||
{
|
||||
id: "page-wholesale",
|
||||
type: "page",
|
||||
label: "Wholesale",
|
||||
href: "/admin/wholesale",
|
||||
category: "Growth",
|
||||
iconName: "Store",
|
||||
keywords: ["b2b", "buyers", "deposits"],
|
||||
},
|
||||
{
|
||||
id: "page-import",
|
||||
type: "page",
|
||||
label: "Import Center",
|
||||
href: "/admin/import",
|
||||
category: "Growth",
|
||||
iconName: "Upload",
|
||||
keywords: ["csv", "bulk", "upload"],
|
||||
},
|
||||
{
|
||||
id: "page-ai",
|
||||
type: "page",
|
||||
label: "AI Intelligence",
|
||||
href: "/admin/advanced",
|
||||
category: "Growth",
|
||||
iconName: "Sparkles",
|
||||
keywords: ["automation", "assistant", "smart", "claude"],
|
||||
},
|
||||
|
||||
// ── Tracking ───────────────────────────────────────────────────────
|
||||
{
|
||||
id: "page-time-tracking",
|
||||
type: "page",
|
||||
label: "Time Tracking",
|
||||
href: "/admin/time-tracking",
|
||||
category: "Tracking",
|
||||
iconName: "Clock",
|
||||
keywords: ["workers", "pins", "tasks", "shifts"],
|
||||
},
|
||||
{
|
||||
id: "page-water-log",
|
||||
type: "page",
|
||||
label: "Water Log",
|
||||
href: "/admin/water-log",
|
||||
category: "Tracking",
|
||||
iconName: "Droplets",
|
||||
keywords: ["irrigation", "usage"],
|
||||
},
|
||||
{
|
||||
id: "page-route-trace",
|
||||
type: "page",
|
||||
label: "Route Trace",
|
||||
href: "/admin/route-trace",
|
||||
category: "Tracking",
|
||||
iconName: "Route",
|
||||
keywords: ["trace", "map", "gps"],
|
||||
},
|
||||
|
||||
// ── Insights ───────────────────────────────────────────────────────
|
||||
{
|
||||
id: "page-reports",
|
||||
type: "page",
|
||||
label: "Reports",
|
||||
href: "/admin/reports",
|
||||
category: "Insights",
|
||||
iconName: "BarChart3",
|
||||
keywords: ["analytics", "kpi"],
|
||||
},
|
||||
{
|
||||
id: "page-taxes",
|
||||
type: "page",
|
||||
label: "Tax Dashboard",
|
||||
href: "/admin/taxes",
|
||||
category: "Insights",
|
||||
iconName: "Receipt",
|
||||
keywords: ["taxes", "compliance", "1099"],
|
||||
},
|
||||
|
||||
// ── Settings ───────────────────────────────────────────────────────
|
||||
{
|
||||
id: "page-settings",
|
||||
type: "page",
|
||||
label: "General Settings",
|
||||
href: "/admin/settings",
|
||||
category: "Settings",
|
||||
iconName: "Settings",
|
||||
keywords: ["config", "preferences"],
|
||||
},
|
||||
{
|
||||
id: "page-settings-brand",
|
||||
type: "page",
|
||||
label: "Brand Settings",
|
||||
href: "/admin/settings/brand",
|
||||
category: "Settings",
|
||||
iconName: "Tag",
|
||||
keywords: ["branding", "logo", "name"],
|
||||
},
|
||||
{
|
||||
id: "page-settings-billing",
|
||||
type: "page",
|
||||
label: "Billing",
|
||||
href: "/admin/settings/billing",
|
||||
category: "Settings",
|
||||
iconName: "CreditCard",
|
||||
keywords: ["subscription", "plan", "invoice", "stripe"],
|
||||
},
|
||||
{
|
||||
id: "page-users",
|
||||
type: "page",
|
||||
label: "Users & Permissions",
|
||||
href: "/admin/users",
|
||||
category: "Settings",
|
||||
iconName: "Users",
|
||||
keywords: ["team", "roles", "admins"],
|
||||
},
|
||||
{
|
||||
id: "page-integrations",
|
||||
type: "page",
|
||||
label: "Integrations",
|
||||
href: "/admin/settings/integrations",
|
||||
category: "Settings",
|
||||
iconName: "Plug",
|
||||
keywords: ["stripe", "square", "resend", "connect"],
|
||||
},
|
||||
{
|
||||
id: "page-payments",
|
||||
type: "page",
|
||||
label: "Payments",
|
||||
href: "/admin/settings/payments",
|
||||
category: "Settings",
|
||||
iconName: "Wallet",
|
||||
keywords: ["processor", "stripe", "square"],
|
||||
},
|
||||
{
|
||||
id: "page-shipping-settings",
|
||||
type: "page",
|
||||
label: "Shipping Settings",
|
||||
href: "/admin/settings/shipping",
|
||||
category: "Settings",
|
||||
iconName: "Truck",
|
||||
keywords: ["zones", "rates", "fedex"],
|
||||
},
|
||||
{
|
||||
id: "page-addons",
|
||||
type: "page",
|
||||
label: "Add-ons",
|
||||
href: "/admin/settings/apps",
|
||||
category: "Settings",
|
||||
iconName: "Puzzle",
|
||||
keywords: ["features", "extensions", "apps"],
|
||||
},
|
||||
|
||||
// ── Public storefronts ─────────────────────────────────────────────
|
||||
{
|
||||
id: "page-storefront-tuxedo",
|
||||
type: "page",
|
||||
label: "Tuxedo Storefront",
|
||||
href: "/tuxedo",
|
||||
category: "Public",
|
||||
iconName: "Store",
|
||||
keywords: ["public", "site", "shop"],
|
||||
},
|
||||
{
|
||||
id: "page-storefront-indian-river",
|
||||
type: "page",
|
||||
label: "Indian River Direct",
|
||||
href: "/indian-river-direct",
|
||||
category: "Public",
|
||||
iconName: "Store",
|
||||
keywords: ["public", "site", "shop"],
|
||||
},
|
||||
|
||||
// ── Quick actions ──────────────────────────────────────────────────
|
||||
{
|
||||
id: "action-new-order",
|
||||
type: "action",
|
||||
label: "Create new order",
|
||||
href: "/admin/orders?new=true",
|
||||
category: "Quick action",
|
||||
iconName: "PlusCircle",
|
||||
keywords: ["new", "add", "order"],
|
||||
},
|
||||
{
|
||||
id: "action-new-product",
|
||||
type: "action",
|
||||
label: "Add new product",
|
||||
href: "/admin/products/new",
|
||||
category: "Quick action",
|
||||
iconName: "PlusCircle",
|
||||
keywords: ["new", "add", "product", "sku"],
|
||||
},
|
||||
{
|
||||
id: "action-new-stop",
|
||||
type: "action",
|
||||
label: "Add new stop",
|
||||
href: "/admin/stops/new",
|
||||
category: "Quick action",
|
||||
iconName: "PlusCircle",
|
||||
keywords: ["new", "add", "stop", "location"],
|
||||
},
|
||||
{
|
||||
id: "action-send-campaign",
|
||||
type: "action",
|
||||
label: "Send campaign",
|
||||
href: "/admin/communications/compose",
|
||||
category: "Quick action",
|
||||
iconName: "Send",
|
||||
keywords: ["email", "sms", "blast", "harvest reach"],
|
||||
},
|
||||
{
|
||||
id: "action-open-billing",
|
||||
type: "action",
|
||||
label: "Open billing",
|
||||
href: "/admin/settings/billing",
|
||||
category: "Quick action",
|
||||
iconName: "CreditCard",
|
||||
keywords: ["subscription", "plan", "stripe"],
|
||||
},
|
||||
{
|
||||
id: "action-invite-user",
|
||||
type: "action",
|
||||
label: "Invite team member",
|
||||
href: "/admin/users",
|
||||
category: "Quick action",
|
||||
iconName: "UserPlus",
|
||||
keywords: ["user", "team", "admin"],
|
||||
},
|
||||
{
|
||||
id: "action-sync-square",
|
||||
type: "action",
|
||||
label: "Sync Square",
|
||||
href: "/admin/settings/square-sync",
|
||||
category: "Quick action",
|
||||
iconName: "RefreshCw",
|
||||
keywords: ["sync", "square", "inventory"],
|
||||
},
|
||||
{
|
||||
id: "action-generate-report",
|
||||
type: "action",
|
||||
label: "Generate report",
|
||||
href: "/admin/reports",
|
||||
category: "Quick action",
|
||||
iconName: "FileText",
|
||||
keywords: ["report", "export", "analytics"],
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Map from PaletteEntry.iconName (PascalCase lucide name) to the imported
|
||||
* component. Centralized here so the palette component doesn't have to
|
||||
* know about every icon — it just looks up the component by string.
|
||||
*
|
||||
* The component imports lucide-react icons lazily (only the ones we
|
||||
* 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) => {
|
||||
if (!acc.includes(e.iconName)) acc.push(e.iconName);
|
||||
return acc;
|
||||
}, []);
|
||||
Reference in New Issue
Block a user