@digilogiclabs/create-saas-app 2.0.0 → 2.2.0

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

@@ -0,0 +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>
+  )
+}

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

@@ -0,0 +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>
+  )
+}

package/src/templates/web/marketplace/template/src/app/globals.css

@@ -0,0 +1,20 @@
+@import "tailwindcss";
+
+@theme {
+  --color-primary: oklch(24% 0.15 256);
+  --color-background: oklch(100% 0 0);
+  --color-foreground: oklch(10% 0 0);
+  --font-sans: 'Inter', system-ui, sans-serif;
+  --radius: 0.5rem;
+}
+
+.dark {
+  --color-background: oklch(15% 0.02 256);
+  --color-foreground: oklch(95% 0 0);
+}
+
+body {
+  font-family: var(--font-sans);
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+}

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

@@ -0,0 +1,27 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+import { AppProviders } from '@/components/providers/app-providers'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: '{{titleCaseName}} - Digital Marketplace',
+  description: '{{description}}',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>
+        <AppProviders>
+          {children}
+        </AppProviders>
+      </body>
+    </html>
+  )
+}

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

@@ -0,0 +1,167 @@
+'use client'
+
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { useAuth } from '@digilogiclabs/app-sdk'
+import { ShoppingCart, Store, Search, Star, ArrowRight, User, LogOut } from 'lucide-react'
+import Link from 'next/link'
+import { useState } from 'react'
+
+const FEATURED_PRODUCTS = [
+  { id: 1, name: 'Premium Widget', price: 49.99, vendor: 'TechCo', rating: 4.8, image: '/placeholder.jpg' },
+  { id: 2, name: 'Pro Toolkit', price: 129.99, vendor: 'DevTools', rating: 4.9, image: '/placeholder.jpg' },
+  { id: 3, name: 'Designer Pack', price: 79.99, vendor: 'CreativeStudio', rating: 4.7, image: '/placeholder.jpg' },
+  { id: 4, name: 'Analytics Suite', price: 199.99, vendor: 'DataCorp', rating: 4.6, image: '/placeholder.jpg' },
+]
+
+const CATEGORIES = [
+  { name: 'Software', count: 234, icon: '💻' },
+  { name: 'Templates', count: 156, icon: '📄' },
+  { name: 'Services', count: 89, icon: '🔧' },
+  { name: 'Courses', count: 67, icon: '📚' },
+]
+
+export default function Home() {
+  const { user, signOut, loading } = useAuth()
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const projectName = "{{titleCaseName}}"
+
+  const handleSignOut = async () => {
+    try {
+      await signOut()
+    } catch (err) {
+      console.error('Sign out error:', err)
+    }
+  }
+
+  return (
+    <main className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      {/* Header */}
+      <header className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-50">
+        <div className="max-w-7xl mx-auto px-4 py-4">
+          <div className="flex items-center justify-between">
+            <Link href="/" className="text-2xl font-bold text-gray-900 dark:text-white">
+              {projectName}
+            </Link>
+
+            {/* Search */}
+            <div className="flex-1 max-w-xl mx-8">
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                <input
+                  type="text"
+                  placeholder="Search products..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
+                />
+              </div>
+            </div>
+
+            {/* Actions */}
+            <div className="flex items-center gap-4">
+              <Link href="/cart">
+                <Button variant="outline" size="sm">
+                  <ShoppingCart className="w-4 h-4 mr-2" />
+                  Cart
+                </Button>
+              </Link>
+              {loading ? (
+                <div className="text-sm text-gray-600">Loading...</div>
+              ) : user ? (
+                <div className="flex items-center gap-2">
+                  <Link href="/dashboard">
+                    <Button variant="outline" size="sm">
+                      <User className="w-4 h-4 mr-2" />
+                      Dashboard
+                    </Button>
+                  </Link>
+                  <Button variant="ghost" size="sm" onClick={handleSignOut}>
+                    <LogOut className="w-4 h-4" />
+                  </Button>
+                </div>
+              ) : (
+                <div className="flex gap-2">
+                  <Link href="/login">
+                    <Button variant="outline" size="sm">Sign In</Button>
+                  </Link>
+                  <Link href="/signup">
+                    <Button size="sm">Get Started</Button>
+                  </Link>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        {/* Hero */}
+        <div className="text-center mb-12">
+          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
+            Your Digital Marketplace
+          </h1>
+          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
+            Discover amazing products from verified vendors. Buy and sell with confidence.
+          </p>
+        </div>
+
+        {/* Categories */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
+          {CATEGORIES.map((category) => (
+            <Card key={category.name} className="p-6 text-center hover:shadow-lg transition-shadow cursor-pointer">
+              <div className="text-4xl mb-3">{category.icon}</div>
+              <h3 className="font-semibold text-gray-900 dark:text-white">{category.name}</h3>
+              <p className="text-sm text-gray-500">{category.count} items</p>
+            </Card>
+          ))}
+        </div>
+
+        {/* Featured Products */}
+        <div className="mb-12">
+          <div className="flex items-center justify-between mb-6">
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Featured Products</h2>
+            <Link href="/products">
+              <Button variant="ghost">
+                View All
+                <ArrowRight className="w-4 h-4 ml-2" />
+              </Button>
+            </Link>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            {FEATURED_PRODUCTS.map((product) => (
+              <Card key={product.id} className="overflow-hidden hover:shadow-lg transition-shadow">
+                <div className="aspect-square bg-gray-100 dark:bg-gray-700" />
+                <div className="p-4">
+                  <h3 className="font-semibold text-gray-900 dark:text-white mb-1">{product.name}</h3>
+                  <p className="text-sm text-gray-500 mb-2">by {product.vendor}</p>
+                  <div className="flex items-center justify-between">
+                    <span className="text-lg font-bold text-blue-600">${product.price}</span>
+                    <div className="flex items-center text-yellow-500">
+                      <Star className="w-4 h-4 fill-current" />
+                      <span className="text-sm ml-1">{product.rating}</span>
+                    </div>
+                  </div>
+                  <Button className="w-full mt-3" size="sm">Add to Cart</Button>
+                </div>
+              </Card>
+            ))}
+          </div>
+        </div>
+
+        {/* Become a Vendor CTA */}
+        <Card className="p-8 bg-gradient-to-r from-blue-600 to-purple-600 text-white text-center">
+          <Store className="w-12 h-12 mx-auto mb-4" />
+          <h2 className="text-2xl font-bold mb-2">Become a Vendor</h2>
+          <p className="mb-6 opacity-90 max-w-md mx-auto">
+            Start selling your products to thousands of customers. Low fees, powerful tools.
+          </p>
+          <Link href="/vendors/apply">
+            <Button variant="secondary" size="lg">Apply Now</Button>
+          </Link>
+        </Card>
+      </div>
+    </main>
+  )
+}

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

@@ -0,0 +1,129 @@
+'use client'
+
+import { useState } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { Search, Filter, Star, ShoppingCart } from 'lucide-react'
+import Link from 'next/link'
+
+const PRODUCTS = [
+  { id: 1, name: 'Premium Widget Pro', price: 49.99, vendor: 'TechCo', rating: 4.8, category: 'Software', sales: 234 },
+  { id: 2, name: 'Developer Toolkit', price: 129.99, vendor: 'DevTools', rating: 4.9, category: 'Software', sales: 156 },
+  { id: 3, name: 'UI Design Pack', price: 79.99, vendor: 'CreativeStudio', rating: 4.7, category: 'Templates', sales: 89 },
+  { id: 4, name: 'Analytics Dashboard', price: 199.99, vendor: 'DataCorp', rating: 4.6, category: 'Software', sales: 67 },
+  { id: 5, name: 'Marketing Templates', price: 39.99, vendor: 'GrowthLab', rating: 4.5, category: 'Templates', sales: 312 },
+  { id: 6, name: 'API Integration Kit', price: 149.99, vendor: 'APIExperts', rating: 4.8, category: 'Software', sales: 178 },
+  { id: 7, name: 'SEO Course Bundle', price: 99.99, vendor: 'SEOMasters', rating: 4.9, category: 'Courses', sales: 245 },
+  { id: 8, name: 'Cloud Consulting', price: 299.99, vendor: 'CloudPros', rating: 4.7, category: 'Services', sales: 45 },
+]
+
+const CATEGORIES = ['All', 'Software', 'Templates', 'Courses', 'Services']
+
+export default function ProductsPage() {
+  const [searchQuery, setSearchQuery] = useState('')
+  const [selectedCategory, setSelectedCategory] = useState('All')
+  const [sortBy, setSortBy] = useState('popular')
+
+  const filteredProducts = PRODUCTS
+    .filter(p => selectedCategory === 'All' || p.category === selectedCategory)
+    .filter(p => p.name.toLowerCase().includes(searchQuery.toLowerCase()))
+    .sort((a, b) => {
+      if (sortBy === 'popular') return b.sales - a.sales
+      if (sortBy === 'price-low') return a.price - b.price
+      if (sortBy === 'price-high') return b.price - a.price
+      if (sortBy === 'rating') return b.rating - a.rating
+      return 0
+    })
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      {/* Header */}
+      <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+        <div className="max-w-7xl mx-auto px-4 py-6">
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Products</h1>
+
+          {/* Search and Filters */}
+          <div className="flex flex-col md:flex-row gap-4">
+            <div className="flex-1 relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+              <input
+                type="text"
+                placeholder="Search products..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
+              />
+            </div>
+
+            <div className="flex gap-2">
+              <select
+                value={sortBy}
+                onChange={(e) => setSortBy(e.target.value)}
+                className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
+              >
+                <option value="popular">Most Popular</option>
+                <option value="rating">Highest Rated</option>
+                <option value="price-low">Price: Low to High</option>
+                <option value="price-high">Price: High to Low</option>
+              </select>
+            </div>
+          </div>
+
+          {/* Categories */}
+          <div className="flex gap-2 mt-4 overflow-x-auto pb-2">
+            {CATEGORIES.map((category) => (
+              <Button
+                key={category}
+                variant={selectedCategory === category ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setSelectedCategory(category)}
+              >
+                {category}
+              </Button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Products Grid */}
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        <div className="flex items-center justify-between mb-6">
+          <p className="text-gray-600 dark:text-gray-300">
+            {filteredProducts.length} products found
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          {filteredProducts.map((product) => (
+            <Card key={product.id} className="overflow-hidden hover:shadow-lg transition-shadow">
+              <div className="aspect-square bg-gray-100 dark:bg-gray-700 relative">
+                <span className="absolute top-2 left-2 bg-blue-600 text-white text-xs px-2 py-1 rounded">
+                  {product.category}
+                </span>
+              </div>
+              <div className="p-4">
+                <h3 className="font-semibold text-gray-900 dark:text-white mb-1">{product.name}</h3>
+                <p className="text-sm text-gray-500 mb-2">by {product.vendor}</p>
+                <div className="flex items-center justify-between mb-3">
+                  <span className="text-lg font-bold text-blue-600">${product.price}</span>
+                  <div className="flex items-center text-yellow-500">
+                    <Star className="w-4 h-4 fill-current" />
+                    <span className="text-sm ml-1">{product.rating}</span>
+                  </div>
+                </div>
+                <div className="flex gap-2">
+                  <Button className="flex-1" size="sm">
+                    <ShoppingCart className="w-4 h-4 mr-1" />
+                    Add
+                  </Button>
+                  <Link href={`/products/${product.id}`} className="flex-1">
+                    <Button variant="outline" size="sm" className="w-full">View</Button>
+                  </Link>
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/templates/web/marketplace/template/src/components/providers/app-providers.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { ThemeProvider } from 'next-themes'
+import { DLLProvider } from '@digilogiclabs/app-sdk'
+
+interface AppProvidersProps {
+  children: React.ReactNode
+}
+
+export function AppProviders({ children }: AppProvidersProps) {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+      <DLLProvider
+        config={{
+          auth: {
+            provider: 'supabase',
+          },
+          payments: {
+            provider: 'stripe',
+          },
+        }}
+      >
+        {children}
+      </DLLProvider>
+    </ThemeProvider>
+  )
+}