@digilogiclabs/create-saas-app 2.9.1 → 2.10.0

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

@@ -1,129 +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>
-  )
-}
+'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-background">
+      {/* Header */}
+      <div className="bg-card border-b border-border">
+        <div className="max-w-7xl mx-auto px-4 py-6">
+          <h1 className="text-3xl font-bold text-foreground 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-muted-foreground" />
+              <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-input rounded-lg focus:ring-2 focus:ring-ring bg-background text-foreground"
+              />
+            </div>
+
+            <div className="flex gap-2">
+              <select
+                value={sortBy}
+                onChange={(e) => setSortBy(e.target.value)}
+                className="px-4 py-2 border border-input rounded-lg focus:ring-2 focus:ring-ring bg-background text-foreground"
+              >
+                <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-muted-foreground">
+            {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-muted relative">
+                <span className="absolute top-2 left-2 bg-primary text-primary-foreground text-xs px-2 py-1 rounded">
+                  {product.category}
+                </span>
+              </div>
+              <div className="p-4">
+                <h3 className="font-semibold text-foreground mb-1">{product.name}</h3>
+                <p className="text-sm text-muted-foreground mb-2">by {product.vendor}</p>
+                <div className="flex items-center justify-between mb-3">
+                  <span className="text-lg font-bold text-primary">${product.price}</span>
+                  <div className="flex items-center text-amber-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/lib/auth-server.ts

@@ -1,33 +1,32 @@
-import { redirect } from 'next/navigation'
-import { createClient } from './supabase/server'
-
-export interface AuthUser {
-  id: string
-  email: string | null
-  name?: string | null
-}
-
-export async function getUser(): Promise<AuthUser | null> {
-  const supabase = await createClient()
-  const { data: { user }, error } = await supabase.auth.getUser()
-
-  if (error || !user) {
-    return null
-  }
-
-  return {
-    id: user.id,
-    email: user.email ?? null,
-    name: user.user_metadata?.name ?? user.user_metadata?.full_name ?? null,
-  }
-}
-
-export async function requireAuth(): Promise<AuthUser> {
-  const user = await getUser()
-
-  if (!user) {
-    redirect('/login')
-  }
-
-  return user
-}
+import { redirect } from 'next/navigation'
+import { getSession, getUser as getSessionUser } from './auth-session'
+
+export interface AuthUser {
+  id: string
+  email: string | null
+  name?: string | null
+}
+
+export async function getUser(): Promise<AuthUser | null> {
+  const user = await getSessionUser()
+
+  if (!user || !user.id) {
+    return null
+  }
+
+  return {
+    id: user.id,
+    email: user.email ?? null,
+    name: user.name ?? null,
+  }
+}
+
+export async function requireAuth(): Promise<AuthUser> {
+  const user = await getUser()
+
+  if (!user) {
+    redirect('/login')
+  }
+
+  return user
+}

package/src/templates/web/micro-saas/template/next.config.js

@@ -1,14 +1,14 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-  images: {
-    remotePatterns: [
-      {
-        protocol: 'https',
-        hostname: '**.supabase.co',
-      },
-    ],
-  },
-}
-
-module.exports = nextConfig
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**',
+      },
+    ],
+  },
+}
+
+module.exports = nextConfig

package/src/templates/web/micro-saas/template/package.json

@@ -11,22 +11,23 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "next": "^15.0.0",
+    "next": "^15.5.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/platform-core": "^1.13.0",
-    "@digilogiclabs/app-sdk": "^1.0.0",
-    "@digilogiclabs/saas-factory-ui": "^1.4.0",
-    "tailwindcss": "^4.0.0",
-    "clsx": "^2.0.0",
+    "@digilogiclabs/platform-core": "^1.14.0",
+    "@digilogiclabs/app-sdk": "^1.1.0",
+    "@digilogiclabs/saas-factory-ui": "^1.8.1",
+    "tailwindcss": "^4.1.0",
+    "@tailwindcss/postcss": "^4.1.0",
+    "clsx": "^2.1.0",
     "class-variance-authority": "^0.7.0",
-    "tailwind-merge": "^2.0.0",
+    "tailwind-merge": "^2.6.0",
     "next-themes": "^0.4.0",
     "lucide-react": "^0.460.0",
     "zod": "^4.1.0"
   },
   "devDependencies": {
-    "typescript": "^5.7.0",
+    "typescript": "^5.8.0",
     "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",

package/src/templates/web/micro-saas/template/postcss.config.mjs

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