@digilogiclabs/create-saas-app 1.5.3 → 1.6.0

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

@@ -3,9 +3,20 @@
 import React from 'react';
 import { useStripe } from '@digilogiclabs/saas-factory-payments';
 import { Button } from '@/components/ui/button';
+import { 
+  PageTransition,
+  MobileContainer,
+  TouchInput,
+  MobileForm,
+  SwipeableCard,
+  NetworkAwareContent,
+  useNetworkInfo
+} from '@digilogiclabs/saas-factory-ui';
+import { CreditCard, Zap } from 'lucide-react';
 
 export default function CheckoutPage() {
   const { handleCheckout } = useStripe();
+  const networkInfo = useNetworkInfo();
 
   const onCheckout = async () => {
     await handleCheckout({
@@ -15,14 +26,94 @@ export default function CheckoutPage() {
   };
 
   return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-100">
-      <div className="p-8 bg-white rounded-lg shadow-md">
-        <h1 className="text-2xl font-bold mb-4">Checkout</h1>
-        <p className="mb-6">Click the button below to proceed to payment.</p>
-        <Button onClick={onCheckout}>
-          Proceed to Checkout
-        </Button>
+    <PageTransition type="slide" direction="up" duration={350}>
+      <div className="flex items-center justify-center min-h-screen bg-gray-100">
+        <MobileContainer className="w-full max-w-md">
+          <NetworkAwareContent
+            showOnSlow={
+              <div className="p-6 bg-white rounded-lg shadow-md">
+                <div className="flex items-center gap-2 mb-4">
+                  <CreditCard className="h-6 w-6 text-blue-600" />
+                  <h1 className="text-xl font-bold">Checkout</h1>
+                </div>
+                <p className="mb-6 text-gray-600">
+                  Simplified checkout for slower connections.
+                </p>
+                <Button 
+                  onClick={onCheckout} 
+                  className="w-full"
+                  size="lg"
+                >
+                  Proceed to Checkout
+                </Button>
+              </div>
+            }
+          >
+            <SwipeableCard
+              leftActions={[
+                { 
+                  id: 'back', 
+                  label: 'Back', 
+                  onAction: () => window.history.back(),
+                  color: 'gray'
+                }
+              ]}
+              rightActions={[
+                { 
+                  id: 'proceed', 
+                  label: 'Pay Now', 
+                  onAction: onCheckout,
+                  color: 'green'
+                }
+              ]}
+              threshold={60}
+              hapticFeedback={true}
+              showActionLabels={true}
+            >
+              <div className="p-8 bg-white rounded-lg shadow-md">
+                <div className="flex items-center gap-3 mb-6">
+                  <div className="p-3 bg-blue-100 rounded-full">
+                    <Zap className="h-6 w-6 text-blue-600" />
+                  </div>
+                  <div>
+                    <h1 className="text-2xl font-bold">Premium Checkout</h1>
+                    <p className="text-sm text-gray-500">
+                      {networkInfo?.effectiveType && `${networkInfo.effectiveType.toUpperCase()} connection`}
+                    </p>
+                  </div>
+                </div>
+                
+                <div className="space-y-4 mb-6">
+                  <div className="p-4 bg-blue-50 rounded-lg">
+                    <h3 className="font-semibold text-blue-900">Pro Plan</h3>
+                    <p className="text-blue-700">$29/month • All features included</p>
+                  </div>
+                  
+                  <div className="text-sm text-gray-600">
+                    <p>✓ Touch-optimized checkout experience</p>
+                    <p>✓ Network-aware performance</p>
+                    <p>✓ Secure payment processing</p>
+                  </div>
+                </div>
+
+                <div className="space-y-3">
+                  <Button 
+                    onClick={onCheckout} 
+                    className="w-full"
+                    size="lg"
+                  >
+                    Proceed to Checkout
+                  </Button>
+                  
+                  <p className="text-xs text-center text-gray-500">
+                    Swipe left to go back • Swipe right to pay now
+                  </p>
+                </div>
+              </div>
+            </SwipeableCard>
+          </NetworkAwareContent>
+        </MobileContainer>
       </div>
-    </div>
+    </PageTransition>
   );
 }

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

@@ -0,0 +1,309 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useAuth } from '@digilogiclabs/saas-factory-auth';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { 
+  PageTransition,
+  MobileContainer,
+  ResponsiveGrid,
+  PullToRefresh,
+  LazyImage,
+  VirtualScrollList,
+  SwipeableCard,
+  NetworkAwareContent,
+  OfflineWrapper,
+  useNetworkInfo,
+  useOfflineState
+} from '@digilogiclabs/saas-factory-ui';
+import { 
+  BarChart3, 
+  Users, 
+  DollarSign, 
+  TrendingUp, 
+  Settings, 
+  Archive,
+  Star,
+  Trash2,
+  Wifi,
+  WifiOff 
+} from 'lucide-react';
+
+// Mock data for demonstration
+const mockActivityData = Array.from({ length: 50 }, (_, i) => ({
+  id: i + 1,
+  title: `Activity ${i + 1}`,
+  description: `This is a sample activity item #${i + 1}`,
+  timestamp: new Date(Date.now() - Math.random() * 7 * 24 * 60 * 60 * 1000).toISOString(),
+  type: ['user', 'sale', 'system'][Math.floor(Math.random() * 3)],
+  avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${i}`
+}));
+
+export default function DashboardPage() {
+  const { user } = useAuth();
+  const networkInfo = useNetworkInfo();
+  const isOnline = useOfflineState();
+  const [activityData, setActivityData] = useState(mockActivityData);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    setIsRefreshing(false);
+  };
+
+  const handleArchive = (id: number) => {
+    setActivityData(prev => prev.filter(item => item.id !== id));
+  };
+
+  const handleStar = (id: number) => {
+    console.log('Starred item:', id);
+  };
+
+  const handleDelete = (id: number) => {
+    setActivityData(prev => prev.filter(item => item.id !== id));
+  };
+
+  const stats = [
+    {
+      title: 'Total Users',
+      value: '2,543',
+      change: '+12%',
+      icon: Users,
+      color: 'blue'
+    },
+    {
+      title: 'Revenue',
+      value: '$12,456',
+      change: '+8%',
+      icon: DollarSign,
+      color: 'green'
+    },
+    {
+      title: 'Growth',
+      value: '23.5%',
+      change: '+2.1%',
+      icon: TrendingUp,
+      color: 'purple'
+    },
+    {
+      title: 'Analytics',
+      value: '1,234',
+      change: '+5%',
+      icon: BarChart3,
+      color: 'orange'
+    }
+  ];
+
+  return (
+    <PageTransition type="slide" direction="horizontal" duration={300}>
+      <OfflineWrapper
+        cacheStrategy="stale-while-revalidate"
+        showOfflineIndicator={true}
+        backgroundSync={true}
+      >
+        <PullToRefresh 
+          onRefresh={handleRefresh}
+          threshold={80}
+          loadingIndicator="spinner"
+          hapticOnTrigger={true}
+          networkAware={true}
+        >
+          <div className="min-h-screen bg-gray-50">
+            <MobileContainer className="py-6">
+              {/* Header */}
+              <div className="mb-6">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h1 className="text-2xl font-bold text-gray-900">
+                      Welcome back, {user?.email?.split('@')[0]}
+                    </h1>
+                    <p className="text-gray-600 flex items-center gap-2">
+                      {isOnline ? (
+                        <>
+                          <Wifi className="h-4 w-4 text-green-600" />
+                          <span>Online</span>
+                        </>
+                      ) : (
+                        <>
+                          <WifiOff className="h-4 w-4 text-red-600" />
+                          <span>Offline</span>
+                        </>
+                      )}
+                      {networkInfo?.effectiveType && (
+                        <span className="text-xs bg-gray-200 px-2 py-1 rounded">
+                          {networkInfo.effectiveType.toUpperCase()}
+                        </span>
+                      )}
+                    </p>
+                  </div>
+                  <Button variant="outline" size="icon">
+                    <Settings className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* Stats Grid */}
+              <NetworkAwareContent
+                showOnSlow={
+                  <ResponsiveGrid columns={{ base: 2, md: 2 }} gap="sm" className="mb-6">
+                    {stats.slice(0, 2).map((stat, index) => (
+                      <Card key={index}>
+                        <CardContent className="p-4">
+                          <div className="flex items-center gap-2">
+                            <stat.icon className={`h-5 w-5 text-${stat.color}-600`} />
+                            <div>
+                              <p className="text-sm font-medium text-gray-600">{stat.title}</p>
+                              <p className="text-lg font-bold">{stat.value}</p>
+                            </div>
+                          </div>
+                        </CardContent>
+                      </Card>
+                    ))}
+                  </ResponsiveGrid>
+                }
+              >
+                <ResponsiveGrid columns={{ base: 2, md: 4 }} gap="md" className="mb-6">
+                  {stats.map((stat, index) => (
+                    <Card key={index}>
+                      <CardContent className="p-4">
+                        <div className="flex items-center justify-between mb-2">
+                          <stat.icon className={`h-5 w-5 text-${stat.color}-600`} />
+                          <span className="text-sm text-green-600 font-medium">
+                            {stat.change}
+                          </span>
+                        </div>
+                        <div>
+                          <p className="text-sm font-medium text-gray-600">{stat.title}</p>
+                          <p className="text-2xl font-bold">{stat.value}</p>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))}
+                </ResponsiveGrid>
+              </NetworkAwareContent>
+
+              {/* Activity Feed */}
+              <Card className="mb-6">
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <BarChart3 className="h-5 w-5" />
+                    Recent Activity
+                  </CardTitle>
+                  <CardDescription>
+                    Swipe left on items to archive or star them
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="p-0">
+                  <VirtualScrollList
+                    items={activityData}
+                    itemHeight={80}
+                    containerHeight={400}
+                    bufferSize={5}
+                    renderItem={(item) => (
+                      <SwipeableCard
+                        key={item.id}
+                        leftActions={[
+                          {
+                            id: 'archive',
+                            label: 'Archive',
+                            onAction: () => handleArchive(item.id),
+                            color: 'blue',
+                            icon: Archive
+                          },
+                          {
+                            id: 'star',
+                            label: 'Star',
+                            onAction: () => handleStar(item.id),
+                            color: 'yellow',
+                            icon: Star
+                          }
+                        ]}
+                        rightActions={[
+                          {
+                            id: 'delete',
+                            label: 'Delete',
+                            onAction: () => handleDelete(item.id),
+                            color: 'red',
+                            icon: Trash2
+                          }
+                        ]}
+                        threshold={50}
+                        hapticFeedback={true}
+                        showActionLabels={true}
+                      >
+                        <div className="flex items-center gap-3 p-4 border-b">
+                          <LazyImage
+                            src={item.avatar}
+                            alt={`Activity ${item.id}`}
+                            className="w-10 h-10 rounded-full"
+                            placeholder="skeleton"
+                            webpSupport={true}
+                            mobileOptimization={{
+                              quality: 80,
+                              format: "webp"
+                            }}
+                          />
+                          <div className="flex-1 min-w-0">
+                            <h4 className="font-medium text-gray-900 truncate">
+                              {item.title}
+                            </h4>
+                            <p className="text-sm text-gray-600 truncate">
+                              {item.description}
+                            </p>
+                            <p className="text-xs text-gray-400">
+                              {new Date(item.timestamp).toLocaleDateString()}
+                            </p>
+                          </div>
+                          <div className={`px-2 py-1 rounded-full text-xs ${
+                            item.type === 'user' ? 'bg-blue-100 text-blue-800' :
+                            item.type === 'sale' ? 'bg-green-100 text-green-800' :
+                            'bg-gray-100 text-gray-800'
+                          }`}>
+                            {item.type}
+                          </div>
+                        </div>
+                      </SwipeableCard>
+                    )}
+                    onEndReached={() => {
+                      console.log('Loading more items...');
+                    }}
+                    mobileOptimized={true}
+                  />
+                </CardContent>
+              </Card>
+
+              {/* Quick Actions */}
+              <Card>
+                <CardHeader>
+                  <CardTitle>Quick Actions</CardTitle>
+                  <CardDescription>
+                    Common tasks and shortcuts
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <ResponsiveGrid columns={{ base: 2, md: 3 }} gap="sm">
+                    <Button variant="outline" className="h-20 flex flex-col gap-2">
+                      <Users className="h-5 w-5" />
+                      <span className="text-xs">Manage Users</span>
+                    </Button>
+                    <Button variant="outline" className="h-20 flex flex-col gap-2">
+                      <DollarSign className="h-5 w-5" />
+                      <span className="text-xs">View Revenue</span>
+                    </Button>
+                    <Button variant="outline" className="h-20 flex flex-col gap-2">
+                      <BarChart3 className="h-5 w-5" />
+                      <span className="text-xs">Analytics</span>
+                    </Button>
+                  </ResponsiveGrid>
+                </CardContent>
+              </Card>
+            </MobileContainer>
+          </div>
+        </PullToRefresh>
+      </OfflineWrapper>
+    </PageTransition>
+  );
+}

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

@@ -2,6 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Import SaaS Factory UI styles */
+@import '@digilogiclabs/saas-factory-ui/styles.css';
+
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -53,8 +56,102 @@
   * {
     @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/src/templates/web/base/template/src/app/login/page.tsx

@@ -1,6 +1,12 @@
 'use client';
 
-import { LoginForm } from '@digilogiclabs/saas-factory-ui';
+import { 
+  LoginForm,
+  PageTransition,
+  MobileContainer,
+  NetworkAwareContent,
+  OfflineWrapper
+} from '@digilogiclabs/saas-factory-ui';
 import { AuthProvider } from '@digilogiclabs/saas-factory-auth';
 import { createBrowserClient } from '@supabase/ssr';
 import React from 'react';
@@ -28,12 +34,34 @@ export default function LoginPage() {
   };
 
   return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-100">
-      <LoginForm
-        onSubmit={handleLogin}
-        onGoogleSignIn={handleGoogleLogin}
-        authProvider={AuthProvider.SUPABASE}
-      />
-    </div>
+    <PageTransition type="slide" direction="horizontal" duration={300}>
+      <OfflineWrapper
+        cacheStrategy="network-first"
+        showOfflineIndicator={true}
+      >
+        <NetworkAwareContent
+          showOnOffline={
+            <div className="flex items-center justify-center min-h-screen bg-gray-100">
+              <div className="text-center p-6">
+                <h2 className="text-xl font-semibold mb-2">You're offline</h2>
+                <p className="text-gray-600">Please check your connection to sign in.</p>
+              </div>
+            </div>
+          }
+        >
+          <div className="flex items-center justify-center min-h-screen bg-gray-100">
+            <MobileContainer className="w-full max-w-md">
+              <LoginForm
+                onSubmit={handleLogin}
+                onGoogleSignIn={handleGoogleLogin}
+                authProvider={AuthProvider.SUPABASE}
+                mobileOptimized={true}
+                touchFriendly={true}
+              />
+            </MobileContainer>
+          </div>
+        </NetworkAwareContent>
+      </OfflineWrapper>
+    </PageTransition>
   );
 }