@digilogiclabs/create-saas-app 2.8.0 → 2.9.0

package/dist/templates/web/base/template/src/app/auth/callback/route.ts

@@ -1,18 +1,32 @@
-import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
-import { cookies } from 'next/headers';
-import { NextResponse } from 'next/server';
-
-import type { NextRequest } from 'next/server';
-
-export async function GET(request: NextRequest) {
-  const requestUrl = new URL(request.url);
-  const code = requestUrl.searchParams.get('code');
-
-  if (code) {
-    const supabase = createRouteHandlerClient({ cookies });
-    await supabase.auth.exchangeCodeForSession(code);
-  }
-
-  // URL to redirect to after sign in process completes
-  return NextResponse.redirect(requestUrl.origin);
-}
+import { createServerClient } from '@supabase/ssr';
+import { cookies } from 'next/headers';
+import { NextResponse } from 'next/server';
+
+import type { NextRequest } from 'next/server';
+
+export async function GET(request: NextRequest) {
+  const requestUrl = new URL(request.url);
+  const code = requestUrl.searchParams.get('code');
+
+  if (code) {
+    const cookieStore = await cookies();
+    const supabase = createServerClient(
+      process.env.NEXT_PUBLIC_SUPABASE_URL!,
+      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+      {
+        cookies: {
+          getAll: () => cookieStore.getAll(),
+          setAll: (cookiesToSet) => {
+            cookiesToSet.forEach(({ name, value, options }) =>
+              cookieStore.set(name, value, options)
+            );
+          },
+        },
+      }
+    );
+    await supabase.auth.exchangeCodeForSession(code);
+  }
+
+  // URL to redirect to after sign in process completes
+  return NextResponse.redirect(requestUrl.origin);
+}

package/dist/templates/web/base/template/src/app/dashboard/page.tsx

@@ -16,9 +16,7 @@ import {
   OfflineWrapper,
   useNetworkInfo,
   useOfflineState,
-  DashboardLayout,
-  CommandPalette,
-  Tour
+  DashboardLayout
 } from '@digilogiclabs/saas-factory-ui';
 import { 
   BarChart3, 
@@ -30,10 +28,7 @@ import {
   Star,
   Trash2,
   Wifi,
-  WifiOff,
-  Home,
-  FileText,
-  Activity 
+  WifiOff
 } from 'lucide-react';
 
 // Mock data for demonstration
@@ -49,32 +44,6 @@ const mockActivityData = Array.from({ length: 50 }, (_, i) => ({
 export default function DashboardPage() {
   const { user } = useAuth();
   
-  const sidebarNavigation = [
-    { name: 'Dashboard', href: '/dashboard', icon: Home, current: true },
-    { name: 'Analytics', href: '/dashboard/analytics', icon: BarChart3 },
-    { name: 'Reports', href: '/dashboard/reports', icon: FileText },
-    { name: 'Activity', href: '/dashboard/activity', icon: Activity },
-    { name: 'Settings', href: '/settings', icon: Settings }
-  ]
-
-  const tourSteps = [
-    {
-      target: '[data-tour="overview"]',
-      title: 'Mobile-First Dashboard',
-      content: 'This dashboard is optimized for mobile devices with offline support and responsive design.'
-    },
-    {
-      target: '[data-tour="stats"]',
-      title: 'Network-Aware Stats',
-      content: 'Statistics automatically adapt based on your network connection speed.'
-    },
-    {
-      target: '[data-tour="activity"]',
-      title: 'Interactive Activity Feed',
-      content: 'Swipe left or right on activity items to archive, star, or delete them.'
-    }
-  ]
-  
   const lazyImageConfig = {
     mobileOptimization: {
       quality: 80,
@@ -148,13 +117,7 @@ export default function DashboardPage() {
 
 
   return (
-    <DashboardLayout
-      navigation={sidebarNavigation}
-      headerActions={[
-        <CommandPalette key="command-palette" />,
-        <Tour key="tour" steps={tourSteps} />
-      ]}
-    >
+    <DashboardLayout>
       <PageTransition type="slide" direction="horizontal" duration={300}>
         <OfflineWrapper
           cacheStrategy="stale-while-revalidate"
@@ -206,7 +169,7 @@ export default function DashboardPage() {
               <div data-tour="stats">
                 <NetworkAwareContent
                 showOnSlow={
-                  <ResponsiveGrid columns={gridConfig.columns_2_2} gap="sm" className="mb-6">
+                  <ResponsiveGrid columns={gridConfig.columns_2_2} gap={2} className="mb-6">
                     {stats.slice(0, 2).map((stat, index) => (
                       <Card key={index}>
                         <CardContent className="p-4">
@@ -223,7 +186,7 @@ export default function DashboardPage() {
                   </ResponsiveGrid>
                 }
               >
-                <ResponsiveGrid columns={gridConfig.columns_2_md4} gap="md" className="mb-6">
+                <ResponsiveGrid columns={gridConfig.columns_2_md4} gap={4} className="mb-6">
                   {stats.map((stat, index) => (
                     <Card key={index}>
                       <CardContent className="p-4">
@@ -340,7 +303,7 @@ export default function DashboardPage() {
                   </CardDescription>
                 </CardHeader>
                 <CardContent>
-                  <ResponsiveGrid columns={gridConfig.columns_2_md3} gap="sm">
+                  <ResponsiveGrid columns={gridConfig.columns_2_md3} gap={2}>
                     <Button variant="outline" className="h-20 flex flex-col gap-2">
                       <Users className="h-5 w-5" />
                       <span className="text-xs">Manage Users</span>

package/dist/templates/web/base/template/src/app/globals.css

@@ -1,157 +1,158 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* Import SaaS Factory UI styles */
-@import '@digilogiclabs/saas-factory-ui/styles.css';
-
-@layer base {
-  :root {
-    --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 84% 4.9%;
-    --muted: 210 40% 96%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96%;
-    --accent-foreground: 222.2 84% 4.9%;
-    --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%;
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --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% 94.1%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-/* Mobile-first optimizations */
-@media (max-width: 768px) {
-  .mobile-optimized {
-    touch-action: manipulation;
-    -webkit-tap-highlight-color: transparent;
-  }
-  
-  /* Better touch targets */
-  button, 
-  a, 
-  input, 
-  select, 
-  textarea {
-    min-height: 44px;
-    min-width: 44px;
-  }
-  
-  /* Smooth scrolling for mobile */
-  html {
-    scroll-behavior: smooth;
-    -webkit-overflow-scrolling: touch;
-  }
-}
-
-/* Network-aware styles */
-@media (prefers-reduced-data: reduce) {
-  .high-bandwidth-content {
-    display: none;
-  }
-}
-
-/* Reduced motion preferences */
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-
-/* Custom animations for mobile interactions */
-@keyframes haptic-feedback {
-  0% { transform: scale(1); }
-  50% { transform: scale(0.95); }
-  100% { transform: scale(1); }
-}
-
-.haptic-feedback {
-  animation: haptic-feedback 0.1s ease-in-out;
-}
-
-/* Offline indicator styles */
-.offline-indicator {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  background: #f59e0b;
-  color: white;
-  text-align: center;
-  padding: 8px;
-  font-size: 14px;
-  z-index: 9999;
-}
-
-/* Loading states */
-.loading-skeleton {
-  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-  background-size: 200% 100%;
-  animation: loading 1.5s infinite;
-}
-
-@keyframes loading {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-/* Progressive image loading */
-.progressive-image {
-  filter: blur(5px);
-  transition: filter 0.3s;
-}
-
-.progressive-image.loaded {
-  filter: blur(0);
-}
-
+/* Import SaaS Factory UI styles */
+@import '@digilogiclabs/saas-factory-ui/styles.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@layer base {
+  :root {
+    --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 84% 4.9%;
+    --muted: 210 40% 96%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96%;
+    --accent-foreground: 222.2 84% 4.9%;
+    --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%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --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% 94.1%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Mobile-first optimizations */
+@media (max-width: 768px) {
+  .mobile-optimized {
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+  }
+  
+  /* Better touch targets */
+  button, 
+  a, 
+  input, 
+  select, 
+  textarea {
+    min-height: 44px;
+    min-width: 44px;
+  }
+  
+  /* Smooth scrolling for mobile */
+  html {
+    scroll-behavior: smooth;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+/* Network-aware styles */
+@media (prefers-reduced-data: reduce) {
+  .high-bandwidth-content {
+    display: none;
+  }
+}
+
+/* Reduced motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Custom animations for mobile interactions */
+@keyframes haptic-feedback {
+  0% { transform: scale(1); }
+  50% { transform: scale(0.95); }
+  100% { transform: scale(1); }
+}
+
+.haptic-feedback {
+  animation: haptic-feedback 0.1s ease-in-out;
+}
+
+/* Offline indicator styles */
+.offline-indicator {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: #f59e0b;
+  color: white;
+  text-align: center;
+  padding: 8px;
+  font-size: 14px;
+  z-index: 9999;
+}
+
+/* Loading states */
+.loading-skeleton {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* Progressive image loading */
+.progressive-image {
+  filter: blur(5px);
+  transition: filter 0.3s;
+}
+
+.progressive-image.loaded {
+  filter: blur(0);
+}
+

package/dist/templates/web/base/template/src/app/page.tsx

@@ -92,7 +92,7 @@ export default function Home() {
         {/* Features Grid */}
         <NetworkAwareContent
           showOnSlow={
-            <ResponsiveGrid columns={gridConfig.columns_1_2} gap="md" className="mb-16">
+            <ResponsiveGrid columns={gridConfig.columns_1_2} gap={4} className="mb-16">
               <Card className="text-center">
                 <CardHeader>
                   <div className="mx-auto w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mb-4">
@@ -118,7 +118,7 @@ export default function Home() {
             </ResponsiveGrid>
           }
         >
-          <ResponsiveGrid columns={gridConfig.columns_1_3} gap="lg" className="mb-16">
+          <ResponsiveGrid columns={gridConfig.columns_1_3} gap={6} className="mb-16">
             <Card className="text-center">
               <CardHeader>
                 <div className="mx-auto w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mb-4">