@digilogiclabs/create-saas-app 2.9.0 → 2.10.0

package/src/templates/web/marketplace/template/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
+
+export default config;

package/src/templates/web/marketplace/template/src/app/cart/page.tsx

@@ -1,147 +1,147 @@
-'use client'
-
-import { useState } from 'react'
-import { Button, Card } from '@digilogiclabs/saas-factory-ui'
-import { Trash2, Plus, Minus, ShoppingBag, ArrowRight } from 'lucide-react'
-import Link from 'next/link'
-
-interface CartItem {
-  id: number
-  name: string
-  price: number
-  vendor: string
-  quantity: number
-}
-
-const INITIAL_CART: CartItem[] = [
-  { id: 1, name: 'Premium Widget Pro', price: 49.99, vendor: 'TechCo', quantity: 1 },
-  { id: 2, name: 'Developer Toolkit', price: 129.99, vendor: 'DevTools', quantity: 1 },
-]
-
-export default function CartPage() {
-  const [cartItems, setCartItems] = useState<CartItem[]>(INITIAL_CART)
-
-  const updateQuantity = (id: number, delta: number) => {
-    setCartItems(items =>
-      items.map(item =>
-        item.id === id
-          ? { ...item, quantity: Math.max(1, item.quantity + delta) }
-          : item
-      )
-    )
-  }
-
-  const removeItem = (id: number) => {
-    setCartItems(items => items.filter(item => item.id !== id))
-  }
-
-  const subtotal = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0)
-  const platformFee = subtotal * 0.05
-  const total = subtotal + platformFee
-
-  return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
-      <div className="max-w-4xl mx-auto px-4 py-8">
-        <div className="flex items-center justify-between mb-8">
-          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Shopping Cart</h1>
-          <Link href="/products">
-            <Button variant="outline" size="sm">Continue Shopping</Button>
-          </Link>
-        </div>
-
-        {cartItems.length === 0 ? (
-          <Card className="p-12 text-center">
-            <ShoppingBag className="w-16 h-16 mx-auto mb-4 text-gray-400" />
-            <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-              Your cart is empty
-            </h2>
-            <p className="text-gray-600 dark:text-gray-300 mb-6">
-              Browse our products and add items to your cart.
-            </p>
-            <Link href="/products">
-              <Button>Browse Products</Button>
-            </Link>
-          </Card>
-        ) : (
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-            {/* Cart Items */}
-            <div className="lg:col-span-2 space-y-4">
-              {cartItems.map((item) => (
-                <Card key={item.id} className="p-4">
-                  <div className="flex items-center gap-4">
-                    <div className="w-20 h-20 bg-gray-100 dark:bg-gray-700 rounded-lg flex-shrink-0" />
-                    <div className="flex-1">
-                      <h3 className="font-semibold text-gray-900 dark:text-white">{item.name}</h3>
-                      <p className="text-sm text-gray-500">by {item.vendor}</p>
-                      <p className="text-lg font-bold text-blue-600 mt-1">${item.price}</p>
-                    </div>
-                    <div className="flex items-center gap-2">
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => updateQuantity(item.id, -1)}
-                      >
-                        <Minus className="w-4 h-4" />
-                      </Button>
-                      <span className="w-8 text-center">{item.quantity}</span>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => updateQuantity(item.id, 1)}
-                      >
-                        <Plus className="w-4 h-4" />
-                      </Button>
-                    </div>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => removeItem(item.id)}
-                      className="text-red-600 hover:text-red-700"
-                    >
-                      <Trash2 className="w-4 h-4" />
-                    </Button>
-                  </div>
-                </Card>
-              ))}
-            </div>
-
-            {/* Order Summary */}
-            <div className="lg:col-span-1">
-              <Card className="p-6 sticky top-24">
-                <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
-                  Order Summary
-                </h2>
-
-                <div className="space-y-3 mb-6">
-                  <div className="flex justify-between text-gray-600 dark:text-gray-300">
-                    <span>Subtotal</span>
-                    <span>${subtotal.toFixed(2)}</span>
-                  </div>
-                  <div className="flex justify-between text-gray-600 dark:text-gray-300">
-                    <span>Platform Fee (5%)</span>
-                    <span>${platformFee.toFixed(2)}</span>
-                  </div>
-                  <div className="border-t border-gray-200 dark:border-gray-700 pt-3">
-                    <div className="flex justify-between font-bold text-gray-900 dark:text-white">
-                      <span>Total</span>
-                      <span>${total.toFixed(2)}</span>
-                    </div>
-                  </div>
-                </div>
-
-                <Button className="w-full" size="lg">
-                  Checkout
-                  <ArrowRight className="w-4 h-4 ml-2" />
-                </Button>
-
-                <p className="text-xs text-gray-500 text-center mt-4">
-                  Secure checkout powered by Stripe
-                </p>
-              </Card>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
+'use client'
+
+import { useState } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { Trash2, Plus, Minus, ShoppingBag, ArrowRight } from 'lucide-react'
+import Link from 'next/link'
+
+interface CartItem {
+  id: number
+  name: string
+  price: number
+  vendor: string
+  quantity: number
+}
+
+const INITIAL_CART: CartItem[] = [
+  { id: 1, name: 'Premium Widget Pro', price: 49.99, vendor: 'TechCo', quantity: 1 },
+  { id: 2, name: 'Developer Toolkit', price: 129.99, vendor: 'DevTools', quantity: 1 },
+]
+
+export default function CartPage() {
+  const [cartItems, setCartItems] = useState<CartItem[]>(INITIAL_CART)
+
+  const updateQuantity = (id: number, delta: number) => {
+    setCartItems(items =>
+      items.map(item =>
+        item.id === id
+          ? { ...item, quantity: Math.max(1, item.quantity + delta) }
+          : item
+      )
+    )
+  }
+
+  const removeItem = (id: number) => {
+    setCartItems(items => items.filter(item => item.id !== id))
+  }
+
+  const subtotal = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0)
+  const platformFee = subtotal * 0.05
+  const total = subtotal + platformFee
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="max-w-4xl mx-auto px-4 py-8">
+        <div className="flex items-center justify-between mb-8">
+          <h1 className="text-3xl font-bold text-foreground">Shopping Cart</h1>
+          <Link href="/products">
+            <Button variant="outline" size="sm">Continue Shopping</Button>
+          </Link>
+        </div>
+
+        {cartItems.length === 0 ? (
+          <Card className="p-12 text-center">
+            <ShoppingBag className="w-16 h-16 mx-auto mb-4 text-muted-foreground" />
+            <h2 className="text-xl font-semibold text-foreground mb-2">
+              Your cart is empty
+            </h2>
+            <p className="text-muted-foreground mb-6">
+              Browse our products and add items to your cart.
+            </p>
+            <Link href="/products">
+              <Button>Browse Products</Button>
+            </Link>
+          </Card>
+        ) : (
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            {/* Cart Items */}
+            <div className="lg:col-span-2 space-y-4">
+              {cartItems.map((item) => (
+                <Card key={item.id} className="p-4">
+                  <div className="flex items-center gap-4">
+                    <div className="w-20 h-20 bg-muted rounded-lg flex-shrink-0" />
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-foreground">{item.name}</h3>
+                      <p className="text-sm text-muted-foreground">by {item.vendor}</p>
+                      <p className="text-lg font-bold text-primary mt-1">${item.price}</p>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => updateQuantity(item.id, -1)}
+                      >
+                        <Minus className="w-4 h-4" />
+                      </Button>
+                      <span className="w-8 text-center">{item.quantity}</span>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => updateQuantity(item.id, 1)}
+                      >
+                        <Plus className="w-4 h-4" />
+                      </Button>
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => removeItem(item.id)}
+                      className="text-destructive hover:text-destructive/80"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </Button>
+                  </div>
+                </Card>
+              ))}
+            </div>
+
+            {/* Order Summary */}
+            <div className="lg:col-span-1">
+              <Card className="p-6 sticky top-24">
+                <h2 className="text-lg font-semibold text-foreground mb-4">
+                  Order Summary
+                </h2>
+
+                <div className="space-y-3 mb-6">
+                  <div className="flex justify-between text-muted-foreground">
+                    <span>Subtotal</span>
+                    <span>${subtotal.toFixed(2)}</span>
+                  </div>
+                  <div className="flex justify-between text-muted-foreground">
+                    <span>Platform Fee (5%)</span>
+                    <span>${platformFee.toFixed(2)}</span>
+                  </div>
+                  <div className="border-t border-border pt-3">
+                    <div className="flex justify-between font-bold text-foreground">
+                      <span>Total</span>
+                      <span>${total.toFixed(2)}</span>
+                    </div>
+                  </div>
+                </div>
+
+                <Button className="w-full" size="lg">
+                  Checkout
+                  <ArrowRight className="w-4 h-4 ml-2" />
+                </Button>
+
+                <p className="text-xs text-muted-foreground text-center mt-4">
+                  Secure checkout powered by Stripe
+                </p>
+              </Card>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/templates/web/marketplace/template/src/app/dashboard/page.tsx

@@ -1,149 +1,149 @@
-import { Suspense } from 'react'
-import { Button, Card } from '@digilogiclabs/saas-factory-ui'
-import { Package, DollarSign, ShoppingBag, TrendingUp, Plus } from 'lucide-react'
-import { requireAuth } from '@/lib/auth-server'
-import Link from 'next/link'
-
-async function getSellerStats(userId: string) {
-  await new Promise(resolve => setTimeout(resolve, 100))
-  return {
-    totalProducts: 12,
-    totalSales: 45,
-    revenue: 2340.50,
-    views: 1520,
-  }
-}
-
-function StatCard({ title, value, icon: Icon, trend }: {
-  title: string
-  value: string | number
-  icon: React.ComponentType<{ className?: string }>
-  trend?: string
-}) {
-  return (
-    <Card className="p-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <p className="text-sm font-medium text-gray-600 dark:text-gray-400">{title}</p>
-          <p className="text-2xl font-bold text-gray-900 dark:text-white">{value}</p>
-          {trend && <p className="text-sm text-green-600 mt-1">{trend}</p>}
-        </div>
-        <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
-          <Icon className="h-6 w-6 text-blue-600 dark:text-blue-400" />
-        </div>
-      </div>
-    </Card>
-  )
-}
-
-async function SellerStats({ userId }: { userId: string }) {
-  const stats = await getSellerStats(userId)
-
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-      <StatCard title="Total Products" value={stats.totalProducts} icon={Package} />
-      <StatCard title="Total Sales" value={stats.totalSales} icon={ShoppingBag} trend="+12% this week" />
-      <StatCard title="Revenue" value={`$${stats.revenue.toFixed(2)}`} icon={DollarSign} trend="+8% this month" />
-      <StatCard title="Product Views" value={stats.views.toLocaleString()} icon={TrendingUp} />
-    </div>
-  )
-}
-
-function StatsSkeleton() {
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-      {[...Array(4)].map((_, i) => (
-        <Card key={i} className="p-6">
-          <div className="animate-pulse">
-            <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2 mb-2"></div>
-            <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-1/3"></div>
-          </div>
-        </Card>
-      ))}
-    </div>
-  )
-}
-
-export default async function DashboardPage() {
-  const user = await requireAuth()
-
-  return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
-      <div className="max-w-7xl mx-auto px-4 py-8">
-        {/* Header */}
-        <div className="flex items-center justify-between mb-8">
-          <div>
-            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
-              Seller Dashboard
-            </h1>
-            <p className="text-gray-600 dark:text-gray-300 mt-1">
-              Welcome back, {user.name || user.email}
-            </p>
-          </div>
-          <Link href="/products/new">
-            <Button>
-              <Plus className="w-4 h-4 mr-2" />
-              Add Product
-            </Button>
-          </Link>
-        </div>
-
-        {/* Stats */}
-        <Suspense fallback={<StatsSkeleton />}>
-          <SellerStats userId={user.id} />
-        </Suspense>
-
-        {/* Quick Actions */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
-          <Card className="p-6">
-            <div className="flex items-center mb-4">
-              <Package className="h-6 w-6 text-blue-600 mr-3" />
-              <h3 className="text-lg font-semibold">My Products</h3>
-            </div>
-            <p className="text-gray-600 dark:text-gray-300 mb-4">
-              Manage your product listings and inventory.
-            </p>
-            <Link href="/products/manage">
-              <Button className="w-full">View Products</Button>
-            </Link>
-          </Card>
-
-          <Card className="p-6">
-            <div className="flex items-center mb-4">
-              <ShoppingBag className="h-6 w-6 text-blue-600 mr-3" />
-              <h3 className="text-lg font-semibold">Orders</h3>
-            </div>
-            <p className="text-gray-600 dark:text-gray-300 mb-4">
-              View and manage customer orders.
-            </p>
-            <Link href="/orders">
-              <Button variant="outline" className="w-full">View Orders</Button>
-            </Link>
-          </Card>
-
-          <Card className="p-6">
-            <div className="flex items-center mb-4">
-              <DollarSign className="h-6 w-6 text-blue-600 mr-3" />
-              <h3 className="text-lg font-semibold">Payouts</h3>
-            </div>
-            <p className="text-gray-600 dark:text-gray-300 mb-4">
-              View earnings and payout history.
-            </p>
-            <Link href="/payouts">
-              <Button variant="outline" className="w-full">View Payouts</Button>
-            </Link>
-          </Card>
-        </div>
-
-        {/* Recent Orders */}
-        <Card className="p-6">
-          <h3 className="text-lg font-semibold mb-4">Recent Orders</h3>
-          <div className="text-center py-8 text-gray-500">
-            <ShoppingBag className="w-12 h-12 mx-auto mb-4 opacity-50" />
-            <p>No orders yet. Share your products to start selling!</p>
-          </div>
-        </Card>
-      </div>
-    </div>
-  )
-}
+import { Suspense } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { Package, DollarSign, ShoppingBag, TrendingUp, Plus } from 'lucide-react'
+import { requireAuth } from '@/lib/auth-server'
+import Link from 'next/link'
+
+async function getSellerStats(userId: string) {
+  await new Promise(resolve => setTimeout(resolve, 100))
+  return {
+    totalProducts: 12,
+    totalSales: 45,
+    revenue: 2340.50,
+    views: 1520,
+  }
+}
+
+function StatCard({ title, value, icon: Icon, trend }: {
+  title: string
+  value: string | number
+  icon: React.ComponentType<{ className?: string }>
+  trend?: string
+}) {
+  return (
+    <Card className="p-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-sm font-medium text-muted-foreground">{title}</p>
+          <p className="text-2xl font-bold text-foreground">{value}</p>
+          {trend && <p className="text-sm text-green-600 mt-1">{trend}</p>}
+        </div>
+        <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
+          <Icon className="h-6 w-6 text-primary" />
+        </div>
+      </div>
+    </Card>
+  )
+}
+
+async function SellerStats({ userId }: { userId: string }) {
+  const stats = await getSellerStats(userId)
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+      <StatCard title="Total Products" value={stats.totalProducts} icon={Package} />
+      <StatCard title="Total Sales" value={stats.totalSales} icon={ShoppingBag} trend="+12% this week" />
+      <StatCard title="Revenue" value={`$${stats.revenue.toFixed(2)}`} icon={DollarSign} trend="+8% this month" />
+      <StatCard title="Product Views" value={stats.views.toLocaleString()} icon={TrendingUp} />
+    </div>
+  )
+}
+
+function StatsSkeleton() {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+      {[...Array(4)].map((_, i) => (
+        <Card key={i} className="p-6">
+          <div className="animate-pulse">
+            <div className="h-4 bg-muted rounded w-1/2 mb-2"></div>
+            <div className="h-8 bg-muted rounded w-1/3"></div>
+          </div>
+        </Card>
+      ))}
+    </div>
+  )
+}
+
+export default async function DashboardPage() {
+  const user = await requireAuth()
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h1 className="text-3xl font-bold text-foreground">
+              Seller Dashboard
+            </h1>
+            <p className="text-muted-foreground mt-1">
+              Welcome back, {user.name || user.email}
+            </p>
+          </div>
+          <Link href="/products/new">
+            <Button>
+              <Plus className="w-4 h-4 mr-2" />
+              Add Product
+            </Button>
+          </Link>
+        </div>
+
+        {/* Stats */}
+        <Suspense fallback={<StatsSkeleton />}>
+          <SellerStats userId={user.id} />
+        </Suspense>
+
+        {/* Quick Actions */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+          <Card className="p-6">
+            <div className="flex items-center mb-4">
+              <Package className="h-6 w-6 text-primary mr-3" />
+              <h3 className="text-lg font-semibold">My Products</h3>
+            </div>
+            <p className="text-muted-foreground mb-4">
+              Manage your product listings and inventory.
+            </p>
+            <Link href="/products/manage">
+              <Button className="w-full">View Products</Button>
+            </Link>
+          </Card>
+
+          <Card className="p-6">
+            <div className="flex items-center mb-4">
+              <ShoppingBag className="h-6 w-6 text-primary mr-3" />
+              <h3 className="text-lg font-semibold">Orders</h3>
+            </div>
+            <p className="text-muted-foreground mb-4">
+              View and manage customer orders.
+            </p>
+            <Link href="/orders">
+              <Button variant="outline" className="w-full">View Orders</Button>
+            </Link>
+          </Card>
+
+          <Card className="p-6">
+            <div className="flex items-center mb-4">
+              <DollarSign className="h-6 w-6 text-primary mr-3" />
+              <h3 className="text-lg font-semibold">Payouts</h3>
+            </div>
+            <p className="text-muted-foreground mb-4">
+              View earnings and payout history.
+            </p>
+            <Link href="/payouts">
+              <Button variant="outline" className="w-full">View Payouts</Button>
+            </Link>
+          </Card>
+        </div>
+
+        {/* Recent Orders */}
+        <Card className="p-6">
+          <h3 className="text-lg font-semibold mb-4">Recent Orders</h3>
+          <div className="text-center py-8 text-muted-foreground">
+            <ShoppingBag className="w-12 h-12 mx-auto mb-4 opacity-50" />
+            <p>No orders yet. Share your products to start selling!</p>
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}

package/src/templates/web/marketplace/template/src/app/error.tsx

@@ -16,27 +16,27 @@ export default function Error({ error, reset }: ErrorProps) {
   }, [error])
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-red-50 to-orange-100 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center p-4">
+    <div className="min-h-screen bg-background flex items-center justify-center p-4">
       <Card className="p-8 max-w-lg w-full">
         <div className="flex flex-col items-center space-y-6 text-center">
-          <div className="w-16 h-16 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center">
-            <AlertTriangle className="w-8 h-8 text-red-600 dark:text-red-400" />
+          <div className="w-16 h-16 bg-destructive/10 rounded-full flex items-center justify-center">
+            <AlertTriangle className="w-8 h-8 text-destructive" />
           </div>
 
           <div>
-            <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+            <h1 className="text-2xl font-bold text-foreground mb-2">
               Something went wrong!
             </h1>
-            <p className="text-gray-600 dark:text-gray-300 mb-4">
+            <p className="text-muted-foreground mb-4">
               We encountered an unexpected error. This has been logged and our team will look into it.
             </p>
 
             {process.env.NODE_ENV === 'development' && (
               <details className="mt-4 text-left">
-                <summary className="cursor-pointer text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                <summary className="cursor-pointer text-sm text-muted-foreground hover:text-foreground">
                   Error details (development only)
                 </summary>
-                <div className="mt-2 p-3 bg-gray-100 dark:bg-gray-800 rounded text-xs font-mono text-gray-700 dark:text-gray-300 overflow-auto max-h-40">
+                <div className="mt-2 p-3 bg-muted rounded text-xs font-mono text-muted-foreground overflow-auto max-h-40">
                   <div className="mb-2">
                     <strong>Message:</strong> {error.message}
                   </div>