create-bluecopa-react-app 1.0.4 → 1.0.6

package/templates/latest/src/App.tsx

@@ -1,15 +0,0 @@
-import { Routes, Route } from 'react-router-dom'
-import QueryProvider from '@/providers/query-provider'
-import Home from '@/pages/Home'
-import Dashboard from '@/pages/Dashboard'
-
-export default function App() {
-  return (
-    <QueryProvider>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/dashboard" element={<Dashboard />} />
-      </Routes>
-    </QueryProvider>
-  )
-}

package/templates/latest/src/components/layout/dashboard-header.tsx

@@ -1,139 +0,0 @@
-import { Bell, Search, User, Settings, LogOut, ChevronDown } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import { Input } from '@/components/ui/input'
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
-import { useUserData } from '@/hooks/use-api'
-
-interface DashboardHeaderProps {
-  title?: string
-  subtitle?: string
-}
-
-export default function DashboardHeader({ title, subtitle }: DashboardHeaderProps) {
-  const { data: userData, isLoading } = useUserData()
-
-  // Extract user from the API response structure
-  const user = userData?.user
-  const organization = userData?.organization
-
-  // Create display values with proper fallbacks
-  const getDisplayName = () => {
-    if (!user) return 'Loading...'
-    
-    // If firstName and lastName are the same as email, just use email
-    if (user.firstName === user.email && user.lastName === user.email) {
-      return user.email
-    }
-    
-    // Try to construct name from firstName and lastName
-    const fullName = `${user.firstName || ''} ${user.lastName || ''}`.trim()
-    return fullName || user.email
-  }
-  
-  const displayName = getDisplayName()
-  const displayRole = organization?.name || 'User' // Use organization name as role
-  const displayEmail = user?.email || 'loading@example.com'
-
-  // Show loading state in user info
-  if (isLoading) {
-    return (
-      <header className="bg-white border-b border-gray-200 px-6 py-4">
-        <div className="flex items-center justify-between">
-          <div className="flex-1">
-            {title && (
-              <div>
-                <h1 className="text-2xl font-semibold text-gray-900">{title}</h1>
-                {subtitle && <p className="text-sm text-gray-500 mt-1">{subtitle}</p>}
-              </div>
-            )}
-          </div>
-          <div className="flex items-center space-x-4">
-            <div className="text-sm text-gray-500">Loading user...</div>
-          </div>
-        </div>
-      </header>
-    )
-  }
-
-  return (
-    <header className="bg-white border-b border-gray-200 px-6 py-4">
-      <div className="flex items-center justify-between">
-        <div className="flex-1">
-          {title && (
-            <div>
-              <h1 className="text-2xl font-semibold text-gray-900">{title}</h1>
-              {subtitle && <p className="text-sm text-gray-500 mt-1">{subtitle}</p>}
-            </div>
-          )}
-        </div>
-
-        <div className="flex items-center space-x-4">
-          {/* Search */}
-          <div className="relative hidden md:block">
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
-            <Input
-              type="search"
-              placeholder="Search..."
-              className="w-80 pl-10 pr-4"
-            />
-          </div>
-
-          {/* Notifications */}
-          <Button variant="ghost" size="sm" className="relative">
-            <Bell className="h-5 w-5" />
-            <span className="absolute -top-1 -right-1 h-4 w-4 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">
-              3
-            </span>
-          </Button>
-
-          {/* User Menu */}
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="ghost" className="flex items-center space-x-2 p-2">
-                <Avatar className="h-8 w-8">
-                  <AvatarImage src={undefined} alt={displayName} />
-                  <AvatarFallback>{displayName.split(' ').map((n: string) => n[0]).join('')}</AvatarFallback>
-                </Avatar>
-                <div className="hidden md:block text-left">
-                  <p className="text-sm font-medium text-gray-900">{displayName}</p>
-                  <p className="text-xs text-gray-500">{displayRole}</p>
-                </div>
-                <ChevronDown className="h-4 w-4 text-gray-400" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-56">
-              <DropdownMenuLabel>
-                <div>
-                  <p className="font-medium">{displayName}</p>
-                  <p className="text-xs text-gray-500">{displayEmail}</p>
-                </div>
-              </DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>
-                <User className="mr-2 h-4 w-4" />
-                Profile
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <Settings className="mr-2 h-4 w-4" />
-                Settings
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem className="text-red-600">
-                <LogOut className="mr-2 h-4 w-4" />
-                Sign out
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      </div>
-    </header>
-  )
-}

package/templates/latest/src/components/layout/dashboard-layout.tsx

@@ -1,29 +0,0 @@
-import { ReactNode } from 'react'
-import Sidebar from './sidebar'
-import DashboardHeader from './dashboard-header'
-
-interface DashboardLayoutProps {
-  children: ReactNode
-  title?: string
-  subtitle?: string
-}
-
-export default function DashboardLayout({ children, title, subtitle }: DashboardLayoutProps) {
-  return (
-    <div className="flex h-screen bg-gray-50">
-      {/* Sidebar */}
-      <Sidebar />
-      
-      {/* Main content area */}
-      <div className="flex-1 flex flex-col overflow-hidden">
-        {/* Header */}
-        <DashboardHeader title={title} subtitle={subtitle} />
-        
-        {/* Main content */}
-        <main className="flex-1 overflow-y-auto p-6">
-          {children}
-        </main>
-      </div>
-    </div>
-  )
-}

package/templates/latest/src/components/layout/sidebar.tsx

@@ -1,54 +0,0 @@
-import { Link, useLocation } from "react-router-dom";
-import { cn } from "@/lib/utils";
-import { Home, LayoutDashboard } from "lucide-react";
-import { BluecopaLogo } from "../ui/bluecopa-logo";
-
-const navigation = [
-  { name: "Home", href: "/", icon: Home },
-  { name: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
-];
-
-export default function Sidebar() {
-  const location = useLocation();
-
-  return (
-    <div className="flex h-full w-64 flex-col bg-white border-r border-gray-200">
-      {/* Logo */}
-      <div className="flex h-16 items-center px-6 border-b border-gray-200">
-        <Link to="/" className="flex items-center space-x-2">
-          <BluecopaLogo className="h-6 w-6 text-white" />
-          <span className="text-xl font-bold text-gray-900">Bluecopa</span>
-        </Link>
-      </div>
-
-      {/* Navigation */}
-      <nav className="flex-1 space-y-1 px-3 py-4">
-        {navigation.map((item) => {
-          const isActive = location.pathname === item.href;
-          return (
-            <Link
-              key={item.name}
-              to={item.href}
-              className={cn(
-                "group flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors",
-                isActive
-                  ? "bg-blue-50 text-blue-700 border-r-2 border-blue-600"
-                  : "text-gray-700 hover:bg-gray-50 hover:text-gray-900"
-              )}
-            >
-              <item.icon
-                className={cn(
-                  "mr-3 h-5 w-5 flex-shrink-0",
-                  isActive
-                    ? "text-blue-600"
-                    : "text-gray-400 group-hover:text-gray-500"
-                )}
-              />
-              {item.name}
-            </Link>
-          );
-        })}
-      </nav>
-    </div>
-  );
-}