create-bluecopa-react-app 1.0.5 → 1.0.6

package/templates/latest/src/App.tsx

@@ -1,19 +0,0 @@
-import { Routes, Route, Navigate } from 'react-router-dom'
-import { Suspense, lazy } from 'react'
-import QueryProvider from '@/providers/query-provider'
-import Home from '@/pages/Home'
-const Dashboard = lazy(() => import('@/pages/Dashboard'))
-
-export default function App() {
-  return (
-    <QueryProvider>
-      <Suspense fallback={<div className="p-4 text-sm text-muted-foreground">Loading…</div>}>
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/dashboard" element={<Dashboard />} />
-          <Route path="*" element={<Navigate to="/" replace />} />
-        </Routes>
-      </Suspense>
-    </QueryProvider>
-  )
-}

package/templates/latest/src/components/charts/AreaChart.tsx

@@ -1,80 +0,0 @@
-import React from 'react';
-import { 
-  ResponsiveContainer,
-  AreaChart as RechartsAreaChart,
-  Area,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend
-} from 'recharts';
-
-interface AreaChartProps {
-  data: any[];
-  index: string;
-  categories: string[];
-  colors?: string[];
-  className?: string;
-  valueFormatter?: (value: any) => any;
-  showLegend?: boolean;
-  showGridLines?: boolean;
-  showXAxis?: boolean;
-  showYAxis?: boolean;
-  yAxisWidth?: number;
-}
-
-export const AreaChart: React.FC<AreaChartProps> = ({ 
-  data, 
-  index, 
-  categories, 
-  colors = ['#3B82F6'], 
-  className = "h-80",
-  valueFormatter,
-  showLegend = true,
-  showGridLines = true,
-  showXAxis = true,
-  showYAxis = true,
-  yAxisWidth
-}) => {
-  const colorMap: { [key: string]: string } = {
-    blue: '#3B82F6',
-    emerald: '#10B981',
-    violet: '#8B5CF6',
-    rose: '#F43F5E',
-    amber: '#F59E0B',
-    cyan: '#06B6D4',
-    slate: '#64748B',
-    indigo: '#6366F1'
-  };
-
-  const getColor = (color: string, index: number) => {
-    return colorMap[color] || colors[index] || '#3B82F6';
-  };
-
-  return (
-    <div className={className}>
-      <ResponsiveContainer width="100%" height="100%">
-        <RechartsAreaChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
-          {showGridLines && <CartesianGrid strokeDasharray="3 3" />}
-          {showXAxis && <XAxis dataKey={index} />}
-          {showYAxis && <YAxis width={yAxisWidth || 60} />}
-          <Tooltip 
-            formatter={(value: any) => valueFormatter ? valueFormatter(value) : value}
-          />
-          {showLegend && <Legend />}
-          {categories?.map((category: string, idx: number) => (
-            <Area
-              key={category}
-              type="monotone"
-              dataKey={category}
-              stroke={getColor(colors[idx], idx)}
-              fill={getColor(colors[idx], idx)}
-              fillOpacity={0.3}
-            />
-          ))}
-        </RechartsAreaChart>
-      </ResponsiveContainer>
-    </div>
-  );
-};

package/templates/latest/src/components/charts/DonutChart.tsx

@@ -1,73 +0,0 @@
-import React from 'react';
-import { 
-  ResponsiveContainer,
-  PieChart,
-  Pie,
-  Cell,
-  Tooltip,
-  Legend
-} from 'recharts';
-
-interface DonutChartProps {
-  data: any[];
-  category: string;
-  index: string;
-  colors?: string[];
-  className?: string;
-  valueFormatter?: (value: any) => any;
-  variant?: "donut" | "pie";
-}
-
-export const DonutChart: React.FC<DonutChartProps> = ({ 
-  data, 
-  category, 
-  index, 
-  colors = ['#3B82F6'], 
-  className = "h-64",
-  valueFormatter,
-  variant = "donut"
-}) => {
-  const colorMap: { [key: string]: string } = {
-    blue: '#3B82F6',
-    emerald: '#10B981',
-    violet: '#8B5CF6',
-    rose: '#F43F5E',
-    amber: '#F59E0B',
-    cyan: '#06B6D4',
-    slate: '#64748B',
-    indigo: '#6366F1'
-  };
-
-  const getColor = (color: string, index: number) => {
-    return colorMap[color] || colors[index] || '#3B82F6';
-  };
-
-  const COLORS = colors.map((color: string, idx: number) => getColor(color, idx));
-
-  return (
-    <div className={className}>
-      <ResponsiveContainer width="100%" height="100%">
-        <PieChart>
-          <Pie
-            data={data}
-            cx="50%"
-            cy="50%"
-            innerRadius={variant === "donut" ? 60 : 0}
-            outerRadius={80}
-            paddingAngle={5}
-            dataKey={category}
-            nameKey={index}
-          >
-            {data.map((_entry: any, index: number) => (
-              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
-            ))}
-          </Pie>
-          <Tooltip 
-            formatter={(value: any) => valueFormatter ? valueFormatter(value) : value}
-          />
-          <Legend />
-        </PieChart>
-      </ResponsiveContainer>
-    </div>
-  );
-};

package/templates/latest/src/components/charts/SparkAreaChart.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import { 
-  ResponsiveContainer,
-  AreaChart as RechartsAreaChart,
-  Area
-} from 'recharts';
-
-interface SparkAreaChartProps {
-  data: any[];
-  categories: string[];
-  colors?: string[];
-  className?: string;
-}
-
-export const SparkAreaChart: React.FC<SparkAreaChartProps> = ({ 
-  data, 
-  categories, 
-  colors = ['#3B82F6'], 
-  className = "h-10"
-}) => {
-  const colorMap: { [key: string]: string } = {
-    blue: '#3B82F6',
-    emerald: '#10B981',
-    violet: '#8B5CF6',
-    rose: '#F43F5E',
-    amber: '#F59E0B',
-    cyan: '#06B6D4'
-  };
-
-  const getColor = (color: string, index: number) => {
-    return colorMap[color] || colors[index] || '#3B82F6';
-  };
-
-  return (
-    <div className={className}>
-      <ResponsiveContainer width="100%" height="100%">
-        <RechartsAreaChart data={data} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
-          {categories?.map((category: string, idx: number) => (
-            <Area
-              key={category}
-              type="monotone"
-              dataKey={category}
-              stroke={getColor(colors[idx], idx)}
-              fill={getColor(colors[idx], idx)}
-              fillOpacity={0.6}
-            />
-          ))}
-        </RechartsAreaChart>
-      </ResponsiveContainer>
-    </div>
-  );
-};

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" aria-label="Open notifications, 3 unread">
-            <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,37 +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
-          id="main-content"
-          role="main"
-          className="flex-1 overflow-y-auto p-6"
-        >
-          {children}
-        </main>
-      </div>
-    </div>
-  );
-}

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

@@ -1,106 +0,0 @@
-import { Link, useLocation } from 'react-router-dom'
-import { cn } from '@/lib/utils'
-import { 
-  Home, 
-  LayoutDashboard, 
-  Menu,
-  X
-} from 'lucide-react'
-import { useState } from 'react'
-import { BluecopaLogo } from "@/components/ui/bluecopa-logo";
-
-const navigation = [
-  { name: 'Home', href: '/', icon: Home },
-  { name: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
-]
-
-export default function Navbar() {
-  const location = useLocation()
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
-
-  return (
-    <nav className="bg-[#041e42] border-b border-gray-200 sticky top-0 z-50">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex justify-between h-16">
-          <div className="flex">
-            {/* Logo */}
-            <div className="flex-shrink-0 flex items-center">
-              <Link to="/" className="flex items-center space-x-2">
-                <BluecopaLogo className="h-6 w-6 text-white" />
-                <span className="text-xl font-bold text-white">Bluecopa</span>
-              </Link>
-            </div>
-            
-            {/* Desktop Navigation */}
-            <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
-              {navigation.map((item) => {
-                const isActive = location.pathname === item.href
-                return (
-                  <Link
-                    key={item.name}
-                    to={item.href}
-                    className={cn(
-                      'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors',
-                      isActive
-                        ? 'border-blue-400 text-white'
-                        : 'border-transparent text-blue-200 hover:border-blue-300 hover:text-white'
-                    )}
-                  >
-                    <item.icon className="h-4 w-4 mr-2" />
-                    {item.name}
-                  </Link>
-                )
-              })}
-            </div>
-          </div>
-
-          {/* Mobile menu button */}
-          <div className="sm:hidden flex items-center">
-            <button
-              type="button"
-              className="inline-flex items-center justify-center p-2 rounded-md text-blue-200 hover:text-white hover:bg-blue-700"
-              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-              aria-label={mobileMenuOpen ? "Close menu" : "Open menu"}
-              aria-expanded={mobileMenuOpen}
-            >
-              {mobileMenuOpen ? (
-                <X className="h-6 w-6" />
-              ) : (
-                <Menu className="h-6 w-6" />
-              )}
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {/* Mobile menu */}
-      {mobileMenuOpen && (
-        <div className="sm:hidden">
-          <div className="pt-2 pb-3 space-y-1 bg-[#041e42]">
-            {navigation.map((item) => {
-              const isActive = location.pathname === item.href
-              return (
-                <Link
-                  key={item.name}
-                  to={item.href}
-                  className={cn(
-                    'block pl-3 pr-4 py-2 text-base font-medium transition-colors',
-                    isActive
-                      ? 'bg-blue-700 border-r-4 border-blue-400 text-white'
-                      : 'text-blue-200 hover:text-white hover:bg-blue-700'
-                  )}
-                  onClick={() => setMobileMenuOpen(false)}
-                >
-                  <div className="flex items-center">
-                    <item.icon className="h-5 w-5 mr-3" />
-                    {item.name}
-                  </div>
-                </Link>
-              )
-            })}
-          </div>
-        </div>
-      )}
-    </nav>
-  )
-}

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

@@ -1,55 +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" aria-label="Main navigation">
-        {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"
-              )}
-              aria-current={isActive ? "page" : undefined}
-            >
-              <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>
-  );
-}

package/templates/latest/src/components/page/dashboard/DashboardMetrics.tsx

@@ -1,97 +0,0 @@
-import React from 'react';
-import { Card, CardContent, CardTitle } from '@/components/ui/card';
-import { ArrowUpRight, ArrowDownRight } from 'lucide-react';
-import { SparkAreaChart } from '@/components/charts/SparkAreaChart';
-
-interface Metric {
-  title: string;
-  value: string;
-  change: string;
-  trend: 'up' | 'down';
-  icon: string;
-  color: string;
-}
-
-interface DashboardMetricsProps {
-  ecommerceMetrics: Metric[];
-  monthlyRevenueData: any[];
-}
-
-const iconMap: { [key: string]: React.ElementType } = {
-  DollarSign: ({ className }: { className?: string }) => (
-    <svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      <line x1="12" y1="1" x2="12" y2="23"></line>
-      <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
-    </svg>
-  ),
-  ShoppingCart: ({ className }: { className?: string }) => (
-    <svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      <circle cx="9" cy="21" r="1"></circle>
-      <circle cx="20" cy="21" r="1"></circle>
-      <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
-    </svg>
-  ),
-  TrendingUp: ({ className }: { className?: string }) => (
-    <svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
-      <polyline points="17 6 23 6 23 12"></polyline>
-    </svg>
-  ),
-  Users: ({ className }: { className?: string }) => (
-    <svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
-      <circle cx="9" cy="7" r="4"></circle>
-      <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
-      <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
-    </svg>
-  )
-};
-
-export const DashboardMetrics: React.FC<DashboardMetricsProps> = ({
-  ecommerceMetrics,
-  monthlyRevenueData
-}) => {
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-      {ecommerceMetrics.map((metric, index) => {
-        const IconComponent = iconMap[metric.icon];
-        return (
-          <Card key={index}>
-            <CardContent className="pt-6">
-              <div className="flex items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium text-gray-600">
-                  {metric.title}
-                </CardTitle>
-                {IconComponent && <IconComponent className={`h-4 w-4 ${metric.color}`} />}
-              </div>
-              <div className="flex items-center space-x-2">
-                <div className="text-2xl font-bold">{metric.value}</div>
-                <div className={`flex items-center text-sm ${
-                  metric.trend === 'up' ? 'text-green-600' : 'text-red-600'
-                }`}>
-                  {metric.trend === 'up' ? (
-                    <ArrowUpRight className="h-4 w-4" />
-                  ) : (
-                    <ArrowDownRight className="h-4 w-4" />
-                  )}
-                  {metric.change}
-                </div>
-              </div>
-              {/* Mini trend chart */}
-              {monthlyRevenueData.length > 0 && (
-                <div className="mt-4">
-                  <SparkAreaChart
-                    data={monthlyRevenueData.slice(-6)} // Last 6 months
-                    categories={[index === 0 ? "revenue" : "orders"]}
-                    colors={[index === 0 ? "emerald" : index === 1 ? "blue" : index === 2 ? "violet" : "amber"]}
-                    className="h-10 w-full"
-                  />
-                </div>
-              )}
-            </CardContent>
-          </Card>
-        );
-      })}
-    </div>
-  );
-};