Replace Firebase Storage with MinIO and add user account features

- Storage Integration:
  * Remove Firebase Storage dependency and useFirebaseStorage composable
  * Implement direct MinIO uploads via POST /storage/upload with multipart/form-data
  * Upload canvas JSON, preview PNG, and production PNG as separate objects
  * Store public URLs and metadata in design records

- Authentication & Registration:
  * Add email/password registration page with validation
  * Integrate backend user session via /auth/login endpoint
  * Store backendUser.id as ownerId in design records
  * Auto-sync backend session on Firebase auth state changes

- User Account Pages:
  * Create profile page showing user details and backend session info
  * Create orders page with transaction history filtered by customerEmail
  * Add server proxy /api/orders to forward GET /transactions queries

- Navigation Improvements:
  * Replace inline auth buttons with avatar dropdown menu
  * Add Profile, Orders, and Logout options to dropdown
  * Implement outside-click and route-change handlers for dropdown
  * Display user initials in avatar badge

- API Updates:
  * Update transactions endpoint to accept amount as string
  * Format amount with .toFixed(2) in checkout success flow
  * Query orders by customerEmail instead of ownerId for consistency

server/api/checkout.session.post.ts

@@ -1,39 +1,51 @@
-import Stripe from 'stripe'
+import Stripe from "stripe";
 
 export default defineEventHandler(async (event) => {
-  const config = useRuntimeConfig()
-  const stripeSecretKey = config.stripeSecretKey
+  const config = useRuntimeConfig();
+  const stripeSecretKey = config.stripeSecretKey;
 
   if (!stripeSecretKey) {
-    throw createError({ statusCode: 500, statusMessage: 'Stripe secret key not configured' })
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Stripe secret key not configured",
+    });
   }
 
   const stripe = new Stripe(stripeSecretKey, {
-    apiVersion: '2024-10-28.acacia',
-  })
+    apiVersion: "2025-10-29.clover",
+  });
 
   const body = await readBody<{
-    designId: string
-    templateId?: string
-    designName?: string
-    amount: number
-    currency?: string
-    successUrl: string
-    cancelUrl: string
-    customerEmail?: string
-  }>(event)
+    designId: string;
+    templateId?: string;
+    designName?: string;
+    amount: number;
+    currency?: string;
+    successUrl: string;
+    cancelUrl: string;
+    customerEmail?: string;
+  }>(event);
 
-  if (!body?.designId || !body?.amount || !body?.successUrl || !body?.cancelUrl) {
-    throw createError({ statusCode: 400, statusMessage: 'Missing required fields' })
+  if (
+    !body?.designId ||
+    !body?.amount ||
+    !body?.successUrl ||
+    !body?.cancelUrl
+  ) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Missing required fields",
+    });
   }
 
-  const { currency = 'usd' } = body
+  const { currency = "usd" } = body;
 
   const session = await stripe.checkout.sessions.create({
-    mode: 'payment',
-    payment_method_types: ['card'],
-    billing_address_collection: 'auto',
+    mode: "payment",
+    payment_method_types: ["card"],
+    billing_address_collection: "auto",
     customer_email: body.customerEmail,
+    shipping_address_collection: { allowed_countries: ["US", "CA"] },
     line_items: [
       {
         quantity: 1,
@@ -56,7 +68,7 @@ export default defineEventHandler(async (event) => {
     },
     success_url: body.successUrl,
     cancel_url: body.cancelUrl,
-  })
+  });
 
-  return { id: session.id, url: session.url }
-})
+  return { id: session.id, url: session.url };
+});

server/api/checkout/[sessionId].get.ts

@@ -0,0 +1,62 @@
+import Stripe from 'stripe'
+
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig()
+  const stripeSecretKey = config.stripeSecretKey
+
+  if (!stripeSecretKey) {
+    throw createError({ statusCode: 500, statusMessage: 'Stripe secret key not configured' })
+  }
+
+  const params = event.context.params as { sessionId?: string }
+  const sessionId = params?.sessionId
+
+  if (!sessionId) {
+    throw createError({ statusCode: 400, statusMessage: 'Missing session id' })
+  }
+
+  const stripe = new Stripe(stripeSecretKey, {
+    apiVersion: '2025-10-29.clover',
+  })
+
+  try {
+    const session = await stripe.checkout.sessions.retrieve(sessionId, {
+      expand: ['payment_intent', 'customer'],
+    })
+
+    const customerDetails = session.customer_details ?? null
+
+    return {
+      id: session.id,
+      paymentStatus: session.payment_status,
+      amountTotal: session.amount_total,
+      currency: session.currency,
+      customerEmail: customerDetails?.email ?? session.customer_email ?? null,
+      customerName: customerDetails?.name ?? null,
+      createdAt: session.created ? new Date(session.created * 1000).toISOString() : null,
+      metadata: session.metadata ?? {},
+      customerDetails: customerDetails
+        ? {
+            name: customerDetails.name ?? null,
+            email: customerDetails.email ?? null,
+            phone: customerDetails.phone ?? null,
+            address: customerDetails.address
+              ? {
+                  line1: customerDetails.address.line1 ?? null,
+                  line2: customerDetails.address.line2 ?? null,
+                  city: customerDetails.address.city ?? null,
+                  state: customerDetails.address.state ?? null,
+                  postalCode: customerDetails.address.postal_code ?? null,
+                  country: customerDetails.address.country ?? null,
+                }
+              : null,
+          }
+        : null,
+    }
+  } catch (error: any) {
+    throw createError({
+      statusCode: error?.statusCode ?? 500,
+      statusMessage: error?.message ?? 'Unable to retrieve checkout session',
+    })
+  }
+})

server/api/designs.post.ts

@@ -0,0 +1,60 @@
+export default defineEventHandler(async (event) => {
+  const body = await readBody<{
+    designId: string;
+    templateId: string;
+    ownerEmail?: string | null;
+    ownerId?: string | null;
+    previewUrl?: string | null;
+    productionUrl?: string | null;
+    canvasJson: unknown;
+    metadata?: Record<string, unknown>;
+  }>(event);
+
+  if (!body?.designId || !body?.templateId || body.canvasJson === undefined) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Missing required design fields",
+    });
+  }
+
+  const config = useRuntimeConfig();
+  const backendUrl = config.public?.backendUrl;
+
+  if (!backendUrl) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Backend URL not configured",
+    });
+  }
+
+  const payload = {
+    designId: body.designId,
+    templateId: body.templateId,
+    ownerEmail: body.ownerEmail ?? null,
+    ownerId: body.ownerId ?? null,
+    previewUrl: body.previewUrl ?? null,
+    productionUrl: body.productionUrl ?? null,
+    canvasJson: body.canvasJson,
+    metadata: body.metadata ?? {},
+    updatedAt: new Date().toISOString(),
+  };
+
+  try {
+    const result = await $fetch("/designs", {
+      baseURL: backendUrl,
+      method: "POST",
+      body: payload,
+    });
+
+    return {
+      ok: true,
+      result,
+    };
+  } catch (err) {
+    console.error("[designs] Failed to forward design payload", err);
+    throw createError({
+      statusCode: 502,
+      statusMessage: (err as Error)?.message ?? "Failed to persist design",
+    });
+  }
+});

server/api/designs/[designId].get.ts

@@ -0,0 +1,30 @@
+export default defineEventHandler(async (event) => {
+  const params = event.context.params as { designId?: string }
+  const designId = params?.designId
+
+  if (!designId) {
+    throw createError({ statusCode: 400, statusMessage: "Missing design id" })
+  }
+
+  const config = useRuntimeConfig()
+  const backendUrl = config.public?.backendUrl
+
+  if (!backendUrl) {
+    throw createError({ statusCode: 500, statusMessage: "Backend URL not configured" })
+  }
+
+  try {
+    const design = await $fetch(`/designs/${encodeURIComponent(designId)}`, {
+      baseURL: backendUrl,
+      method: "GET",
+    })
+
+    return design
+  } catch (err) {
+    console.error(`[designs] Failed to fetch design ${designId}`, err)
+    throw createError({
+      statusCode: 502,
+      statusMessage: (err as Error)?.message ?? "Failed to load design",
+    })
+  }
+})

server/api/orders.get.ts

@@ -0,0 +1,43 @@
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig();
+  const backendUrl = config.public?.backendUrl;
+
+  if (!backendUrl) {
+    throw createError({ statusCode: 500, statusMessage: "Backend URL not configured" });
+  }
+
+  const query = getQuery(event);
+  const customerEmail = typeof query.customerEmail === "string" ? query.customerEmail : null;
+
+  if (!customerEmail) {
+    throw createError({ statusCode: 400, statusMessage: "Missing customerEmail" });
+  }
+
+  try {
+    const result = await $fetch("/transactions", {
+      baseURL: backendUrl,
+      method: "GET",
+      query: { customerEmail },
+    });
+
+    if (Array.isArray(result)) {
+      return result;
+    }
+
+    if (result && Array.isArray((result as any).data)) {
+      return (result as any).data;
+    }
+
+    if (result && Array.isArray((result as any).orders)) {
+      return (result as any).orders;
+    }
+
+    return result;
+  } catch (err) {
+    console.error("[orders] Failed to fetch order history", err);
+    throw createError({
+      statusCode: 502,
+      statusMessage: (err as Error)?.message ?? "Failed to load order history",
+    });
+  }
+});

server/api/transactions.post.ts

@@ -1,36 +1,73 @@
 export default defineEventHandler(async (event) => {
   const body = await readBody<{
-    stripeSessionId: string
-    designId: string
-    templateId?: string
-    amount: number
-    currency: string
-    customerEmail?: string
-    assets?: {
-      previewUrl?: string
-      productionUrl?: string
-    }
-  }>(event)
+    stripeSessionId: string;
+    designId: string;
+    templateId?: string;
+    amount: number | string;
+    currency: string;
+    customerEmail?: string;
+    customerDetails?: {
+      name?: string | null;
+      email?: string | null;
+      phone?: string | null;
+      address?: {
+        line1?: string | null;
+        line2?: string | null;
+        city?: string | null;
+        state?: string | null;
+        postalCode?: string | null;
+        country?: string | null;
+      } | null;
+    };
+  }>(event);
 
   if (!body?.stripeSessionId || !body?.designId) {
-    throw createError({ statusCode: 400, statusMessage: 'Missing required fields' })
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Missing required fields",
+    });
   }
 
-  // TODO: Persist the transaction to your database of choice.
-  // Example shape:
-  // await db.transaction.create({
-  //   stripeSessionId: body.stripeSessionId,
-  //   designId: body.designId,
-  //   templateId: body.templateId,
-  //   amount: body.amount,
-  //   currency: body.currency,
-  //   customerEmail: body.customerEmail,
-  //   previewUrl: body.assets?.previewUrl,
-  //   productionUrl: body.assets?.productionUrl,
-  // })
+  const config = useRuntimeConfig();
+  const backendUrl = config.public?.backendUrl;
 
-  return {
-    ok: true,
-    receivedAt: new Date().toISOString(),
+  if (!backendUrl) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Backend URL not configured",
+    });
   }
-})
+
+  const record = {
+    stripeSessionId: body.stripeSessionId,
+    designId: body.designId,
+    templateId: body.templateId ?? null,
+    amount: body.amount.toString(),
+    currency: body.currency,
+    customerEmail: body.customerEmail ?? null,
+    customerDetails: body.customerDetails ?? null,
+  };
+
+  console.log("[transactions] Forwarding record to backend:", record);  
+
+  try {
+    const backendResult = await $fetch("/transactions", {
+      baseURL: backendUrl,
+      method: "POST",
+      body: record,
+    });
+
+    return {
+      ok: true,
+      receivedAt: new Date().toISOString(),
+      backendResult,
+    };
+  } catch (err) {
+    console.error("[transactions] Failed to forward to backend", err);
+    throw createError({
+      statusCode: 502,
+      statusMessage:
+        (err as Error)?.message ?? "Failed to save transaction to backend",
+    });
+  }
+});