tyler/route-commerce
1
0
Fork 1
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

Consolidate admin pages into tabbed layouts with warm stone theme

Browse Source 
- Add SettingsClient with tabs: General, Users, Integrations
- Add RouteTracePage with tabs: Dashboard, Lots, Lookup, Settings
- Fix dark styling in AdminMeClient.tsx (red/green alerts)
- Fix dark styling in AIClient.tsx (emerald/amber/green/red/blue)
- Fix ImportCenterClient.tsx (already correct, no changes needed)
- Fix TypeScript errors in LotListTable, RouteTraceDashboard
- Convert lot.id to lot.lot_id for HaulingLot compatibility
- Update route-trace components to warm stone theme
This commit is contained in:
default
2026-06-01 20:45:58 +00:00
parent 3274470737
commit 809e0061ca
20 changed files with 834 additions and 560 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/admin/me/AdminMeClient.tsx
+30 -30
View File
@@ -71,44 +71,44 @@ export default function AdminMeClient({ currentUser }: ProfilePageProps) {
}
return (
<main className="min-h-screen bg-zinc-950 px-6 py-12">
<main className="min-h-screen bg-stone-50 px-6 py-12">
<div className="mx-auto max-w-2xl">
<Link href="/admin" className="text-sm text-zinc-500 hover:text-zinc-300">
<Link href="/admin" className="text-sm text-stone-500 hover:text-stone-700">
← Back to dashboard
</Link>
<h1 className="mt-6 text-3xl font-bold text-zinc-100">My Profile</h1>
<p className="mt-1 text-sm text-zinc-500">
<h1 className="mt-6 text-3xl font-bold text-stone-950">My Profile</h1>
<p className="mt-1 text-sm text-stone-500">
Manage your profile information and preferences.
</p>
{error && (
<div className="mt-4 rounded-xl bg-red-900/30 p-4 text-sm text-red-400">{error}</div>
<div className="mt-4 rounded-xl bg-red-50 p-4 text-sm text-red-700">{error}</div>
)}
{/* Profile card */}
<div className="mt-6 rounded-2xl bg-zinc-900 p-6 shadow-black/20 ring-1 ring-zinc-700">
<div className="mt-6 rounded-2xl bg-white p-6 shadow-black/20 ring-1 ring-stone-200">
<div className="flex items-start justify-between">
<div>
<h2 className="text-lg font-semibold text-zinc-100">
<h2 className="text-lg font-semibold text-stone-950">
{currentUser.display_name || currentUser.email}
</h2>
{currentUser.display_name && (
<p className="text-sm text-zinc-500">{currentUser.email}</p>
<p className="text-sm text-stone-500">{currentUser.email}</p>
)}
<div className="mt-2 flex items-center gap-2">
<span className="rounded-full bg-zinc-950 px-2.5 py-0.5 text-xs font-semibold capitalize text-zinc-400">
<span className="rounded-full bg-stone-50 px-2.5 py-0.5 text-xs font-semibold capitalize text-stone-500">
{currentUser.role.replace("_", " ")}
</span>
{currentUser.brand_name && (
<span className="text-xs text-zinc-500">{currentUser.brand_name}</span>
<span className="text-xs text-stone-500">{currentUser.brand_name}</span>
)}
</div>
</div>
{!editing && (
<button
onClick={() => setEditing(true)}
className="rounded-lg border border-zinc-800 px-4 py-2 text-sm font-medium text-zinc-400 hover:bg-zinc-800"
className="rounded-lg border border-stone-200 px-4 py-2 text-sm font-medium text-stone-500 hover:bg-stone-100"
>
Edit Profile
</button>
@@ -120,12 +120,12 @@ export default function AdminMeClient({ currentUser }: ProfilePageProps) {
<div className="mt-6 space-y-4">
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-xs font-medium uppercase tracking-wide text-slate-400">Phone</p>
<p className="mt-1 text-sm text-zinc-300">{currentUser.phone_number ?? "—"}</p>
<p className="text-xs font-medium uppercase tracking-wide text-stone-500">Phone</p>
<p className="mt-1 text-sm text-stone-700">{currentUser.phone_number ?? "—"}</p>
</div>
<div>
<p className="text-xs font-medium uppercase tracking-wide text-slate-400">Email</p>
<p className="mt-1 text-sm text-zinc-300">{currentUser.email}</p>
<p className="text-xs font-medium uppercase tracking-wide text-stone-500">Email</p>
<p className="mt-1 text-sm text-stone-700">{currentUser.email}</p>
</div>
</div>
</div>
@@ -135,22 +135,22 @@ export default function AdminMeClient({ currentUser }: ProfilePageProps) {
{editing && (
<form onSubmit={handleSaveProfile} className="mt-6 space-y-4">
<div>
<label className="block text-sm font-medium text-zinc-300">Display Name</label>
<label className="block text-sm font-medium text-stone-700">Display Name</label>
<input
type="text"
value={displayName}
onChange={(e) => setDisplayName(e.target.value)}
className="mt-1 w-full rounded-lg border border-zinc-600 px-3 py-2 text-sm focus:border-violet-500 focus:outline-none focus:ring-1 focus:ring-slate-500"
className="mt-1 w-full rounded-lg border border-stone-300 px-3 py-2 text-sm focus:border-emerald-500 focus:outline-none focus:ring-1 focus:ring-emerald-500"
placeholder="Your name"
/>
</div>
<div>
<label className="block text-sm font-medium text-zinc-300">Phone Number</label>
<label className="block text-sm font-medium text-stone-700">Phone Number</label>
<input
type="tel"
value={phoneNumber}
onChange={(e) => setPhoneNumber(e.target.value)}
className="mt-1 w-full rounded-lg border border-zinc-600 px-3 py-2 text-sm focus:border-violet-500 focus:outline-none focus:ring-1 focus:ring-slate-500"
className="mt-1 w-full rounded-lg border border-stone-300 px-3 py-2 text-sm focus:border-emerald-500 focus:outline-none focus:ring-1 focus:ring-emerald-500"
placeholder="+1 (555) 000-0000"
/>
</div>
@@ -158,14 +158,14 @@ export default function AdminMeClient({ currentUser }: ProfilePageProps) {
<button
type="button"
onClick={() => { setEditing(false); setError(null); }}
className="rounded-lg border border-zinc-800 px-4 py-2 text-sm font-medium text-zinc-400 hover:bg-zinc-800"
className="rounded-lg border border-stone-200 px-4 py-2 text-sm font-medium text-stone-500 hover:bg-stone-100"
>
Cancel
</button>
<button
type="submit"
disabled={saving}
className="rounded-lg bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-800 disabled:opacity-50"
className="rounded-lg bg-stone-800 px-4 py-2 text-sm font-medium text-white hover:bg-stone-700 disabled:opacity-50"
>
{saving ? "Saving…" : "Save Changes"}
</button>
@@ -175,35 +175,35 @@ export default function AdminMeClient({ currentUser }: ProfilePageProps) {
</div>
{/* Email change section */}
<div className="mt-6 rounded-2xl bg-zinc-900 p-6 shadow-black/20 ring-1 ring-zinc-700">
<h3 className="text-base font-semibold text-zinc-100">Email Address</h3>
<p className="mt-1 text-sm text-zinc-500">
Current: <span className="font-medium text-zinc-300">{currentUser.email}</span>
<div className="mt-6 rounded-2xl bg-white p-6 shadow-black/20 ring-1 ring-stone-200">
<h3 className="text-base font-semibold text-stone-950">Email Address</h3>
<p className="mt-1 text-sm text-stone-500">
Current: <span className="font-medium text-stone-700">{currentUser.email}</span>
</p>
{emailChangeSent ? (
<div className="mt-4 rounded-lg bg-green-900/30 p-4 text-sm text-green-400">
<div className="mt-4 rounded-lg bg-green-50 p-4 text-sm text-green-700">
A confirmation email has been sent to <strong>{newEmail}</strong>. Click the link in the email to confirm the change.
</div>
) : (
<form onSubmit={handleEmailChange} className="mt-4 space-y-3">
<div>
<label className="block text-sm font-medium text-zinc-300">New Email Address</label>
<label className="block text-sm font-medium text-stone-700">New Email Address</label>
<input
type="email"
value={newEmail}
onChange={(e) => setNewEmail(e.target.value)}
className="mt-1 w-full rounded-lg border border-zinc-600 px-3 py-2 text-sm focus:border-violet-500 focus:outline-none focus:ring-1 focus:ring-slate-500"
className="mt-1 w-full rounded-lg border border-stone-300 px-3 py-2 text-sm focus:border-emerald-500 focus:outline-none focus:ring-1 focus:ring-emerald-500"
placeholder="new@example.com"
/>
</div>
{emailError && (
<div className="rounded-lg bg-red-900/30 p-3 text-sm text-red-400">{emailError}</div>
<div className="rounded-lg bg-red-50 p-3 text-sm text-red-700">{emailError}</div>
)}
<button
type="submit"
disabled={changingEmail || !newEmail || !newEmail.includes("@")}
className="rounded-lg bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-800 disabled:opacity-50"
className="rounded-lg bg-stone-800 px-4 py-2 text-sm font-medium text-white hover:bg-stone-700 disabled:opacity-50"
>
{changingEmail ? "Sending…" : "Change Email"}
</button>