@digilogiclabs/create-saas-app 2.10.0 → 2.11.0

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

@@ -0,0 +1,160 @@
+'use client'
+
+import { useState } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { Package, ChevronDown, ChevronUp, ShoppingBag } from 'lucide-react'
+import Link from 'next/link'
+
+interface OrderItem {
+  name: string
+  vendor: string
+  price: number
+  quantity: number
+}
+
+interface Order {
+  id: string
+  date: string
+  status: 'Delivered' | 'Processing' | 'Shipped'
+  total: number
+  items: OrderItem[]
+}
+
+const ORDERS: Order[] = [
+  {
+    id: 'ORD-2024-001',
+    date: 'Mar 15, 2024',
+    status: 'Delivered',
+    total: 179.98,
+    items: [
+      { name: 'Premium Widget Pro', vendor: 'TechCo', price: 49.99, quantity: 1 },
+      { name: 'Developer Toolkit', vendor: 'DevTools', price: 129.99, quantity: 1 },
+    ],
+  },
+  {
+    id: 'ORD-2024-002',
+    date: 'Mar 18, 2024',
+    status: 'Shipped',
+    total: 79.99,
+    items: [
+      { name: 'UI Design Pack', vendor: 'CreativeStudio', price: 79.99, quantity: 1 },
+    ],
+  },
+  {
+    id: 'ORD-2024-003',
+    date: 'Mar 20, 2024',
+    status: 'Processing',
+    total: 239.97,
+    items: [
+      { name: 'Analytics Dashboard', vendor: 'DataCorp', price: 199.99, quantity: 1 },
+      { name: 'Marketing Templates', vendor: 'GrowthLab', price: 39.99, quantity: 1 },
+    ],
+  },
+]
+
+const STATUS_STYLES: Record<Order['status'], string> = {
+  Delivered: 'bg-green-500/10 text-green-600',
+  Processing: 'bg-blue-500/10 text-blue-600',
+  Shipped: 'bg-amber-500/10 text-amber-600',
+}
+
+function OrderCard({ order }: { order: Order }) {
+  const [expanded, setExpanded] = useState(false)
+
+  return (
+    <Card className="overflow-hidden">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="w-full p-6 text-left cursor-pointer"
+      >
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+          <div className="flex items-center gap-4">
+            <div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
+              <Package className="w-5 h-5 text-primary" />
+            </div>
+            <div>
+              <p className="font-semibold text-foreground">{order.id}</p>
+              <p className="text-sm text-muted-foreground">{order.date}</p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-4 sm:gap-6">
+            <span className={`px-3 py-1 text-xs font-medium rounded-full ${STATUS_STYLES[order.status]}`}>
+              {order.status}
+            </span>
+            <span className="text-sm text-muted-foreground">
+              {order.items.length} {order.items.length === 1 ? 'item' : 'items'}
+            </span>
+            <span className="font-bold text-foreground">${order.total.toFixed(2)}</span>
+            {expanded ? (
+              <ChevronUp className="w-4 h-4 text-muted-foreground" />
+            ) : (
+              <ChevronDown className="w-4 h-4 text-muted-foreground" />
+            )}
+          </div>
+        </div>
+      </button>
+
+      {expanded && (
+        <div className="border-t border-border px-6 pb-6">
+          <div className="space-y-3 pt-4">
+            {order.items.map((item, index) => (
+              <div key={index} className="flex items-center gap-4">
+                <div className="w-12 h-12 bg-muted rounded-lg flex-shrink-0" />
+                <div className="flex-1">
+                  <p className="font-medium text-foreground">{item.name}</p>
+                  <p className="text-sm text-muted-foreground">by {item.vendor}</p>
+                </div>
+                <div className="text-right">
+                  <p className="font-medium text-foreground">${item.price.toFixed(2)}</p>
+                  <p className="text-sm text-muted-foreground">Qty: {item.quantity}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </Card>
+  )
+}
+
+export default function OrdersPage() {
+  // Note: In production, wrap with requireAuth() in a server component parent
+  // or use a layout-level auth check. This page uses 'use client' for expand/collapse.
+  const orders = ORDERS
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="max-w-4xl mx-auto px-4 py-8">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-foreground">Your Orders</h1>
+          <p className="text-muted-foreground mt-1">
+            {orders.length} {orders.length === 1 ? 'order' : 'orders'}
+          </p>
+        </div>
+
+        {orders.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">
+              No orders yet
+            </h2>
+            <p className="text-muted-foreground mb-6">
+              When you make a purchase, your orders will appear here.
+            </p>
+            <Link href="/products">
+              <Button>Browse Products</Button>
+            </Link>
+          </Card>
+        ) : (
+          <div className="space-y-4">
+            {orders.map((order) => (
+              <OrderCard key={order.id} order={order} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/dist/templates/web/marketplace/template/src/app/products/[id]/page.tsx

@@ -0,0 +1,218 @@
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { ArrowLeft, Star, ShoppingCart, MessageCircle, ShoppingBag } from 'lucide-react'
+import Link from 'next/link'
+
+const PRODUCTS: Record<string, {
+  id: string
+  name: string
+  price: number
+  vendor: string
+  rating: number
+  reviews: number
+  category: string
+  description: string
+  features: string[]
+}> = {
+  '1': {
+    id: '1',
+    name: 'Premium Widget Pro',
+    price: 49.99,
+    vendor: 'TechCo',
+    rating: 4.8,
+    reviews: 124,
+    category: 'Software',
+    description: 'A comprehensive widget toolkit that helps developers build beautiful, responsive interfaces in minutes. Includes 50+ pre-built components, dark mode support, and full TypeScript definitions. Perfect for startups and teams looking to ship faster without sacrificing quality.',
+    features: ['50+ Pre-built Components', 'Dark Mode Support', 'TypeScript Definitions', 'Lifetime Updates'],
+  },
+  '2': {
+    id: '2',
+    name: 'Developer Toolkit',
+    price: 129.99,
+    vendor: 'DevTools',
+    rating: 4.9,
+    reviews: 87,
+    category: 'Software',
+    description: 'The ultimate developer toolkit packed with debugging utilities, code generators, and productivity boosters. Streamline your development workflow with intelligent code analysis, automated refactoring tools, and seamless CI/CD integration.',
+    features: ['Code Generator', 'Debugging Utilities', 'CI/CD Integration', 'Team Collaboration'],
+  },
+  '3': {
+    id: '3',
+    name: 'UI Design Pack',
+    price: 79.99,
+    vendor: 'CreativeStudio',
+    rating: 4.7,
+    reviews: 203,
+    category: 'Templates',
+    description: 'A stunning collection of UI design templates for web and mobile applications. Each template is fully customizable and built with modern design principles. Includes Figma source files, responsive layouts, and component documentation.',
+    features: ['Figma Source Files', 'Responsive Layouts', 'Component Docs', '100+ Screens'],
+  },
+  '4': {
+    id: '4',
+    name: 'Analytics Dashboard',
+    price: 199.99,
+    vendor: 'DataCorp',
+    rating: 4.6,
+    reviews: 56,
+    category: 'Software',
+    description: 'Real-time analytics dashboard with advanced data visualization capabilities. Track key metrics, create custom reports, and share insights with your team. Supports multiple data sources and provides AI-powered trend analysis.',
+    features: ['Real-time Analytics', 'Custom Reports', 'AI Trend Analysis', 'Multi-source Support'],
+  },
+  '5': {
+    id: '5',
+    name: 'Marketing Templates',
+    price: 39.99,
+    vendor: 'GrowthLab',
+    rating: 4.5,
+    reviews: 312,
+    category: 'Templates',
+    description: 'Ready-to-use marketing templates for landing pages, email campaigns, and social media. Conversion-optimized designs backed by A/B testing data from thousands of campaigns.',
+    features: ['Landing Pages', 'Email Templates', 'Social Media Kit', 'A/B Tested Designs'],
+  },
+}
+
+const RELATED_PRODUCTS = [
+  { id: '2', name: 'Developer Toolkit', price: 129.99, vendor: 'DevTools', rating: 4.9, category: 'Software' },
+  { id: '3', name: 'UI Design Pack', price: 79.99, vendor: 'CreativeStudio', rating: 4.7, category: 'Templates' },
+  { id: '5', name: 'Marketing Templates', price: 39.99, vendor: 'GrowthLab', rating: 4.5, category: 'Templates' },
+]
+
+function StarRating({ rating, reviews }: { rating: number; reviews: number }) {
+  return (
+    <div className="flex items-center gap-2">
+      <div className="flex items-center">
+        {[...Array(5)].map((_, i) => (
+          <Star
+            key={i}
+            className={`w-5 h-5 ${
+              i < Math.floor(rating)
+                ? 'text-amber-500 fill-amber-500'
+                : i < rating
+                  ? 'text-amber-500 fill-amber-500/50'
+                  : 'text-muted-foreground/30'
+            }`}
+          />
+        ))}
+      </div>
+      <span className="text-sm text-muted-foreground">
+        {rating} ({reviews} reviews)
+      </span>
+    </div>
+  )
+}
+
+export default async function ProductDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>
+}) {
+  const { id } = await params
+  const product = PRODUCTS[id] || PRODUCTS['1']
+
+  const relatedProducts = RELATED_PRODUCTS.filter(p => p.id !== product.id).slice(0, 3)
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        {/* Back Link */}
+        <Link
+          href="/products"
+          className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-6 transition-colors"
+        >
+          <ArrowLeft className="w-4 h-4 mr-1" />
+          Back to Products
+        </Link>
+
+        {/* Product Detail */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16">
+          {/* Product Image */}
+          <div className="aspect-video bg-muted rounded-xl flex items-center justify-center border border-border">
+            <div className="text-center">
+              <ShoppingBag className="w-16 h-16 mx-auto text-muted-foreground/30 mb-2" />
+              <p className="text-sm text-muted-foreground">Product Preview</p>
+            </div>
+          </div>
+
+          {/* Product Info */}
+          <div>
+            <div className="mb-4">
+              <span className="inline-block px-3 py-1 text-xs font-medium bg-primary text-primary-foreground rounded-full mb-3">
+                {product.category}
+              </span>
+              <h1 className="text-2xl font-bold text-foreground mb-2">
+                {product.name}
+              </h1>
+              <p className="text-muted-foreground">
+                by {product.vendor}
+              </p>
+            </div>
+
+            <StarRating rating={product.rating} reviews={product.reviews} />
+
+            <p className="text-3xl font-bold text-primary mt-4 mb-6">
+              ${product.price}
+            </p>
+
+            <p className="text-muted-foreground leading-relaxed mb-6">
+              {product.description}
+            </p>
+
+            {/* Features */}
+            <div className="mb-6">
+              <h3 className="text-sm font-semibold text-foreground mb-3">What&apos;s Included</h3>
+              <ul className="grid grid-cols-2 gap-2">
+                {product.features.map((feature) => (
+                  <li key={feature} className="flex items-center text-sm text-muted-foreground">
+                    <span className="w-1.5 h-1.5 bg-primary rounded-full mr-2 flex-shrink-0" />
+                    {feature}
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            {/* Actions */}
+            <div className="flex gap-3">
+              <Button size="lg" className="flex-1">
+                <ShoppingCart className="w-4 h-4 mr-2" />
+                Add to Cart
+              </Button>
+              <Button variant="outline" size="lg" className="flex-1">
+                <MessageCircle className="w-4 h-4 mr-2" />
+                Contact Vendor
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {/* Related Products */}
+        <div>
+          <h2 className="text-2xl font-bold text-foreground mb-6">Related Products</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
+            {relatedProducts.map((item) => (
+              <Card key={item.id} className="overflow-hidden hover:shadow-lg transition-shadow">
+                <div className="aspect-square bg-muted relative">
+                  <span className="absolute top-2 left-2 bg-primary text-primary-foreground text-xs px-2 py-1 rounded">
+                    {item.category}
+                  </span>
+                </div>
+                <div className="p-4">
+                  <h3 className="font-semibold text-foreground mb-1">{item.name}</h3>
+                  <p className="text-sm text-muted-foreground mb-2">by {item.vendor}</p>
+                  <div className="flex items-center justify-between mb-3">
+                    <span className="text-lg font-bold text-primary">${item.price}</span>
+                    <div className="flex items-center text-amber-500">
+                      <Star className="w-4 h-4 fill-current" />
+                      <span className="text-sm ml-1">{item.rating}</span>
+                    </div>
+                  </div>
+                  <Link href={`/products/${item.id}`}>
+                    <Button variant="outline" size="sm" className="w-full">View Details</Button>
+                  </Link>
+                </div>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,150 @@
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { User, Bell, CreditCard } from 'lucide-react'
+import { requireAuth } from '@/lib/auth-server'
+
+function ToggleSwitch({ defaultChecked = false }: { defaultChecked?: boolean }) {
+  return (
+    <label className="relative inline-flex items-center cursor-pointer">
+      <input type="checkbox" className="sr-only peer" defaultChecked={defaultChecked} />
+      <div className="w-11 h-6 bg-muted rounded-full peer peer-checked:bg-primary peer-focus:ring-2 peer-focus:ring-ring after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-background after:border after:border-border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-full" />
+    </label>
+  )
+}
+
+export default async function SettingsPage() {
+  const user = await requireAuth()
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="max-w-3xl mx-auto px-4 py-8">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-foreground">Settings</h1>
+          <p className="text-muted-foreground mt-1">
+            Manage your account preferences
+          </p>
+        </div>
+
+        <div className="space-y-6">
+          {/* Profile Section */}
+          <Card className="p-6">
+            <div className="flex items-center gap-3 mb-6">
+              <User className="w-5 h-5 text-primary" />
+              <h2 className="text-lg font-semibold text-foreground">Profile</h2>
+            </div>
+
+            <div className="space-y-4">
+              {/* Avatar */}
+              <div className="flex items-center gap-4 mb-6">
+                <div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center border border-border">
+                  <User className="w-8 h-8 text-muted-foreground" />
+                </div>
+                <Button variant="outline" size="sm">Change Avatar</Button>
+              </div>
+
+              {/* Name */}
+              <div>
+                <label htmlFor="name" className="block text-sm font-medium text-foreground mb-1.5">
+                  Display Name
+                </label>
+                <input
+                  id="name"
+                  type="text"
+                  defaultValue={user.name || ''}
+                  placeholder="Your name"
+                  className="w-full px-4 py-2 border border-input rounded-lg focus:ring-2 focus:ring-ring bg-background text-foreground"
+                />
+              </div>
+
+              {/* Email (read-only) */}
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-foreground mb-1.5">
+                  Email Address
+                </label>
+                <input
+                  id="email"
+                  type="email"
+                  value={user.email || ''}
+                  readOnly
+                  className="w-full px-4 py-2 border border-input rounded-lg bg-muted text-muted-foreground cursor-not-allowed"
+                />
+                <p className="text-xs text-muted-foreground mt-1">
+                  Email cannot be changed. Contact support if you need to update it.
+                </p>
+              </div>
+            </div>
+          </Card>
+
+          {/* Notification Preferences */}
+          <Card className="p-6">
+            <div className="flex items-center gap-3 mb-6">
+              <Bell className="w-5 h-5 text-primary" />
+              <h2 className="text-lg font-semibold text-foreground">Notifications</h2>
+            </div>
+
+            <div className="space-y-4">
+              <div className="flex items-center justify-between py-2">
+                <div>
+                  <p className="font-medium text-foreground">Order Updates</p>
+                  <p className="text-sm text-muted-foreground">
+                    Get notified when your order status changes
+                  </p>
+                </div>
+                <ToggleSwitch defaultChecked />
+              </div>
+
+              <div className="border-t border-border" />
+
+              <div className="flex items-center justify-between py-2">
+                <div>
+                  <p className="font-medium text-foreground">Marketing Emails</p>
+                  <p className="text-sm text-muted-foreground">
+                    Receive deals, promotions, and product recommendations
+                  </p>
+                </div>
+                <ToggleSwitch />
+              </div>
+
+              <div className="border-t border-border" />
+
+              <div className="flex items-center justify-between py-2">
+                <div>
+                  <p className="font-medium text-foreground">Vendor Messages</p>
+                  <p className="text-sm text-muted-foreground">
+                    Get notified when a vendor replies to your message
+                  </p>
+                </div>
+                <ToggleSwitch defaultChecked />
+              </div>
+            </div>
+          </Card>
+
+          {/* Payment Methods */}
+          <Card className="p-6">
+            <div className="flex items-center gap-3 mb-6">
+              <CreditCard className="w-5 h-5 text-primary" />
+              <h2 className="text-lg font-semibold text-foreground">Payment Methods</h2>
+            </div>
+
+            <div className="text-center py-6">
+              <CreditCard className="w-12 h-12 mx-auto mb-3 text-muted-foreground/50" />
+              <p className="text-muted-foreground mb-4">
+                No payment methods saved yet
+              </p>
+              <Button variant="outline">
+                Add Payment Method
+              </Button>
+            </div>
+          </Card>
+
+          {/* Save Button */}
+          <div className="flex justify-end">
+            <Button size="lg">
+              Save Changes
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,133 @@
+'use client'
+
+import { useState } from 'react'
+import { Button, Card, CardContent } from '@digilogiclabs/saas-factory-ui'
+import { ShoppingBag } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+
+export default function SignupPage() {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const router = useRouter()
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+    if (password !== confirmPassword) {
+      setError('Passwords do not match')
+      return
+    }
+    setLoading(true)
+    try {
+      const res = await fetch('/api/auth', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password, action: 'signup' }),
+      })
+      if (!res.ok) {
+        const data = await res.json()
+        throw new Error(data.error || 'Failed to create account')
+      }
+      router.push('/dashboard')
+      router.refresh()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create account')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background px-4">
+      <div className="w-full max-w-md">
+        {/* Logo */}
+        <Link href="/" className="flex items-center justify-center gap-2 mb-8 hover:opacity-80 transition-opacity">
+          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-from via-brand-via to-brand-to flex items-center justify-center">
+            <ShoppingBag className="w-5 h-5 text-white" />
+          </div>
+          <span className="font-bold text-xl">Marketplace</span>
+        </Link>
+
+        <Card className="border border-border">
+          <CardContent className="p-8">
+            <div className="text-center mb-8">
+              <h1 className="text-2xl font-bold">Create your account</h1>
+              <p className="text-muted-foreground mt-2">Start buying and selling today</p>
+            </div>
+
+            {error && (
+              <div className="bg-destructive/10 text-destructive p-3 rounded-lg mb-6 text-sm" role="alert">
+                {error}
+              </div>
+            )}
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium mb-1.5">
+                  Email
+                </label>
+                <input
+                  id="email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="w-full px-3 py-2.5 rounded-lg border border-input bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-shadow"
+                  placeholder="you@example.com"
+                  required
+                />
+              </div>
+
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium mb-1.5">
+                  Password
+                </label>
+                <input
+                  id="password"
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="w-full px-3 py-2.5 rounded-lg border border-input bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-shadow"
+                  placeholder="Minimum 8 characters"
+                  required
+                  minLength={8}
+                />
+              </div>
+
+              <div>
+                <label htmlFor="confirmPassword" className="block text-sm font-medium mb-1.5">
+                  Confirm Password
+                </label>
+                <input
+                  id="confirmPassword"
+                  type="password"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  className="w-full px-3 py-2.5 rounded-lg border border-input bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-shadow"
+                  placeholder="Re-enter your password"
+                  required
+                />
+              </div>
+
+              <Button type="submit" className="w-full h-11 text-base cursor-pointer hover:brightness-110 active:scale-[0.98] transition-all duration-200" disabled={loading}>
+                {loading ? 'Creating account...' : 'Create Account'}
+              </Button>
+            </form>
+
+            <div className="mt-6 text-center">
+              <p className="text-muted-foreground text-sm">
+                Already have an account?{' '}
+                <Link href="/login" className="text-primary hover:underline font-medium">
+                  Sign in
+                </Link>
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}