create-bluecopa-react-app 1.0.4 → 1.0.6

package/templates/latest/src/pages/Home.tsx

@@ -1,622 +0,0 @@
-import { Link } from "react-router-dom";
-import { useState } from "react";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Select } from "@/components/ui/select";
-import {
-  ArrowRight,
-  BarChart3,
-  Package,
-  Mail,
-  Star,
-  Truck,
-  Users,
-  ShoppingCart,
-  CreditCard,
-  FileText,
-} from "lucide-react";
-import { BluecopaLogo } from "@/components/ui/bluecopa-logo";
-import { useUserData } from "@/hooks/use-api";
-
-const stats = [
-  { name: "Automated Processes", value: "284", change: "+12%", trend: "up" },
-  { name: "Time Saved", value: "1,230 hrs", change: "+8%", trend: "up" },
-  { name: "Accuracy Rate", value: "99.8%", change: "+0.5%", trend: "up" },
-  {
-    name: "Processing Speed",
-    value: "85% faster",
-    change: "+12%",
-    trend: "up",
-  },
-];
-
-export default function Home() {
-  const { data: userData } = useUserData();
-
-  // Form states
-  const [contactForm, setContactForm] = useState({
-    name: '',
-    email: '',
-    message: ''
-  });
-
-  const [productForm, setProductForm] = useState({
-    name: '',
-    category: '',
-    price: '',
-    description: ''
-  });
-
-  const [customerForm, setCustomerForm] = useState({
-    firstName: '',
-    lastName: '',
-    email: '',
-    phone: '',
-    company: ''
-  });
-
-  // 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
-
-  return (
-     <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
-      {/* Header with user info */}
-      <header className="bg-white 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 items-center h-16">
-            <div className="flex items-center space-x-4">
-              <BluecopaLogo className="h-6 w-6 text-white" />
-              <div>
-                <h1 className="text-xl font-bold text-gray-900">Bluecopa</h1>
-                <p className="text-sm text-gray-500">Your analytics platform</p>
-              </div>
-            </div>
-
-            <div className="flex items-center space-x-4">
-              <div className="text-right">
-                <p className="text-sm font-medium text-gray-900">
-                  {displayName}
-                </p>
-                <p className="text-xs text-gray-500">{displayRole}</p>
-              </div>
-              <div className="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center">
-                <span className="text-sm font-medium text-gray-600">
-                  {displayName
-                    .split(" ")
-                    .map((n: string) => n[0])
-                    .join("")}
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </header>
-
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {/* Hero Section */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold text-gray-900 mb-4">
-            Welcome to Bluecopa
-          </h1>
-          <p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">
-            AI-powered close automation for modern finance teams. Streamline
-            your order-to-cash, procure-to-pay, and record-to-report processes
-            with intelligent automation and real-time insights.
-          </p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <Link to="/dashboard">
-              <Button size="lg" className="bg-blue-600 hover:bg-blue-700">
-                Go to Dashboard
-                <ArrowRight className="ml-2 h-4 w-4" />
-              </Button>
-            </Link>
-            <Button variant="outline" size="lg">
-              Request Demo
-            </Button>
-          </div>
-        </div>
-
-        {/* Stats Overview */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
-          {stats.map((stat, index) => (
-            <Card key={index}>
-              <CardContent className="pt-6">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="text-sm font-medium text-gray-600">
-                      {stat.name}
-                    </p>
-                    <p className="text-2xl font-bold text-gray-900">
-                      {stat.value}
-                    </p>
-                  </div>
-                  <div
-                    className={`text-sm font-medium ${
-                      stat.trend === "up" ? "text-green-600" : "text-red-600"
-                    }`}
-                  >
-                    {stat.change}
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-
-        {/* Recent Activity & Quick Actions */}
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-          <Card>
-            <CardHeader>
-              <CardTitle>Recent Orders</CardTitle>
-              <CardDescription>
-                Latest customer orders requiring attention
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-4">
-                <div className="flex items-center justify-between p-3 bg-gray-50 rounded">
-                  <div>
-                    <p className="font-medium">#ORD-2847</p>
-                    <p className="text-sm text-gray-500">John Doe - $156.99</p>
-                  </div>
-                  <div className="flex items-center space-x-2">
-                    <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">
-                      Paid
-                    </span>
-                    <Truck className="h-4 w-4 text-gray-400" />
-                  </div>
-                </div>
-                <div className="flex items-center justify-between p-3 bg-gray-50 rounded">
-                  <div>
-                    <p className="font-medium">#ORD-2846</p>
-                    <p className="text-sm text-gray-500">Jane Smith - $89.50</p>
-                  </div>
-                  <div className="flex items-center space-x-2">
-                    <span className="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">
-                      Processing
-                    </span>
-                    <Package className="h-4 w-4 text-gray-400" />
-                  </div>
-                </div>
-                <div className="flex items-center justify-between p-3 bg-gray-50 rounded">
-                  <div>
-                    <p className="font-medium">#ORD-2845</p>
-                    <p className="text-sm text-gray-500">
-                      Mike Johnson - $234.75
-                    </p>
-                  </div>
-                  <div className="flex items-center space-x-2">
-                    <span className="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">
-                      Shipped
-                    </span>
-                    <Star className="h-4 w-4 text-yellow-400" />
-                  </div>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle>Quick Actions</CardTitle>
-              <CardDescription>
-                Common tasks to help you manage your store
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="grid grid-cols-2 gap-4">
-                <Button
-                  variant="outline"
-                  className="h-20 flex flex-col items-center justify-center"
-                >
-                  <Package className="h-6 w-6 mb-2" />
-                  <span>Add Product</span>
-                </Button>
-                <Button
-                  variant="outline"
-                  className="h-20 flex flex-col items-center justify-center"
-                >
-                  <Users className="h-6 w-6 mb-2" />
-                  <span>Add Customer</span>
-                </Button>
-                <Button
-                  variant="outline"
-                  className="h-20 flex flex-col items-center justify-center"
-                >
-                  <BarChart3 className="h-6 w-6 mb-2" />
-                  <span>View Reports</span>
-                </Button>
-                <Button
-                  variant="outline"
-                  className="h-20 flex flex-col items-center justify-center"
-                >
-                  <ShoppingCart className="h-6 w-6 mb-2" />
-                  <span>Process Order</span>
-                </Button>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-
-        {/* Form Components Section */}
-        <div className="mt-12">
-          <div className="text-center mb-8">
-            <h2 className="text-3xl font-bold text-gray-900 mb-4">
-              Form Components Sample
-            </h2>
-            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
-              Sample forms demonstrating various input components and layouts
-            </p>
-          </div>
-
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-            {/* Contact Form */}
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center">
-                  <Mail className="h-5 w-5 mr-2 text-blue-600" />
-                  Contact Form
-                </CardTitle>
-                <CardDescription>
-                  Basic contact form with validation
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div>
-                  <Label htmlFor="contact-name">Name</Label>
-                  <Input
-                    id="contact-name"
-                    placeholder="Enter your name"
-                    value={contactForm.name}
-                    onChange={(e) =>
-                      setContactForm({ ...contactForm, name: e.target.value })
-                    }
-                  />
-                </div>
-                <div>
-                  <Label htmlFor="contact-email">Email</Label>
-                  <Input
-                    id="contact-email"
-                    type="email"
-                    placeholder="Enter your email"
-                    value={contactForm.email}
-                    onChange={(e) =>
-                      setContactForm({ ...contactForm, email: e.target.value })
-                    }
-                  />
-                </div>
-                <div>
-                  <Label htmlFor="contact-message">Message</Label>
-                  <textarea
-                    id="contact-message"
-                    className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-                    placeholder="Type your message here..."
-                    value={contactForm.message}
-                    onChange={(e) =>
-                      setContactForm({
-                        ...contactForm,
-                        message: e.target.value,
-                      })
-                    }
-                  />
-                </div>
-                <Button className="w-full bg-blue-600 hover:bg-blue-700">
-                  <Mail className="mr-2 h-4 w-4" />
-                  Send Message
-                </Button>
-              </CardContent>
-            </Card>
-
-            {/* Product Form */}
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center">
-                  <Package className="h-5 w-5 mr-2 text-green-600" />
-                  Add Product
-                </CardTitle>
-                <CardDescription>
-                  Product creation form with select dropdown
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div>
-                  <Label htmlFor="product-name">Product Name</Label>
-                  <Input
-                    id="product-name"
-                    placeholder="Enter product name"
-                    value={productForm.name}
-                    onChange={(e) =>
-                      setProductForm({ ...productForm, name: e.target.value })
-                    }
-                  />
-                </div>
-                <div>
-                  <Label htmlFor="product-category">Category</Label>
-                  <Select
-                    id="product-category"
-                    value={productForm.category}
-                    onChange={(e) =>
-                      setProductForm({
-                        ...productForm,
-                        category: e.target.value,
-                      })
-                    }
-                  >
-                    <option value="">Select a category</option>
-                    <option value="electronics">Electronics</option>
-                    <option value="clothing">Clothing</option>
-                    <option value="books">Books</option>
-                    <option value="home">Home & Garden</option>
-                    <option value="sports">Sports</option>
-                  </Select>
-                </div>
-                <div>
-                  <Label htmlFor="product-price">Price</Label>
-                  <Input
-                    id="product-price"
-                    type="number"
-                    placeholder="0.00"
-                    value={productForm.price}
-                    onChange={(e) =>
-                      setProductForm({ ...productForm, price: e.target.value })
-                    }
-                  />
-                </div>
-                <div>
-                  <Label htmlFor="product-description">Description</Label>
-                  <textarea
-                    id="product-description"
-                    className="flex min-h-[60px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-                    placeholder="Product description..."
-                    value={productForm.description}
-                    onChange={(e) =>
-                      setProductForm({
-                        ...productForm,
-                        description: e.target.value,
-                      })
-                    }
-                  />
-                </div>
-                <Button className="w-full bg-green-600 hover:bg-green-700">
-                  <Package className="mr-2 h-4 w-4" />
-                  Add Product
-                </Button>
-              </CardContent>
-            </Card>
-
-            {/* Customer Form */}
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center">
-                  <Users className="h-5 w-5 mr-2 text-purple-600" />
-                  Customer Details
-                </CardTitle>
-                <CardDescription>
-                  Customer information form with multiple fields
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="grid grid-cols-2 gap-4">
-                  <div>
-                    <Label htmlFor="customer-firstname">First Name</Label>
-                    <Input
-                      id="customer-firstname"
-                      placeholder="First name"
-                      value={customerForm.firstName}
-                      onChange={(e) =>
-                        setCustomerForm({
-                          ...customerForm,
-                          firstName: e.target.value,
-                        })
-                      }
-                    />
-                  </div>
-                  <div>
-                    <Label htmlFor="customer-lastname">Last Name</Label>
-                    <Input
-                      id="customer-lastname"
-                      placeholder="Last name"
-                      value={customerForm.lastName}
-                      onChange={(e) =>
-                        setCustomerForm({
-                          ...customerForm,
-                          lastName: e.target.value,
-                        })
-                      }
-                    />
-                  </div>
-                </div>
-                <div>
-                  <Label htmlFor="customer-email">Email</Label>
-                  <Input
-                    id="customer-email"
-                    type="email"
-                    placeholder="customer@example.com"
-                    value={customerForm.email}
-                    onChange={(e) =>
-                      setCustomerForm({
-                        ...customerForm,
-                        email: e.target.value,
-                      })
-                    }
-                  />
-                </div>
-                <div>
-                  <Label htmlFor="customer-phone">Phone</Label>
-                  <Input
-                    id="customer-phone"
-                    type="tel"
-                    placeholder="+1 (555) 123-4567"
-                    value={customerForm.phone}
-                    onChange={(e) =>
-                      setCustomerForm({
-                        ...customerForm,
-                        phone: e.target.value,
-                      })
-                    }
-                  />
-                </div>
-                <div>
-                  <Label htmlFor="customer-company">Company</Label>
-                  <Input
-                    id="customer-company"
-                    placeholder="Company name (optional)"
-                    value={customerForm.company}
-                    onChange={(e) =>
-                      setCustomerForm({
-                        ...customerForm,
-                        company: e.target.value,
-                      })
-                    }
-                  />
-                </div>
-                <Button className="w-full bg-purple-600 hover:bg-purple-700">
-                  <Users className="mr-2 h-4 w-4" />
-                  Save Customer
-                </Button>
-              </CardContent>
-            </Card>
-          </div>
-
-          {/* Additional Form Examples */}
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-8">
-            {/* Payment Form */}
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center">
-                  <CreditCard className="h-5 w-5 mr-2 text-indigo-600" />
-                  Payment Information
-                </CardTitle>
-                <CardDescription>
-                  Credit card and billing details form
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div>
-                  <Label htmlFor="card-number">Card Number</Label>
-                  <Input
-                    id="card-number"
-                    placeholder="1234 5678 9012 3456"
-                    maxLength={19}
-                  />
-                </div>
-                <div className="grid grid-cols-2 gap-4">
-                  <div>
-                    <Label htmlFor="expiry">Expiry Date</Label>
-                    <Input id="expiry" placeholder="MM/YY" maxLength={5} />
-                  </div>
-                  <div>
-                    <Label htmlFor="cvv">CVV</Label>
-                    <Input id="cvv" placeholder="123" maxLength={4} />
-                  </div>
-                </div>
-                <div>
-                  <Label htmlFor="cardholder">Cardholder Name</Label>
-                  <Input id="cardholder" placeholder="John Doe" />
-                </div>
-                <Button className="w-full bg-indigo-600 hover:bg-indigo-700">
-                  <CreditCard className="mr-2 h-4 w-4" />
-                  Process Payment
-                </Button>
-              </CardContent>
-            </Card>
-
-            {/* Settings Form */}
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center">
-                  <FileText className="h-5 w-5 mr-2 text-orange-600" />
-                  Settings Form
-                </CardTitle>
-                <CardDescription>
-                  Configuration form with checkboxes and switches
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div>
-                  <Label htmlFor="store-name">Store Name</Label>
-                  <Input id="store-name" placeholder="Your Store Name" />
-                </div>
-                <div>
-                  <Label htmlFor="timezone">Timezone</Label>
-                  <Select id="timezone">
-                    <option value="">Select timezone</option>
-                    <option value="utc">UTC</option>
-                    <option value="est">Eastern Standard Time</option>
-                    <option value="pst">Pacific Standard Time</option>
-                    <option value="cst">Central Standard Time</option>
-                  </Select>
-                </div>
-                <div className="space-y-3">
-                  <Label>Notifications</Label>
-                  <div className="space-y-2">
-                    <div className="flex items-center space-x-2">
-                      <input
-                        type="checkbox"
-                        id="email-notifications"
-                        className="rounded"
-                      />
-                      <Label htmlFor="email-notifications" className="text-sm">
-                        Email notifications
-                      </Label>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <input
-                        type="checkbox"
-                        id="sms-notifications"
-                        className="rounded"
-                      />
-                      <Label htmlFor="sms-notifications" className="text-sm">
-                        SMS notifications
-                      </Label>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <input
-                        type="checkbox"
-                        id="push-notifications"
-                        className="rounded"
-                      />
-                      <Label htmlFor="push-notifications" className="text-sm">
-                        Push notifications
-                      </Label>
-                    </div>
-                  </div>
-                </div>
-                <Button className="w-full bg-orange-600 hover:bg-orange-700">
-                  <FileText className="mr-2 h-4 w-4" />
-                  Save Settings
-                </Button>
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/templates/latest/src/providers/query-provider.tsx

@@ -1,48 +0,0 @@
-import { ReactQueryDevtools, reactQuery, copaSetConfig } from "@bluecopa/react";
-import { useEffect, useState } from "react";
-
-const { QueryClient, QueryClientProvider } = reactQuery;
-
-export default function QueryProvider({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const [queryClient] = useState(
-    () =>
-      new QueryClient({
-        defaultOptions: {
-          queries: {
-            staleTime: 60 * 1000, // 1 minute
-            refetchOnWindowFocus: false,
-          },
-        },
-      })
-  );
-
-  useEffect(() => {
-    let copaUser: any = {};
-    try {
-      const copaToken = import.meta.env.VITE_BLUECOPA_API_TOKEN
-        ? atob(import.meta.env.VITE_BLUECOPA_API_TOKEN)
-        : "{}";
-      
-      copaUser = JSON.parse(copaToken);
-    } catch (error) {
-      console.warn("Failed to parse VITE_BLUECOPA_API_TOKEN:", error);
-    }
-
-    copaSetConfig({
-      apiBaseUrl: import.meta.env.VITE_BLUECOPA_API_URL || "https://develop.bluecopa.com/api/v1",
-      workspaceId: import.meta.env.VITE_BLUECOPA_WORKSPACE_ID || "",
-      accessToken: copaUser?.accessToken || "",
-    });
-  }, []);
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      {children}
-      <ReactQueryDevtools initialIsOpen={false} />
-    </QueryClientProvider>
-  );
-}