npm - @digilogiclabs/create-saas-app - Versions diffs - 2.9.1 → 2.11.0 - Mend

@digilogiclabs/create-saas-app 2.9.1 → 2.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (377) hide show

package/dist/templates/web/marketplace/template/src/app/globals.css CHANGED Viewed

@@ -1,20 +1,97 @@
-@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);
-}
+@import "tailwindcss";
+@theme {
+  --font-sans: 'Inter', system-ui, sans-serif;
+  --radius: 0.5rem;
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-brand-from: hsl(var(--brand-from));
+  --color-brand-via: hsl(var(--brand-via));
+  --color-brand-to: hsl(var(--brand-to));
+}
+:root {
+  --brand-from: 221.2 83.2% 53.3%;
+  --brand-via: 232 75% 55%;
+  --brand-to: 243 75% 59%;
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+  --primary: 221.2 83.2% 53.3%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 221.2 83.2% 53.3%;
+}
+.dark {
+  --brand-from: 217.2 91.2% 59.8%;
+  --brand-via: 232 85% 65%;
+  --brand-to: 243 85% 69%;
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 217.2 91.2% 59.8%;
+  --primary-foreground: 222.2 84% 4.9%;
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 224.3 76.3% 48%;
+}
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+  }
+  body {
+    font-family: var(--font-sans);
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}

package/dist/templates/web/marketplace/template/src/app/layout.tsx CHANGED Viewed

@@ -19,6 +19,9 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <body className={inter.className}>
         <AppProviders>
+          <a href="#main-content" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[90] focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded-lg focus:outline-none">
+            Skip to content
+          </a>
           {children}
         </AppProviders>
       </body>

package/dist/templates/web/marketplace/template/src/app/loading.tsx CHANGED Viewed

@@ -2,9 +2,9 @@ import { Card, SkeletonCard, SkeletonText } from '@digilogiclabs/saas-factory-ui
 export default function Loading() {
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+    <div className="min-h-screen bg-background">
       {/* Header skeleton */}
-      <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-4 py-4">
+      <div className="bg-card border-b border-border px-4 py-4">
         <div className="max-w-7xl mx-auto flex items-center justify-between">
           <SkeletonText className="h-8 w-48" />
           <SkeletonText className="h-10 w-64" />
@@ -44,10 +44,10 @@ export default function Loading() {
           <Card className="p-6">
             <div className="flex items-center gap-3">
               <div className="relative">
-                <div className="w-8 h-8 border-4 border-gray-200 dark:border-gray-700 rounded-full"></div>
-                <div className="absolute top-0 left-0 w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
+                <div className="w-8 h-8 border-4 border-border rounded-full"></div>
+                <div className="absolute top-0 left-0 w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
               </div>
-              <p className="text-sm text-gray-600 dark:text-gray-300">Loading marketplace...</p>
+              <p className="text-sm text-muted-foreground">Loading marketplace...</p>
             </div>
           </Card>
         </div>

package/dist/templates/web/marketplace/template/src/app/login/page.tsx ADDED Viewed

@@ -0,0 +1,112 @@
+'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 LoginPage() {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const router = useRouter()
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+    try {
+      const res = await fetch('/api/auth', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password, action: 'login' }),
+      })
+      if (!res.ok) {
+        const data = await res.json()
+        throw new Error(data.error || 'Failed to sign in')
+      }
+      router.push('/dashboard')
+      router.refresh()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to sign in')
+    } 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">Welcome back</h1>
+              <p className="text-muted-foreground mt-2">Sign in to your marketplace account</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="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 ? 'Signing in...' : 'Sign In'}
+              </Button>
+            </form>
+            <div className="mt-6 text-center">
+              <p className="text-muted-foreground text-sm">
+                Don&apos;t have an account?{' '}
+                <Link href="/signup" className="text-primary hover:underline font-medium">
+                  Create a seller account
+                </Link>
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

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

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