feat: Ecommerce client management

.env.example

@@ -18,3 +18,4 @@ REDIS_URL=redis://localhost:7379
 # NEXT_PUBLIC_GTM_ID=""
 # NEXT_PUBLIC_CRYPTO_TO_FIAT_TRUSTED_ORIGINS=""
 INVOICE_PROCESSING_TTL=""
+NEXT_PUBLIC_DEFAULT_ECOMMERCE_DOMAIN=http://localhost:3001

src/app/ecommerce/layout.tsx

@@ -0,0 +1,33 @@
+import { BackgroundWrapper } from "@/components/background-wrapper";
+import { EcommerceNavigation } from "@/components/ecommerce/ecommerce-navigation";
+import { Footer } from "@/components/footer";
+import { Header } from "@/components/header";
+import { getCurrentSession } from "@/server/auth";
+import { redirect } from "next/navigation";
+
+export default async function EcommerceLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { user } = await getCurrentSession();
+  if (!user) redirect("/");
+
+  return (
+    <BackgroundWrapper
+      topGradient={{ from: "orange-100", to: "orange-200" }}
+      bottomGradient={{ from: "zinc-100", to: "zinc-200" }}
+    >
+      <Header user={user} />
+      <main className="flex-grow flex flex-col w-full max-w-sm sm:max-w-2xl md:max-w-4xl lg:max-w-6xl xl:max-w-[72rem] mx-auto px-4 sm:px-6 lg:px-8 py-8 z-10">
+        <h1 className="mb-2 text-4xl font-bold tracking-tight">Ecommerce</h1>
+        <p className="mb-8 text-lg text-muted-foreground">
+          Create and manage your ecommerce clients and view sales
+        </p>
+        <EcommerceNavigation />
+        {children}
+      </main>
+      <Footer />
+    </BackgroundWrapper>
+  );
+}

src/app/ecommerce/manage/page.tsx

@@ -0,0 +1,16 @@
+import { EcommerceManage } from "@/components/ecommerce/manage";
+import { getCurrentSession } from "@/server/auth";
+import { api } from "@/trpc/server";
+import { redirect } from "next/navigation";
+
+export default async function ManagePage() {
+  const { user } = await getCurrentSession();
+
+  if (!user) {
+    redirect("/");
+  }
+
+  const ecommerceClients = await api.ecommerce.getAll.query();
+
+  return <EcommerceManage initialEcommerceClients={ecommerceClients} />;
+}

src/app/ecommerce/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function EcommercePage() {
+  redirect("/ecommerce/manage");
+}

src/app/ecommerce/sales/page.tsx

@@ -0,0 +1,15 @@
+import { getCurrentSession } from "@/server/auth";
+//import { api } from "@/trpc/server";
+import { redirect } from "next/navigation";
+
+export default async function SalesPage() {
+  const { user } = await getCurrentSession();
+
+  if (!user) {
+    redirect("/");
+  }
+
+  // TODO fetch sales data
+
+  return <div>Sales Page - to be implemented</div>;
+}

src/components/ecommerce/ecommerce-navigation.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+
+export function EcommerceNavigation() {
+  const pathname = usePathname();
+  const [activeTab, setActiveTab] = useState("manage");
+
+  useEffect(() => {
+    if (pathname.includes("/sales")) {
+      setActiveTab("sales");
+    } else {
+      setActiveTab("manage");
+    }
+  }, [pathname]);
+
+  return (
+    <Tabs value={activeTab} className="w-full mb-8">
+      <TabsList className="grid w-full grid-cols-3">
+        <TabsTrigger value="manage" asChild>
+          <Link href="/ecommerce/manage">Manage</Link>
+        </TabsTrigger>
+        <TabsTrigger value="sales" asChild>
+          <Link href="/ecommerce/sales">Sales</Link>
+        </TabsTrigger>
+      </TabsList>
+    </Tabs>
+  );
+}

src/components/ecommerce/manage/blocks/client-form.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Loader2 } from "lucide-react";
+import { useForm } from "react-hook-form";
+import {
+  type EcommerceClientFormValues,
+  ecommerceClientFormSchema,
+} from "./types";
+
+interface EcommerceClientFormProps {
+  onSubmit: (data: EcommerceClientFormValues) => void;
+  isLoading?: boolean;
+  defaultValues?: Partial<EcommerceClientFormValues>;
+  submitButtonText?: string;
+  onCancel?: () => void;
+}
+
+export function EcommerceClientForm({
+  onSubmit,
+  isLoading = false,
+  defaultValues,
+  submitButtonText = "Create Client ID",
+  onCancel,
+}: EcommerceClientFormProps) {
+  const form = useForm<EcommerceClientFormValues>({
+    resolver: zodResolver(ecommerceClientFormSchema),
+    defaultValues: {
+      label: "",
+      domain: "",
+      feeAddress: undefined,
+      feePercentage: undefined,
+      ...defaultValues,
+    },
+  });
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormField
+          control={form.control}
+          name="label"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Label</FormLabel>
+              <FormControl>
+                <Input
+                  placeholder="My Ecommerce Store"
+                  disabled={isLoading}
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="domain"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Domain</FormLabel>
+              <FormControl>
+                <Input
+                  placeholder="https://mystore.com"
+                  disabled={isLoading}
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="feeAddress"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Fee Address (Optional)</FormLabel>
+              <FormControl>
+                <Input
+                  placeholder="0x..."
+                  className="font-mono"
+                  disabled={isLoading}
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="feePercentage"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Fee Percentage (Optional)</FormLabel>
+              <FormControl>
+                <Input
+                  type="number"
+                  placeholder="5"
+                  min="0"
+                  max="100"
+                  step="0.1"
+                  disabled={isLoading}
+                  value={field.value || ""}
+                  onChange={(e) =>
+                    field.onChange(
+                      e.target.value ? Number(e.target.value) : undefined,
+                    )
+                  }
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <div className="flex justify-end gap-2 pt-4">
+          {onCancel && (
+            <Button
+              type="button"
+              variant="outline"
+              onClick={onCancel}
+              disabled={isLoading}
+            >
+              Cancel
+            </Button>
+          )}
+          <Button type="submit" disabled={isLoading}>
+            {isLoading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                {submitButtonText.includes("Create")
+                  ? "Creating..."
+                  : "Updating..."}
+              </>
+            ) : (
+              submitButtonText
+            )}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+}