Account Dashboard Layout

interface Customer {
  id: number;
  email: string;
  firstName: string;
  lastName: string;
  name: string;
  phone: string | null;
  ordersCount: number;
  totalSpent: string; // Pre-formatted with currency symbol
  acceptsMarketing: boolean;
  defaultAddress: Address | null;
  tags: string[];
  createdAt: string;
}

interface Address {
  id: number;
  firstName: string;
  lastName: string;
  company: string | null;
  address1: string;
  address2: string | null;
  city: string;
  province: string;
  provinceCode: string;
  country: string;
  countryCode: string;
  zip: string;
  phone: string | null;
}

interface OrderPreview {
  id: number;
  name: string; // e.g., "#1001"
  createdAt: string;
  totalPrice: string; // Pre-formatted
  financialStatus: string;
  fulfillmentStatus: string | null;
  itemCount: number;
  customerUrl: string;
}

/**
 * Complete data needed to render the dashboard.
 * Passed from Liquid via JSON script tag.
 */
interface DashboardData {
  customer: Customer;
  recentOrders: OrderPreview[];
  addressCount: number;
  logoutUrl: string;
  ordersUrl: string;
  addressesUrl: string;
}

import { DashboardHeader } from './DashboardHeader';
import { AccountNav } from './AccountNav';
import { CustomerInfoCard } from './CustomerInfoCard';
import { DashboardSummaryCard } from './DashboardSummaryCard';
import { RecentOrdersPreview } from './RecentOrdersPreview';
import styles from './AccountDashboard.module.css';

interface AccountDashboardProps {
  data: DashboardData;
}

export function AccountDashboard({ data }: AccountDashboardProps) {
  const { customer, recentOrders, addressCount, logoutUrl, ordersUrl, addressesUrl } = data;

  return (
    <div className={styles.dashboard}>
      {/* Welcome message and logout at the top for quick access */}
      <DashboardHeader
        customerName={customer.firstName}
        logoutUrl={logoutUrl}
      />

      <div className={styles.layout}>
        {/* Sidebar stays visible as user scrolls */}
        <aside className={styles.sidebar}>
          <AccountNav currentPage="overview" />
        </aside>

        {/* Main content scrolls independently */}
        <main className={styles.content}>
          <CustomerInfoCard customer={customer} />

          {/* Summary cards in a responsive grid */}
          <div className={styles.summaryGrid}>
            <DashboardSummaryCard
              title="Orders"
              icon={<OrdersIcon />}
              stats={[
                { label: 'Total orders', value: customer.ordersCount.toString() },
                { label: 'Total spent', value: customer.totalSpent },
              ]}
              linkText="View all orders"
              linkUrl={ordersUrl}
            />

            <DashboardSummaryCard
              title="Addresses"
              icon={<AddressIcon />}
              stats={[
                { label: 'Saved addresses', value: addressCount.toString() },
              ]}
              linkText="Manage addresses"
              linkUrl={addressesUrl}
            />
          </div>

          {/* Only show recent orders if the customer has any */}
          {recentOrders.length > 0 && (
            <RecentOrdersPreview
              orders={recentOrders}
              viewAllUrl={ordersUrl}
            />
          )}
        </main>
      </div>
    </div>
  );
}

.dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

.sidebar {
  position: sticky;
  top: 2rem;
  align-self: start; /* Prevents sidebar from stretching to content height */
}

.content {
  min-width: 0; /* Prevents grid blowout from long content */
}

.summaryGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* Tablet: Stack sidebar above content */
@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static; /* Nav scrolls with content on mobile */
  }
}

/* Mobile: Tighter spacing */
@media (max-width: 600px) {
  .dashboard {
    padding: 1rem;
  }

  .summaryGrid {
    grid-template-columns: 1fr;
  }
}

import styles from './DashboardHeader.module.css';

interface DashboardHeaderProps {
  customerName: string;
  logoutUrl: string;
}

export function DashboardHeader({ customerName, logoutUrl }: DashboardHeaderProps) {
  return (
    <header className={styles.header}>
      <h1 className={styles.title}>
        Welcome back, {customerName}!
      </h1>
      <a href={logoutUrl} className={styles.logoutLink}>
        Log out
      </a>
    </header>
  );
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
}

.logoutLink {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  text-decoration: none;
}

.logoutLink:hover {
  color: var(--color-text);
  text-decoration: underline;
}

@media (max-width: 600px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

import styles from './AccountNav.module.css';

interface AccountNavProps {
  currentPage: 'overview' | 'orders' | 'addresses';
}

const navItems = [
  { id: 'overview', label: 'Overview', url: '/account' },
  { id: 'orders', label: 'Orders', url: '/account/orders' },
  { id: 'addresses', label: 'Addresses', url: '/account/addresses' },
];

export function AccountNav({ currentPage }: AccountNavProps) {
  return (
    <nav className={styles.nav} aria-label="Account navigation">
      <ul className={styles.list}>
        {navItems.map((item) => (
          <li key={item.id}>
            <a
              href={item.url}
              className={`${styles.link} ${currentPage === item.id ? styles.active : ''}`}
              aria-current={currentPage === item.id ? 'page' : undefined}
            >
              {item.label}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
}

import styles from './CustomerInfoCard.module.css';

interface CustomerInfoCardProps {
  customer: Customer;
}

export function CustomerInfoCard({ customer }: CustomerInfoCardProps) {
  const joinDate = new Date(customer.createdAt).toLocaleDateString('en-US', {
    month: 'long',
    year: 'numeric',
  });

  return (
    <div className={styles.card}>
      {/* Initials avatar when no profile image exists */}
      <div className={styles.avatar}>
        {customer.firstName.charAt(0)}
        {customer.lastName.charAt(0)}
      </div>

      <div className={styles.info}>
        <h2 className={styles.name}>{customer.name}</h2>
        <p className={styles.email}>{customer.email}</p>
        <p className={styles.memberSince}>Member since {joinDate}</p>
      </div>

      {/* Show default address if one exists */}
      {customer.defaultAddress && (
        <div className={styles.address}>
          <h3 className={styles.addressTitle}>Default Address</h3>
          <address className={styles.addressText}>
            {customer.defaultAddress.address1}
            {customer.defaultAddress.address2 && <>, {customer.defaultAddress.address2}</>}
            <br />
            {customer.defaultAddress.city}, {customer.defaultAddress.provinceCode} {customer.defaultAddress.zip}
            <br />
            {customer.defaultAddress.country}
          </address>
        </div>
      )}
    </div>
  );
}

import styles from './DashboardSummaryCard.module.css';

interface Stat {
  label: string;
  value: string;
}

interface DashboardSummaryCardProps {
  title: string;
  icon: React.ReactNode;
  stats: Stat[];
  linkText: string;
  linkUrl: string;
}

export function DashboardSummaryCard({
  title,
  icon,
  stats,
  linkText,
  linkUrl,
}: DashboardSummaryCardProps) {
  return (
    <div className={styles.card}>
      <div className={styles.header}>
        <span className={styles.icon}>{icon}</span>
        <h3 className={styles.title}>{title}</h3>
      </div>

      {/* Description list is semantically appropriate for label/value pairs */}
      <dl className={styles.stats}>
        {stats.map((stat) => (
          <div key={stat.label} className={styles.stat}>
            <dt className={styles.statLabel}>{stat.label}</dt>
            <dd className={styles.statValue}>{stat.value}</dd>
          </div>
        ))}
      </dl>

      <a href={linkUrl} className={styles.link}>
        {linkText}
        <ArrowIcon />
      </a>
    </div>
  );
}

import styles from './RecentOrdersPreview.module.css';

interface RecentOrdersPreviewProps {
  orders: OrderPreview[];
  viewAllUrl: string;
}

export function RecentOrdersPreview({ orders, viewAllUrl }: RecentOrdersPreviewProps) {
  return (
    <section className={styles.section}>
      <div className={styles.header}>
        <h2 className={styles.title}>Recent Orders</h2>
        <a href={viewAllUrl} className={styles.viewAll}>
          View all orders
        </a>
      </div>

      <div className={styles.orders}>
        {orders.map((order) => (
          <OrderPreviewCard key={order.id} order={order} />
        ))}
      </div>
    </section>
  );
}

function OrderPreviewCard({ order }: { order: OrderPreview }) {
  const orderDate = new Date(order.createdAt).toLocaleDateString('en-US', {
    month: 'short',
    day: 'numeric',
  });

  return (
    <a href={order.customerUrl} className={styles.orderCard}>
      <div className={styles.orderHeader}>
        <span className={styles.orderName}>{order.name}</span>
        <span className={styles.orderDate}>{orderDate}</span>
      </div>

      <div className={styles.orderDetails}>
        <span className={styles.orderTotal}>{order.totalPrice}</span>
        <span className={styles.orderItems}>
          {order.itemCount} {order.itemCount === 1 ? 'item' : 'items'}
        </span>
      </div>

      <div className={styles.orderStatus}>
        <StatusBadge status={order.financialStatus} type="financial" />
        {order.fulfillmentStatus && (
          <StatusBadge status={order.fulfillmentStatus} type="fulfillment" />
        )}
      </div>
    </a>
  );
}

import { createRoot } from 'react-dom/client';
import { AccountDashboard } from '@/components/customer/AccountDashboard';

export function mountAccountDashboard() {
  const root = document.getElementById('account-dashboard-root');
  const dataScript = document.getElementById('dashboard-data');

  if (!root || !dataScript) return;

  try {
    const data = JSON.parse(dataScript.textContent || '{}');
    createRoot(root).render(<AccountDashboard data={data} />);
  } catch (error) {
    console.error('Failed to mount account dashboard:', error);
  }
}

// Auto-mount when DOM is ready
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', mountAccountDashboard);
} else {
  mountAccountDashboard();
}