create-varity-app 2.0.0-beta.10 → 2.0.0-beta.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-varity-app",
-  "version": "2.0.0-beta.10",
+  "version": "2.0.0-beta.11",
   "description": "Create production-ready apps with auth, database, and payments built in",
   "license": "MIT",
   "repository": {

package/template/src/app/dashboard/layout.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import { useState, useEffect, useCallback } from 'react';
-import { usePathname } from 'next/navigation';
-import { appNavigate } from '@/lib/utils';
+import { useRouter, usePathname } from 'next/navigation';
 import { APP_NAME, NAVIGATION_ITEMS } from '@/lib/constants';
 import { useProjects, useTasks, useTeam } from '@/lib/hooks';
 import { CommandPalette } from '@varity-labs/ui-kit';
@@ -23,9 +22,10 @@ try {
 } catch {}
 
 function RedirectToLogin() {
+  const router = useRouter();
   useEffect(() => {
-    appNavigate('/login/');
-  }, []);
+    router.push('/login');
+  }, [router]);
   return null;
 }
 
@@ -113,6 +113,7 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
   // eslint-disable-next-line react-hooks/rules-of-hooks -- conditional on require() success, stable across renders
   const privy = usePrivyHook ? usePrivyHook() : { user: null, logout: async () => {} };
   const { user, logout } = privy;
+  const router = useRouter();
   const pathname = usePathname();
   const isMobile = useIsMobile();
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
@@ -153,7 +154,7 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
 
   const handleLogout = async () => {
     await logout();
-    appNavigate('/');
+    window.location.href = '/';
   };
 
   // Fallback layout when DashboardLayout from ui-kit isn't available
@@ -163,7 +164,7 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
         <CommandPalette
           open={commandPaletteOpen}
           onClose={() => setCommandPaletteOpen(false)}
-          onNavigate={(path: string) => appNavigate(path.endsWith('/') ? path : path + '/')}
+          onNavigate={(path: string) => router.push(path)}
           projects={projects}
           tasks={tasks}
           team={team}
@@ -180,7 +181,7 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
                 {navWithActive.map((item) => (
                   <button
                     key={item.path}
-                    onClick={() => appNavigate(item.path + '/')}
+                    onClick={() => router.push(item.path)}
                     className={`flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${
                       item.active
                         ? 'bg-primary-50 text-primary-700'
@@ -210,7 +211,7 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
               navItems={navWithActive}
               userEmail={userEmail}
               onLogout={handleLogout}
-              onNavigate={(path) => appNavigate(path.endsWith('/') ? path : path + '/')}
+              onNavigate={(path) => router.push(path)}
             />
           )}
 
@@ -227,7 +228,7 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
       <CommandPalette
         open={commandPaletteOpen}
         onClose={() => setCommandPaletteOpen(false)}
-        onNavigate={(path: string) => appNavigate(path.endsWith('/') ? path : path + '/')}
+        onNavigate={(path: string) => router.push(path)}
         projects={projects}
         tasks={tasks}
         team={team}
@@ -241,7 +242,7 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
           navItems={navWithActive}
           userEmail={userEmail}
           onLogout={handleLogout}
-          onNavigate={(path) => appNavigate(path.endsWith('/') ? path : path + '/')}
+          onNavigate={(path) => router.push(path)}
         />
       )}
 
@@ -256,10 +257,10 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
             name: userName,
             address: userEmail,
           }}
-          onNavigate={(path: string) => appNavigate(path.endsWith('/') ? path : path + '/')}
+          onNavigate={(path: string) => router.push(path)}
           onLogout={handleLogout}
-          onNavigateToProfile={() => appNavigate('/dashboard/settings/')}
-          onNavigateToSettings={() => appNavigate('/dashboard/settings/')}
+          onNavigateToProfile={() => router.push('/dashboard/settings')}
+          onNavigateToSettings={() => router.push('/dashboard/settings')}
           onSearchClick={() => setCommandPaletteOpen(true)}
           searchPlaceholder="Search projects, tasks, team..."
         >
@@ -288,7 +289,7 @@ export default function DashboardRootLayout({
       appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}
       thirdwebClientId={process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID}
       loginMethods={['email', 'google']}
-      appearance={{ theme: 'light', accentColor: '#2563EB', logo: '/logo.svg' }}
+      appearance={{ theme: 'light', accentColor: '#2563EB' }}
     >
       <PrivyProtectedRoute fallback={<RedirectToLogin />}>
         <DashboardShell>{children}</DashboardShell>

package/template/src/app/dashboard/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { appNavigate } from '@/lib/utils';
+import { useRouter } from 'next/navigation';
 import { useProjects, useTasks, useTeam, useCurrentUser } from '@/lib/hooks';
 import { DashboardStats } from '@/components/dashboard/DashboardStats';
 import { RecentActivity } from '@/components/dashboard/RecentActivity';
@@ -8,7 +8,7 @@ import { APP_NAME } from '@/lib/constants';
 import { FolderKanban, ListTodo, Users, ArrowRight } from 'lucide-react';
 
 function QuickActions() {
-  
+  const router = useRouter();
   const actions = [
     {
       label: 'New Project',
@@ -48,7 +48,7 @@ function QuickActions() {
       {actions.map((action) => (
         <button
           key={action.path}
-          onClick={() => appNavigate(action.path + '/')}
+          onClick={() => router.push(action.path)}
           className="flex items-center gap-3 rounded-xl border border-gray-200 bg-white p-4 text-left shadow-sm hover:shadow-md hover:border-gray-300 transition-all"
         >
           <div className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-lg ${action.color}`}>
@@ -73,7 +73,8 @@ function GettingStarted({
   hasTasks: boolean;
   hasTeam: boolean;
 }) {
-    const completedCount = [hasProjects, hasTasks, hasTeam].filter(Boolean).length;
+  const router = useRouter();
+  const completedCount = [hasProjects, hasTasks, hasTeam].filter(Boolean).length;
 
   if (completedCount === 3) return null;
 
@@ -111,7 +112,7 @@ function GettingStarted({
         {steps.map((step) => (
           <button
             key={step.label}
-            onClick={() => !step.done && appNavigate(step.path + '/')}
+            onClick={() => !step.done && router.push(step.path)}
             disabled={step.done}
             className={`flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors ${
               step.done
@@ -136,7 +137,7 @@ function GettingStarted({
 }
 
 export default function DashboardPage() {
-    const { name } = useCurrentUser();
+  const { name } = useCurrentUser();
   const { data: projects, loading: projectsLoading, error: projectsError, refresh: refreshProjects } = useProjects();
   const { data: tasks, loading: tasksLoading, error: tasksError, refresh: refreshTasks } = useTasks();
   const { data: team, loading: teamLoading, error: teamError, refresh: refreshTeam } = useTeam();

package/template/src/app/layout.tsx

@@ -1,20 +1,23 @@
 import type { Metadata } from 'next';
 import { Providers } from '@/components/providers';
+import { APP_NAME } from '@/lib/constants';
 import './globals.css';
 
+const description = 'Built with Varity — auth, database, and deployment included.';
+
 export const metadata: Metadata = {
-  title: 'TaskFlow - Project Management',
-  description: 'Manage projects, track tasks, and collaborate with your team.',
+  title: APP_NAME,
+  description,
   metadataBase: new URL('https://varity.app'),
   openGraph: {
-    title: 'TaskFlow - Project Management',
-    description: 'Manage projects, track tasks, and collaborate with your team.',
+    title: APP_NAME,
+    description,
     type: 'website',
   },
   twitter: {
     card: 'summary',
-    title: 'TaskFlow - Project Management',
-    description: 'Manage projects, track tasks, and collaborate with your team.',
+    title: APP_NAME,
+    description,
   },
 };
 
@@ -25,9 +28,6 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <head>
-        <base href="./" />
-      </head>
       <body>
         <Providers>{children}</Providers>
       </body>

package/template/src/app/login/page.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { useEffect } from 'react';
-import { appNavigate } from '@/lib/utils';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
 import { CheckCircle } from 'lucide-react';
 import { APP_NAME } from '@/lib/constants';
 
@@ -14,15 +15,22 @@ try {
   usePrivyHook = uiKit.usePrivy;
 } catch {}
 
+function loginButtonLabel(privy: { ready: boolean; authenticated: boolean }): string {
+  if (!privy.ready) return 'Loading...';
+  if (privy.authenticated) return 'Already Signed In';
+  return 'Sign In with Email or Social';
+}
+
 function LoginContent() {
+  const router = useRouter();
   // eslint-disable-next-line react-hooks/rules-of-hooks -- conditional on require() success, stable across renders
   const privy = usePrivyHook ? usePrivyHook() : null;
 
   useEffect(() => {
     if (privy?.authenticated) {
-      appNavigate('/dashboard/');
+      router.push('/dashboard');
     }
-  }, [privy?.authenticated]);
+  }, [privy?.authenticated, router]);
 
   const handleLogin = () => {
     if (privy?.login) {
@@ -34,10 +42,10 @@ function LoginContent() {
     <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4">
       <div className="w-full max-w-md space-y-8">
         <div className="text-center">
-          <a href="/" onClick={(e) => { e.preventDefault(); appNavigate('/'); }} className="inline-flex items-center gap-2">
+          <Link href="/" className="inline-flex items-center gap-2">
             <CheckCircle className="h-8 w-8 text-primary-600" />
             <span className="text-2xl font-bold text-gray-900">{APP_NAME}</span>
-          </a>
+          </Link>
           <h2 className="mt-6 text-2xl font-bold text-gray-900">
             Sign in to your account
           </h2>
@@ -53,11 +61,7 @@ function LoginContent() {
               disabled={!privy.ready || privy.authenticated}
               className="w-full px-6 py-3 bg-primary-600 hover:bg-primary-700 disabled:bg-gray-300 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors shadow-sm"
             >
-              {!privy.ready
-                ? 'Loading...'
-                : privy.authenticated
-                ? 'Already Signed In'
-                : 'Sign In with Email or Social'}
+              {loginButtonLabel(privy)}
             </button>
           ) : (
             <div className="text-center space-y-4">
@@ -77,20 +81,18 @@ function LoginContent() {
 }
 
 export default function LoginPage() {
-  // Always wrap in PrivyStack - it uses dev credentials automatically when no appId is provided
   if (PrivyStackComponent) {
     return (
       <PrivyStackComponent
         appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}
         thirdwebClientId={process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID}
         loginMethods={['email', 'google']}
-        appearance={{ theme: 'light', accentColor: '#2563EB', logo: '/logo.svg' }}
+        appearance={{ theme: 'light', accentColor: '#2563EB' }}
       >
         <LoginContent />
       </PrivyStackComponent>
     );
   }
 
-  // Fallback if ui-kit package isn't installed
   return <LoginContent />;
 }

package/template/src/app/not-found.tsx

@@ -1,6 +1,4 @@
-'use client';
-
-import { appNavigate } from '@/lib/utils';
+import Link from 'next/link';
 
 export default function NotFound() {
   return (
@@ -8,13 +6,12 @@ export default function NotFound() {
       <div className="text-center">
         <h1 className="text-6xl font-bold text-gray-900 mb-4">404</h1>
         <p className="text-xl text-gray-600 mb-8">Page not found</p>
-        <a
+        <Link
           href="/"
-          onClick={(e) => { e.preventDefault(); appNavigate('/'); }}
           className="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-6 py-3 text-base font-medium text-white hover:bg-primary-700 transition-all"
         >
           Go Home
-        </a>
+        </Link>
       </div>
     </div>
   );

package/template/src/app/page.tsx

@@ -2,7 +2,6 @@ import { Navbar } from '@/components/shared/Navbar';
 import { Hero } from '@/components/landing/Hero';
 import { Features } from '@/components/landing/Features';
 import { HowItWorks } from '@/components/landing/HowItWorks';
-
 import { Pricing } from '@/components/landing/Pricing';
 import { CTA } from '@/components/landing/CTA';
 import { Footer } from '@/components/shared/Footer';

package/template/src/components/dashboard/RecentActivity.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import { appNavigate } from '@/lib/utils';
-import { DataTable } from '@varity-labs/ui-kit';
-import { TaskStatusBadge, PriorityBadge } from '@varity-labs/ui-kit';
+import Link from 'next/link';
+import { DataTable, TaskStatusBadge, PriorityBadge } from '@varity-labs/ui-kit';
 import { formatRelativeDate } from '@/lib/utils';
 import { ArrowRight } from 'lucide-react';
 import type { Task } from '@/types';
@@ -43,14 +42,13 @@ export function RecentActivity({ tasks, loading = false }: RecentActivityProps)
           Recent Activity
         </h3>
         {tasks.length > 5 && (
-          <a
-            href="/dashboard/tasks/"
-            onClick={(e) => { e.preventDefault(); appNavigate('/dashboard/tasks/'); }}
+          <Link
+            href="/dashboard/tasks"
             className="flex items-center gap-1 text-sm font-medium text-primary-600 hover:text-primary-700 transition-colors"
           >
             View all tasks
             <ArrowRight className="h-4 w-4" />
-          </a>
+          </Link>
         )}
       </div>
       <DataTable

package/template/src/components/landing/CTA.tsx

@@ -1,6 +1,4 @@
-'use client';
-
-import { appNavigate } from '@/lib/utils';
+import Link from 'next/link';
 import { ArrowRight, CheckCircle2 } from 'lucide-react';
 import { APP_NAME } from '@/lib/constants';
 
@@ -30,14 +28,13 @@ export function CTA() {
           ))}
         </div>
         <div className="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
-          <a
-            href="/login/"
-            onClick={(e) => { e.preventDefault(); appNavigate('/login/'); }}
+          <Link
+            href="/login"
             className="group inline-flex items-center gap-2 rounded-lg bg-white px-6 py-3 text-base font-medium text-gray-900 shadow-lg hover:bg-gray-100 transition-all"
           >
             Get Started Free
             <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
-          </a>
+          </Link>
         </div>
       </div>
     </section>

package/template/src/components/landing/Hero.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { appNavigate } from '@/lib/utils';
+import Link from 'next/link';
 import { ArrowRight, BarChart3, Shield, Zap, CheckCircle2 } from 'lucide-react';
 import { APP_NAME } from '@/lib/constants';
 
@@ -97,14 +97,13 @@ export function Hero() {
           Stop juggling spreadsheets and start delivering on time.
         </p>
         <div className="animate-fade-in-up-delay-2 mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
-          <a
-            href="/login/"
-            onClick={(e) => { e.preventDefault(); appNavigate('/login/'); }}
+          <Link
+            href="/login"
             className="group inline-flex items-center gap-2 rounded-lg bg-primary-600 px-6 py-3 text-base font-medium text-white shadow-lg shadow-primary-200 hover:bg-primary-700 hover:shadow-xl hover:shadow-primary-200/50 transition-all"
           >
             Start Free
             <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
-          </a>
+          </Link>
           <a
             href="#how-it-works"
             className="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-6 py-3 text-base font-medium text-gray-700 hover:bg-gray-50 hover:border-gray-400 transition-all"

package/template/src/components/landing/Pricing.tsx

@@ -1,6 +1,4 @@
-'use client';
-
-import { appNavigate } from '@/lib/utils';
+import Link from 'next/link';
 import { Check } from 'lucide-react';
 
 const plans = [
@@ -55,6 +53,12 @@ const plans = [
   },
 ];
 
+function buttonStyle(plan: (typeof plans)[number]): string {
+  if (plan.popular) return 'bg-primary-600 text-white hover:bg-primary-700';
+  if (plan.price === 0) return 'bg-gray-100 text-gray-900 hover:bg-gray-200';
+  return 'bg-gray-900 text-white hover:bg-gray-800';
+}
+
 export function Pricing() {
   return (
     <section id="pricing" className="py-24 bg-white">
@@ -105,19 +109,12 @@ export function Pricing() {
               </ul>
 
               <div className="mt-8">
-                <a
-                  href="/login/"
-                  onClick={(e) => { e.preventDefault(); appNavigate('/login/'); }}
-                  className={`block w-full rounded-lg py-3 text-center font-medium transition-colors ${
-                    plan.popular
-                      ? 'bg-primary-600 text-white hover:bg-primary-700'
-                      : plan.price === 0
-                        ? 'bg-gray-100 text-gray-900 hover:bg-gray-200'
-                        : 'bg-gray-900 text-white hover:bg-gray-800'
-                  }`}
+                <Link
+                  href="/login"
+                  className={`block w-full rounded-lg py-3 text-center font-medium transition-colors ${buttonStyle(plan)}`}
                 >
                   {plan.cta}
-                </a>
+                </Link>
               </div>
             </div>
           ))}

package/template/src/components/shared/Footer.tsx

@@ -1,6 +1,4 @@
-'use client';
-
-import { appNavigate } from '@/lib/utils';
+import Link from 'next/link';
 import { CheckCircle } from 'lucide-react';
 import { APP_NAME } from '@/lib/constants';
 
@@ -25,9 +23,9 @@ export function Footer() {
             <a href="#pricing" className="hover:text-gray-700 transition-colors">
               Pricing
             </a>
-            <a href="/login/" onClick={(e) => { e.preventDefault(); appNavigate('/login/'); }} className="hover:text-gray-700 transition-colors">
+            <Link href="/login" className="hover:text-gray-700 transition-colors">
               Sign In
-            </a>
+            </Link>
           </div>
         </div>
         <div className="mt-8 border-t border-gray-100 pt-6 text-center text-sm text-gray-400">

package/template/src/components/shared/Navbar.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import { useState } from 'react';
+import Link from 'next/link';
 import { CheckCircle, Menu, X } from 'lucide-react';
 import { APP_NAME } from '@/lib/constants';
-import { appNavigate } from '@/lib/utils';
 
 const navLinks = [
   { label: 'Features', href: '#features' },
@@ -18,10 +18,10 @@ export function Navbar() {
     <nav className="sticky top-0 z-40 border-b border-gray-200 bg-white/80 backdrop-blur-md">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <div className="flex h-16 items-center justify-between">
-          <a href="/" onClick={(e) => { e.preventDefault(); appNavigate('/'); }} className="flex items-center gap-2">
+          <Link href="/" className="flex items-center gap-2">
             <CheckCircle className="h-7 w-7 text-primary-600" />
             <span className="text-xl font-bold text-gray-900">{APP_NAME}</span>
-          </a>
+          </Link>
           <div className="hidden items-center gap-8 sm:flex">
             {navLinks.map((link) => (
               <a
@@ -34,21 +34,18 @@ export function Navbar() {
             ))}
           </div>
           <div className="flex items-center gap-3">
-            <a
-              href="/login/"
-              onClick={(e) => { e.preventDefault(); appNavigate('/login/'); }}
+            <Link
+              href="/login"
               className="hidden text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors sm:block"
             >
               Sign In
-            </a>
-            <a
-              href="/login/"
-              onClick={(e) => { e.preventDefault(); appNavigate('/login/'); }}
+            </Link>
+            <Link
+              href="/login"
               className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 transition-colors"
             >
               Get Started
-            </a>
-            {/* Mobile menu toggle */}
+            </Link>
             <button
               onClick={() => setMobileOpen(!mobileOpen)}
               className="rounded-lg p-2 text-gray-600 hover:bg-gray-100 sm:hidden"
@@ -60,7 +57,6 @@ export function Navbar() {
         </div>
       </div>
 
-      {/* Mobile dropdown */}
       {mobileOpen && (
         <div className="border-t border-gray-100 bg-white px-4 pb-4 pt-2 sm:hidden">
           <div className="space-y-1">
@@ -74,13 +70,13 @@ export function Navbar() {
                 {link.label}
               </a>
             ))}
-            <a
-              href="/login/"
-              onClick={(e) => { e.preventDefault(); setMobileOpen(false); appNavigate('/login/'); }}
+            <Link
+              href="/login"
+              onClick={() => setMobileOpen(false)}
               className="block rounded-lg px-3 py-2.5 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900 transition-colors"
             >
               Sign In
-            </a>
+            </Link>
           </div>
         </div>
       )}

package/template/src/lib/constants.ts

@@ -1,6 +1,6 @@
 import type { NavigationItem } from '@varity-labs/ui-kit';
 
-export const APP_NAME = 'TaskFlow';
+export const APP_NAME = 'My App';
 
 export const NAVIGATION_ITEMS: NavigationItem[] = [
   { label: 'Dashboard', icon: 'dashboard', path: '/dashboard' },

package/template/src/lib/utils.ts

@@ -44,27 +44,6 @@ export function cn(...classes: (string | false | undefined | null)[]): string {
   return classes.filter(Boolean).join(' ');
 }
 
-/**
- * Detect the app's base path at runtime from the current URL.
- * Works on any host: localhost, varity.app/saas-template, ipfs.io/ipfs/QmX, etc.
- */
-export function getAppBase(): string {
-  if (typeof window === 'undefined') return '';
-  const path = window.location.pathname;
-  const routes = ['/login', '/dashboard/projects', '/dashboard/settings', '/dashboard/tasks', '/dashboard/team', '/dashboard'];
-  for (const route of routes) {
-    const idx = path.indexOf(route);
-    if (idx > 0) return path.substring(0, idx);
-  }
-  // On landing page — pathname is the base (strip trailing slash)
-  return path.replace(/\/+$/, '');
-}
-
-/** Navigate to an absolute app path (e.g. '/login/', '/dashboard/'). */
-export function appNavigate(absolutePath: string): void {
-  window.location.href = getAppBase() + absolutePath;
-}
-
 export function downloadCSV(data: Record<string, unknown>[], filename: string) {
   if (data.length === 0) return;
   const headers = Object.keys(data[0]);

package/template/src/services/dashboardService.ts

@@ -1,589 +0,0 @@
-/**
- * Dashboard Service
- *
- * Centralized service for dashboard-related API calls.
- * Provides type-safe interfaces and error handling.
- */
-
-import type { Project, Task, TeamMember } from '@/types';
-
-// ============================================================================
-// Type Definitions
-// ============================================================================
-
-export interface KPIMetric {
-  title: string;
-  value: string | number;
-  change?: {
-    value: number;
-    period: string;
-  };
-  trend?: 'up' | 'down' | 'neutral';
-  sparklineData?: number[];
-}
-
-export interface KPIResponse {
-  kpis: KPIMetric[];
-  has_data: boolean;
-  last_updated: string;
-}
-
-export interface Activity {
-  id: string;
-  type: 'project_created' | 'task_completed' | 'member_added' | 'comment_added';
-  title: string;
-  description: string;
-  timestamp: string;
-  user?: {
-    name: string;
-    avatar?: string;
-  };
-  metadata?: Record<string, any>;
-}
-
-export interface ActivityResponse {
-  activities: Activity[];
-  total_count: number;
-  has_more: boolean;
-}
-
-export interface ProjectResponse {
-  projects: Project[];
-  total_count: number;
-  active_count: number;
-}
-
-export interface TaskResponse {
-  tasks: Task[];
-  total_count: number;
-  completed_count: number;
-  by_status: {
-    todo: number;
-    in_progress: number;
-    done: number;
-  };
-}
-
-export interface TeamMemberResponse {
-  members: TeamMember[];
-  total_count: number;
-  roles: {
-    owner: number;
-    admin: number;
-    member: number;
-    viewer: number;
-  };
-}
-
-export interface DashboardOverviewResponse {
-  kpis: KPIResponse;
-  recent_activity: Activity[];
-  projects_summary: {
-    active: number;
-    total: number;
-    recent: Project[];
-  };
-  tasks_summary: {
-    open: number;
-    completed: number;
-    completion_rate: number;
-  };
-  team_summary: {
-    total: number;
-    active: number;
-  };
-}
-
-// ============================================================================
-// Error Handling
-// ============================================================================
-
-export class DashboardServiceError extends Error {
-  constructor(
-    message: string,
-    public statusCode?: number,
-    public originalError?: Error
-  ) {
-    super(message);
-    this.name = 'DashboardServiceError';
-  }
-}
-
-async function handleResponse<T>(response: Response): Promise<T> {
-  if (!response.ok) {
-    const errorText = await response.text().catch(() => 'Unknown error');
-    throw new DashboardServiceError(
-      `API request failed: ${response.statusText}`,
-      response.status,
-      new Error(errorText)
-    );
-  }
-
-  try {
-    return await response.json();
-  } catch (error) {
-    throw new DashboardServiceError(
-      'Failed to parse API response',
-      response.status,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-// ============================================================================
-// API Client
-// ============================================================================
-
-const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || '/api';
-
-/**
- * Fetch dashboard KPIs
- */
-export async function getKPIs(userId: string): Promise<KPIResponse> {
-  try {
-    const response = await fetch(
-      `${API_BASE_URL}/dashboard/kpis?userId=${encodeURIComponent(userId)}`,
-      {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        cache: 'no-store', // Always fetch fresh data
-      }
-    );
-
-    return await handleResponse<KPIResponse>(response);
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to fetch KPIs',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-/**
- * Fetch recent activity
- */
-export async function getRecentActivity(
-  userId: string,
-  limit: number = 10
-): Promise<Activity[]> {
-  try {
-    const response = await fetch(
-      `${API_BASE_URL}/dashboard/activity?userId=${encodeURIComponent(userId)}&limit=${limit}`,
-      {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        cache: 'no-store',
-      }
-    );
-
-    const data = await handleResponse<ActivityResponse>(response);
-    return data.activities;
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to fetch recent activity',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-/**
- * Fetch all projects for a user
- */
-export async function getProjects(userId: string): Promise<Project[]> {
-  try {
-    const response = await fetch(
-      `${API_BASE_URL}/projects?userId=${encodeURIComponent(userId)}`,
-      {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        cache: 'no-store',
-      }
-    );
-
-    const data = await handleResponse<ProjectResponse>(response);
-    return data.projects;
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to fetch projects',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-/**
- * Fetch tasks, optionally filtered by project
- */
-export async function getTasks(
-  userId: string,
-  projectId?: string
-): Promise<Task[]> {
-  try {
-    const url = projectId
-      ? `${API_BASE_URL}/tasks?userId=${encodeURIComponent(userId)}&projectId=${encodeURIComponent(projectId)}`
-      : `${API_BASE_URL}/tasks?userId=${encodeURIComponent(userId)}`;
-
-    const response = await fetch(url, {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      cache: 'no-store',
-    });
-
-    const data = await handleResponse<TaskResponse>(response);
-    return data.tasks;
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to fetch tasks',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-/**
- * Fetch team members
- */
-export async function getTeamMembers(userId: string): Promise<TeamMember[]> {
-  try {
-    const response = await fetch(
-      `${API_BASE_URL}/team?userId=${encodeURIComponent(userId)}`,
-      {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        cache: 'no-store',
-      }
-    );
-
-    const data = await handleResponse<TeamMemberResponse>(response);
-    return data.members;
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to fetch team members',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-/**
- * Fetch complete dashboard overview
- */
-export async function getDashboardOverview(
-  userId: string
-): Promise<DashboardOverviewResponse> {
-  try {
-    const response = await fetch(
-      `${API_BASE_URL}/dashboard/overview?userId=${encodeURIComponent(userId)}`,
-      {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        cache: 'no-store',
-      }
-    );
-
-    return await handleResponse<DashboardOverviewResponse>(response);
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to fetch dashboard overview',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-/**
- * Create a new project
- */
-export async function createProject(
-  userId: string,
-  data: Omit<Project, 'id' | 'createdAt' | 'updatedAt'>
-): Promise<Project> {
-  try {
-    const response = await fetch(`${API_BASE_URL}/projects`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ userId, ...data }),
-    });
-
-    return await handleResponse<Project>(response);
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to create project',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-/**
- * Update an existing project
- */
-export async function updateProject(
-  projectId: string,
-  data: Partial<Project>
-): Promise<Project> {
-  try {
-    const response = await fetch(`${API_BASE_URL}/projects/${projectId}`, {
-      method: 'PATCH',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(data),
-    });
-
-    return await handleResponse<Project>(response);
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to update project',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-/**
- * Delete a project
- */
-export async function deleteProject(projectId: string): Promise<void> {
-  try {
-    const response = await fetch(`${API_BASE_URL}/projects/${projectId}`, {
-      method: 'DELETE',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-
-    if (!response.ok) {
-      throw new DashboardServiceError(
-        `Failed to delete project: ${response.statusText}`,
-        response.status
-      );
-    }
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to delete project',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-/**
- * Create a new task
- */
-export async function createTask(
-  userId: string,
-  data: Omit<Task, 'id' | 'createdAt' | 'updatedAt'>
-): Promise<Task> {
-  try {
-    const response = await fetch(`${API_BASE_URL}/tasks`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ userId, ...data }),
-    });
-
-    return await handleResponse<Task>(response);
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to create task',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-/**
- * Update an existing task
- */
-export async function updateTask(
-  taskId: string,
-  data: Partial<Task>
-): Promise<Task> {
-  try {
-    const response = await fetch(`${API_BASE_URL}/tasks/${taskId}`, {
-      method: 'PATCH',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(data),
-    });
-
-    return await handleResponse<Task>(response);
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to update task',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-/**
- * Delete a task
- */
-export async function deleteTask(taskId: string): Promise<void> {
-  try {
-    const response = await fetch(`${API_BASE_URL}/tasks/${taskId}`, {
-      method: 'DELETE',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-
-    if (!response.ok) {
-      throw new DashboardServiceError(
-        `Failed to delete task: ${response.statusText}`,
-        response.status
-      );
-    }
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to delete task',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-/**
- * Invite a team member
- */
-export async function inviteTeamMember(
-  userId: string,
-  email: string,
-  role: TeamMember['role']
-): Promise<TeamMember> {
-  try {
-    const response = await fetch(`${API_BASE_URL}/team/invite`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ userId, email, role }),
-    });
-
-    return await handleResponse<TeamMember>(response);
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to invite team member',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-/**
- * Remove a team member
- */
-export async function removeTeamMember(memberId: string): Promise<void> {
-  try {
-    const response = await fetch(`${API_BASE_URL}/team/${memberId}`, {
-      method: 'DELETE',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-
-    if (!response.ok) {
-      throw new DashboardServiceError(
-        `Failed to remove team member: ${response.statusText}`,
-        response.status
-      );
-    }
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to remove team member',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}
-
-/**
- * Update team member role
- */
-export async function updateTeamMemberRole(
-  memberId: string,
-  role: TeamMember['role']
-): Promise<TeamMember> {
-  try {
-    const response = await fetch(`${API_BASE_URL}/team/${memberId}`, {
-      method: 'PATCH',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ role }),
-    });
-
-    return await handleResponse<TeamMember>(response);
-  } catch (error) {
-    if (error instanceof DashboardServiceError) {
-      throw error;
-    }
-    throw new DashboardServiceError(
-      'Failed to update team member role',
-      undefined,
-      error instanceof Error ? error : undefined
-    );
-  }
-}