tyler
0245aa29cc
Tuxedo buyer path (subagent 2): - src/app/tuxedo/page.tsx: remove duplicate CinematicShowcase render - src/components/storefront/CinematicShowcase.tsx: wire up useCart, Add to Cart button, brand-aware fulfillment - src/app/tuxedo/stops/TuxedoStopsList.tsx: improved empty state with calendar icon + CTAs - src/app/cart/CartClient.tsx: guard against empty cart checkout; 'Cart is Empty' state Billing reconciliation (subagent 3): - src/actions/billing/billing-overview.ts: NEW — single source of truth - src/app/admin/settings/billing/page.tsx: use getBillingOverview - src/app/admin/settings/billing/BillingClientPage.tsx: rewritten to consume BillingOverview (status pill, addons state, removable flags, derived invoice amounts, usage footer) - src/app/admin/page.tsx: use getBillingOverview (aligns dashboard with billing) - src/components/admin/DashboardClient.tsx: 'Active Products' now reads from getBillingOverview - supabase/migrations/203_plan_usage_active_products.sql: get_brand_plan_info counts products as active=true AND deleted_at IS NULL Harvest Reach dedup + audience preview (manual, subagent 4 didn't complete): - src/components/admin/CommunicationsPage.tsx: add initialTab prop - src/app/admin/communications/compose/page.tsx: now renders with initialTab='compose' (single compose experience, no duplicate edit panel) - src/components/admin/HarvestReach/CampaignComposerPage.tsx: always-visible audience preview panel (count + sample emails), loads via previewCampaignAudience action Layout/content consistency + a11y sweep (subagent 5): - src/components/layout/SiteHeader.tsx: Admin link only shows for authenticated admin users - src/components/Providers.tsx: suppress public SiteHeader/Footer for /admin, /cart, /checkout, /wholesale, /water (fixes duplicate headers) - src/app/contact/ContactClientPage.tsx: Phone/Email now use tel:/mailto: links; dynamic year - src/app/blog/page.tsx, changelog, privacy-policy, roadmap, security, terms-and-conditions, waitlist: dynamic year - src/app/admin/wholesale/WholesaleClient.tsx: proper htmlFor/id, type=email/tel, autoComplete - src/app/admin/settings/ai/AIClient.tsx: proper htmlFor/id, required + aria-required - src/app/admin/settings/integrations/IntegrationsClient.tsx: only mask secret fields; add required + aria-required + CredentialField.required type - src/app/admin/water-log/headgates/HeadgatesManager.tsx: htmlFor/id, aria-required - src/components/admin/CreateUserModal.tsx: htmlFor/id, required, aria-required, aria-describedby, autoComplete - src/app/admin/me/AdminMeClient.tsx, products/import, sales/import, water-log/settings, login, brands, tuxedo: a11y polish (ids/required/aria)
273 lines
11 KiB
TypeScript
273 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import { supabase } from "@/lib/supabase";
|
|
import { AdminUserRow } from "@/actions/admin/users";
|
|
import { logUserActivity } from "@/actions/admin/audit";
|
|
|
|
type ProfilePageProps = {
|
|
currentUser: AdminUserRow;
|
|
};
|
|
|
|
export default function AdminMeClient({ currentUser }: ProfilePageProps) {
|
|
const [editing, setEditing] = useState(false);
|
|
const [displayName, setDisplayName] = useState(currentUser.display_name ?? "");
|
|
const [phoneNumber, setPhoneNumber] = useState(currentUser.phone_number ?? "");
|
|
const [saving, setSaving] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [emailChangeSent, setEmailChangeSent] = useState(false);
|
|
const [changingEmail, setChangingEmail] = useState(false);
|
|
const [newEmail, setNewEmail] = useState("");
|
|
const [emailError, setEmailError] = useState<string | null>(null);
|
|
|
|
async function handleSaveProfile(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
setSaving(true);
|
|
setError(null);
|
|
try {
|
|
const { error: rpcError } = await supabase.rpc("update_admin_user", {
|
|
p_id: currentUser.id,
|
|
p_display_name: displayName || null,
|
|
p_phone_number: phoneNumber || null,
|
|
});
|
|
if (rpcError) {
|
|
setError(rpcError.message);
|
|
return;
|
|
}
|
|
await logUserActivity({
|
|
user_id: currentUser.user_id,
|
|
activity_type: "profile_update",
|
|
details: { fields: ["display_name", "phone_number"] },
|
|
});
|
|
setEditing(false);
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
async function handleEmailChange(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
setChangingEmail(true);
|
|
setEmailError(null);
|
|
try {
|
|
const { error: updateError } = await supabase.auth.updateUser({
|
|
email: newEmail,
|
|
});
|
|
if (updateError) {
|
|
setEmailError(updateError.message);
|
|
return;
|
|
}
|
|
await logUserActivity({
|
|
user_id: currentUser.user_id,
|
|
activity_type: "email_change",
|
|
details: { new_email: newEmail },
|
|
});
|
|
setEmailChangeSent(true);
|
|
setChangingEmail(false);
|
|
} finally {
|
|
setChangingEmail(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<main className="min-h-screen px-6 py-12" style={{ backgroundColor: "var(--admin-bg)" }}>
|
|
<div className="mx-auto max-w-2xl">
|
|
<Link
|
|
href="/admin"
|
|
className="text-sm transition-colors"
|
|
style={{ color: "var(--admin-text-muted)" }}
|
|
>
|
|
← Back to dashboard
|
|
</Link>
|
|
|
|
<h1 className="mt-6 text-3xl font-bold" style={{ color: "var(--admin-text-primary)" }}>My Profile</h1>
|
|
<p className="mt-1 text-sm" style={{ color: "var(--admin-text-muted)" }}>
|
|
Manage your profile information and preferences.
|
|
</p>
|
|
|
|
{error && (
|
|
<div className="mt-4 rounded-xl p-4 text-sm" style={{
|
|
backgroundColor: "rgba(239, 68, 68, 0.1)",
|
|
color: "rgb(239, 68, 68)"
|
|
}}>{error}</div>
|
|
)}
|
|
|
|
{/* Profile card */}
|
|
<div className="mt-6 rounded-2xl p-6 shadow-lg border" style={{
|
|
backgroundColor: "white",
|
|
boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
|
|
borderColor: "var(--admin-border)"
|
|
}}>
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<h2 className="text-lg font-semibold" style={{ color: "var(--admin-text-primary)" }}>
|
|
{currentUser.display_name || currentUser.email}
|
|
</h2>
|
|
{currentUser.display_name && (
|
|
<p className="text-sm" style={{ color: "var(--admin-text-muted)" }}>{currentUser.email}</p>
|
|
)}
|
|
<div className="mt-2 flex items-center gap-2">
|
|
<span className="rounded-full px-2.5 py-0.5 text-xs font-semibold capitalize" style={{
|
|
backgroundColor: "var(--admin-bg-subtle)",
|
|
color: "var(--admin-text-muted)"
|
|
}}>
|
|
{currentUser.role.replace("_", " ")}
|
|
</span>
|
|
{currentUser.brand_name && (
|
|
<span className="text-xs" style={{ color: "var(--admin-text-muted)" }}>{currentUser.brand_name}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{!editing && (
|
|
<button
|
|
onClick={() => setEditing(true)}
|
|
className="rounded-lg border px-4 py-2 text-sm font-medium transition-colors"
|
|
style={{
|
|
borderColor: "var(--admin-border)",
|
|
color: "var(--admin-text-muted)"
|
|
}}
|
|
>
|
|
Edit Profile
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Read-only info when not editing */}
|
|
{!editing && (
|
|
<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" style={{ color: "var(--admin-text-muted)" }}>Phone</p>
|
|
<p className="mt-1 text-sm" style={{ color: "var(--admin-text-primary)" }}>{currentUser.phone_number ?? "—"}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs font-medium uppercase tracking-wide" style={{ color: "var(--admin-text-muted)" }}>Email</p>
|
|
<p className="mt-1 text-sm" style={{ color: "var(--admin-text-primary)" }}>{currentUser.email}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Edit form */}
|
|
{editing && (
|
|
<form onSubmit={handleSaveProfile} className="mt-6 space-y-4">
|
|
<div>
|
|
<label htmlFor="me-display-name" className="block text-sm font-medium" style={{ color: "var(--admin-text-primary)" }}>Display Name</label>
|
|
<input
|
|
id="me-display-name"
|
|
type="text"
|
|
value={displayName}
|
|
onChange={(e) => setDisplayName(e.target.value)}
|
|
className="mt-1 w-full rounded-lg border px-3 py-2 text-sm focus:outline-none focus:ring-1"
|
|
style={{
|
|
borderColor: "var(--admin-border)",
|
|
color: "var(--admin-text-primary)",
|
|
backgroundColor: "white"
|
|
}}
|
|
placeholder="Your name"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="me-phone" className="block text-sm font-medium" style={{ color: "var(--admin-text-primary)" }}>Phone Number</label>
|
|
<input
|
|
id="me-phone"
|
|
type="tel"
|
|
value={phoneNumber}
|
|
onChange={(e) => setPhoneNumber(e.target.value)}
|
|
className="mt-1 w-full rounded-lg border px-3 py-2 text-sm focus:outline-none focus:ring-1"
|
|
style={{
|
|
borderColor: "var(--admin-border)",
|
|
color: "var(--admin-text-primary)",
|
|
backgroundColor: "white"
|
|
}}
|
|
placeholder="+1 (555) 000-0000"
|
|
autoComplete="tel"
|
|
/>
|
|
</div>
|
|
<div className="flex justify-end gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => { setEditing(false); setError(null); }}
|
|
className="rounded-lg border px-4 py-2 text-sm font-medium transition-colors"
|
|
style={{
|
|
borderColor: "var(--admin-border)",
|
|
color: "var(--admin-text-muted)"
|
|
}}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={saving}
|
|
className="rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors disabled:opacity-50"
|
|
style={{ backgroundColor: "var(--admin-accent)" }}
|
|
>
|
|
{saving ? "Saving…" : "Save Changes"}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
)}
|
|
</div>
|
|
|
|
{/* Email change section */}
|
|
<div className="mt-6 rounded-2xl p-6 shadow-lg border" style={{
|
|
backgroundColor: "white",
|
|
boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
|
|
borderColor: "var(--admin-border)"
|
|
}}>
|
|
<h3 className="text-base font-semibold" style={{ color: "var(--admin-text-primary)" }}>Email Address</h3>
|
|
<p className="mt-1 text-sm" style={{ color: "var(--admin-text-muted)" }}>
|
|
Current: <span className="font-medium" style={{ color: "var(--admin-text-primary)" }}>{currentUser.email}</span>
|
|
</p>
|
|
|
|
{emailChangeSent ? (
|
|
<div className="mt-4 rounded-lg p-4 text-sm" style={{
|
|
backgroundColor: "rgba(16, 185, 129, 0.1)",
|
|
color: "var(--admin-accent)"
|
|
}}>
|
|
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 htmlFor="me-new-email" className="block text-sm font-medium" style={{ color: "var(--admin-text-primary)" }}>New Email Address</label>
|
|
<input
|
|
id="me-new-email"
|
|
type="email"
|
|
value={newEmail}
|
|
onChange={(e) => setNewEmail(e.target.value)}
|
|
required
|
|
aria-required="true"
|
|
className="mt-1 w-full rounded-lg border px-3 py-2 text-sm focus:outline-none focus:ring-1"
|
|
style={{
|
|
borderColor: "var(--admin-border)",
|
|
color: "var(--admin-text-primary)",
|
|
backgroundColor: "white"
|
|
}}
|
|
placeholder="new@example.com"
|
|
autoComplete="email"
|
|
/>
|
|
</div>
|
|
{emailError && (
|
|
<div className="rounded-lg p-3 text-sm" style={{
|
|
backgroundColor: "rgba(239, 68, 68, 0.1)",
|
|
color: "rgb(239, 68, 68)"
|
|
}}>{emailError}</div>
|
|
)}
|
|
<button
|
|
type="submit"
|
|
disabled={changingEmail || !newEmail || !newEmail.includes("@")}
|
|
className="rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors disabled:opacity-50"
|
|
style={{ backgroundColor: "var(--admin-accent)" }}
|
|
>
|
|
{changingEmail ? "Sending…" : "Change Email"}
|
|
</button>
|
|
</form>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|