@nebulit/embuilder 0.1.39

package/templates/frontend/src/pages/Menus.tsx

@@ -0,0 +1,224 @@
+import { useState } from "react";
+import { DashboardLayout } from "@/components/layout/DashboardLayout";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Card, CardContent } from "@/components/ui/card";
+import { Plus, Trash2, Download, FileText, Loader2 } from "lucide-react";
+import { Menu } from "@/types";
+import { Badge } from "@/components/ui/badge";
+import { toast } from "sonner";
+import { useMenus, useUploadMenu, useDeleteMenu } from "@/hooks/api";
+import { Skeleton } from "@/components/ui/skeleton";
+
+const documentTypes = [
+  { value: "primary", label: "Primary" },
+  { value: "secondary", label: "Secondary" },
+  { value: "report", label: "Report" },
+  { value: "template", label: "Template" },
+  { value: "archive", label: "Archive" },
+  { value: "other", label: "Other" },
+];
+
+export default function Menus() {
+  const { data: menus = [], isLoading, error } = useMenus();
+  const uploadMenuMutation = useUploadMenu();
+  const deleteMenuMutation = useDeleteMenu();
+
+  const [isAddOpen, setIsAddOpen] = useState(false);
+  const [formData, setFormData] = useState({
+    menuName: "",
+    menuType: "",
+    file: "",
+  });
+
+  const handleAddMenu = async () => {
+    if (!formData.menuName || !formData.menuType) {
+      toast.error("Please fill in all required fields");
+      return;
+    }
+
+    try {
+      await uploadMenuMutation.mutateAsync({
+        menuName: formData.menuName,
+        menuType: formData.menuType,
+        file: formData.file,
+        restaurantId: "", // Will be set from context headers
+      });
+      setFormData({ menuName: "", menuType: "", file: "" });
+      setIsAddOpen(false);
+      toast.success("Document uploaded successfully");
+    } catch (err) {
+      toast.error(`Error: ${err instanceof Error ? err.message : "Unknown error"}`);
+    }
+  };
+
+  const deleteMenu = async (menu: Menu) => {
+    try {
+      await deleteMenuMutation.mutateAsync(menu.menuId);
+      toast.success(`"${menu.menuName}" deleted`);
+    } catch (err) {
+      toast.error(`Error: ${err instanceof Error ? err.message : "Unknown error"}`);
+    }
+  };
+
+  const getTypeColor = (type: string) => {
+    const colors: Record<string, string> = {
+      primary: "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300",
+      secondary: "bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300",
+      report: "bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300",
+      template: "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300",
+      archive: "bg-pink-100 text-pink-800 dark:bg-pink-900/30 dark:text-pink-300",
+      other: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300",
+    };
+    return colors[type] || "bg-muted text-muted-foreground";
+  };
+
+  const getTypeLabel = (type: string) => {
+    const docType = documentTypes.find((t) => t.value === type);
+    return docType?.label || type;
+  };
+
+  if (error) {
+    return (
+      <DashboardLayout title="Documents" subtitle="Manage your documents">
+        <div className="flex flex-col items-center justify-center py-12 text-center">
+          <p className="text-destructive">Error loading: {error.message}</p>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Check the API settings (Settings icon in the header)
+          </p>
+        </div>
+      </DashboardLayout>
+    );
+  }
+
+  return (
+    <DashboardLayout title="Documents" subtitle="Manage your documents">
+      <div className="mb-6 flex items-center justify-between">
+        <p className="text-muted-foreground">
+          {isLoading ? "Loading..." : `${menus.length} document${menus.length !== 1 ? "s" : ""} uploaded`}
+        </p>
+        <Dialog open={isAddOpen} onOpenChange={setIsAddOpen}>
+          <DialogTrigger asChild>
+            <Button>
+              <Plus className="mr-2 h-4 w-4" />
+              Upload document
+            </Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Upload new document</DialogTitle>
+            </DialogHeader>
+            <div className="space-y-4 pt-4">
+              <div>
+                <Label htmlFor="menuName">Document name *</Label>
+                <Input
+                  id="menuName"
+                  value={formData.menuName}
+                  onChange={(e) => setFormData({ ...formData, menuName: e.target.value })}
+                  placeholder="e.g. Q1 Report"
+                />
+              </div>
+              <div>
+                <Label htmlFor="menuType">Document type *</Label>
+                <Select
+                  value={formData.menuType}
+                  onValueChange={(value) => setFormData({ ...formData, menuType: value })}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select type" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {documentTypes.map((type) => (
+                      <SelectItem key={type.value} value={type.value}>
+                        {type.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label htmlFor="file">File</Label>
+                <Input
+                  id="file"
+                  type="file"
+                  accept=".pdf,.doc,.docx"
+                  onChange={(e) => setFormData({ ...formData, file: e.target.files?.[0]?.name || "" })}
+                />
+                <p className="mt-1 text-xs text-muted-foreground">PDF or Word documents are accepted</p>
+              </div>
+              <Button
+                onClick={handleAddMenu}
+                className="w-full"
+                disabled={uploadMenuMutation.isPending}
+              >
+                {uploadMenuMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                Upload document
+              </Button>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      {isLoading ? (
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {[1, 2, 3].map((i) => (
+            <Card key={i}>
+              <CardContent className="p-4">
+                <div className="flex items-center gap-3">
+                  <Skeleton className="h-12 w-12 rounded-lg" />
+                  <div>
+                    <Skeleton className="h-4 w-32 mb-2" />
+                    <Skeleton className="h-3 w-24" />
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      ) : (
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {menus.map((menu) => (
+            <Card key={menu.menuId} className="group transition-shadow hover:shadow-md animate-fade-in">
+              <CardContent className="p-4">
+                <div className="flex items-start justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+                      <FileText className="h-6 w-6 text-primary" />
+                    </div>
+                    <div>
+                      <h3 className="font-medium text-foreground">{menu.menuName}</h3>
+                      <p className="text-sm text-muted-foreground">{menu.file || "No file"}</p>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="mt-4 flex items-center justify-between">
+                  <Badge className={getTypeColor(menu.menuType)}>
+                    {getTypeLabel(menu.menuType)}
+                  </Badge>
+                  <div className="flex gap-1 opacity-0 transition-opacity group-hover:opacity-100">
+                    <Button variant="ghost" size="icon" className="h-8 w-8">
+                      <Download className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8 text-destructive hover:bg-destructive hover:text-destructive-foreground"
+                      onClick={() => deleteMenu(menu)}
+                      disabled={deleteMenuMutation.isPending}
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+    </DashboardLayout>
+  );
+}

package/templates/frontend/src/pages/NotFound.tsx

@@ -0,0 +1,24 @@
+import { useLocation } from "react-router-dom";
+import { useEffect } from "react";
+
+const NotFound = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    console.error("404 Error: User attempted to access non-existent route:", location.pathname);
+  }, [location.pathname]);
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-muted">
+      <div className="text-center">
+        <h1 className="mb-4 text-4xl font-bold">404</h1>
+        <p className="mb-4 text-xl text-muted-foreground">Oops! Page not found</p>
+        <a href="/" className="text-primary underline hover:text-primary/90">
+          Return to Home
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default NotFound;

package/templates/frontend/src/pages/Register.tsx

@@ -0,0 +1,285 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent } from '@/components/ui/card';
+import { useToast } from '@/hooks/use-toast';
+import { Check, ChevronLeft } from 'lucide-react';
+import { supabase } from '@/integrations/supabase/client';
+import { useAuth } from '@/contexts/AuthContext';
+import { registerTenant } from "@/lib/api";
+import { v4 } from "uuid";
+
+const Register = () => {
+  const [currentStep, setCurrentStep] = useState(1);
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [tenantName, setTenantName] = useState('');
+  const [loading, setLoading] = useState(false);
+  const { user } = useAuth();
+  const navigate = useNavigate();
+  const { toast } = useToast();
+
+  const isLoggedIn = !!user;
+
+  useEffect(() => {
+    if (user?.email) {
+      setEmail(user.email);
+    }
+  }, [user]);
+
+  const steps = [
+    { number: 1, label: 'Details' },
+    { number: 2, label: 'Confirmation' },
+  ];
+
+  const handleNext = () => {
+    if (!email || !tenantName) {
+      toast({
+        title: 'Error',
+        description: 'Please fill in all fields',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    if (!isLoggedIn) {
+      if (!password) {
+        toast({
+          title: 'Error',
+          description: 'Please enter a password',
+          variant: 'destructive',
+        });
+        return;
+      }
+      if (password.length < 6) {
+        toast({
+          title: 'Error',
+          description: 'Password must be at least 6 characters long',
+          variant: 'destructive',
+        });
+        return;
+      }
+    }
+
+    setCurrentStep(2);
+  };
+
+  const handleBack = () => {
+    if (currentStep > 1) {
+      setCurrentStep(currentStep - 1);
+    }
+  };
+
+  const handleSubmit = async () => {
+    setLoading(true);
+
+    try {
+      let ownerId: string;
+
+      if (isLoggedIn) {
+        ownerId = user!.id;
+      } else {
+        const { data: authData, error: authError } = await supabase.auth.signUp({
+          email: email,
+          password: password,
+          options: {
+            emailRedirectTo: `${window.location.origin}/`
+          }
+        });
+
+        if (authError) {
+            if (authError.code == "user_already_exists") {
+                throw new Error('This email address is already registered. Please sign in.');
+            } else {
+                throw new Error(authError.message ?? "An error occurred. Please try again.");
+            }
+        }
+
+        if (!authData.user) {
+            throw new Error('User could not be created');
+        }
+
+        if (authData.user.identities && authData.user.identities.length === 0) {
+            throw new Error('This email address is already registered. Please sign in.');
+        }
+
+        ownerId = authData.user.id;
+      }
+
+      // Get session token for API call
+      const { data: sessionData } = await supabase.auth.getSession();
+      const token = sessionData?.session?.access_token ?? "";
+      const tenantId = v4();
+
+      await registerTenant({
+        tenantId,
+        name: tenantName,
+        ownerId: ownerId,
+      }, { token, userId: ownerId, tenantId });
+
+      toast({
+        title: 'Success',
+        description: isLoggedIn
+          ? 'Organization registered successfully!'
+          : 'Registration successful! Please check your email to confirm.',
+      });
+      navigate('/auth');
+    } catch (error: any) {
+      toast({
+        title: 'Error',
+        description: !error.message || (Object.keys(error.message)?.length ?? 0) == 0 ? 'Registration failed' : error.message,
+        variant: 'destructive',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-background flex items-center justify-center p-4">
+      <Card className="w-full max-w-2xl shadow-[var(--shadow-medium)]">
+        <CardContent className="p-8">
+          <div className="flex justify-center mb-8">
+            <img
+              src="/logo.png"
+              alt="App Logo"
+              className="h-40 w-auto object-contain"
+            />
+          </div>
+
+          {/* Step Indicator */}
+          <div className="flex items-center justify-between mb-8 max-w-md mx-auto">
+            {steps.map((step, index) => (
+              <div key={step.number} className="flex items-center flex-1">
+                <div className="flex flex-col items-center flex-1">
+                  <div
+                    className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium transition-colors ${
+                      currentStep >= step.number
+                        ? 'bg-primary text-primary-foreground'
+                        : 'bg-muted text-muted-foreground'
+                    }`}
+                  >
+                    {currentStep > step.number ? (
+                      <Check className="w-5 h-5" />
+                    ) : (
+                      step.number
+                    )}
+                  </div>
+                  <span className="text-xs mt-2 text-center">{step.label}</span>
+                </div>
+                {index < steps.length - 1 && (
+                  <div
+                    className={`h-0.5 flex-1 mx-2 transition-colors ${
+                      currentStep > step.number ? 'bg-primary' : 'bg-muted'
+                    }`}
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+
+          {/* Step 1: Details */}
+          {currentStep === 1 && (
+            <div className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-300">
+              <div>
+                <h2 className="text-2xl font-semibold mb-2">Enter your details</h2>
+                <p className="text-muted-foreground">
+                  Enter your email address and organization name.
+                </p>
+              </div>
+
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="tenantName">Organization name</Label>
+                  <Input
+                    id="tenantName"
+                    type="text"
+                    placeholder="My Organization"
+                    value={tenantName}
+                    onChange={(e) => setTenantName(e.target.value)}
+                    required
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="email">Email</Label>
+                  <Input
+                    id="email"
+                    type="email"
+                    placeholder="your@email.com"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    readOnly={isLoggedIn}
+                    className={isLoggedIn ? 'bg-muted' : ''}
+                    required
+                  />
+                </div>
+                {!isLoggedIn && (
+                  <div className="space-y-2">
+                    <Label htmlFor="password">Password</Label>
+                    <Input
+                      id="password"
+                      type="password"
+                      placeholder="At least 6 characters"
+                      value={password}
+                      onChange={(e) => setPassword(e.target.value)}
+                      required
+                    />
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Step 2: Confirmation */}
+          {currentStep === 2 && (
+            <div className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-300">
+              <div>
+                <h2 className="text-2xl font-semibold mb-2">Confirmation</h2>
+                <p className="text-muted-foreground">
+                  Review your details and complete the registration.
+                </p>
+              </div>
+
+              <div className="space-y-4 p-4 rounded-lg bg-muted/50">
+                <div>
+                  <span className="text-sm text-muted-foreground">Organization name</span>
+                  <p className="font-medium">{tenantName}</p>
+                </div>
+                <div>
+                  <span className="text-sm text-muted-foreground">Email</span>
+                  <p className="font-medium">{email}</p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Navigation Buttons */}
+          <div className="flex justify-between mt-8">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={currentStep === 1 ? () => navigate('/auth') : handleBack}
+            >
+              <ChevronLeft className="w-4 h-4 mr-1" />
+              Back
+            </Button>
+
+            {currentStep < 2 ? (
+              <Button onClick={handleNext}>
+                Next
+              </Button>
+            ) : (
+              <Button onClick={handleSubmit} disabled={loading}>
+                {loading ? 'Registering...' : 'Complete registration'}
+              </Button>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default Register;

package/templates/frontend/src/test/setup.ts

@@ -0,0 +1,15 @@
+import "@testing-library/jest-dom";
+
+Object.defineProperty(window, "matchMedia", {
+  writable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => {},
+  }),
+});

package/templates/frontend/src/types/index.ts

@@ -0,0 +1,8 @@
+/*export interface Location {
+  location_id: string;
+  name: string;
+  street: string;
+  housenumber: string;
+  zipCode: string;
+  city: string;
+}*/

package/templates/frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/frontend/tailwind.config.ts

@@ -0,0 +1,101 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  darkMode: ["class"],
+  content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        success: {
+          DEFAULT: "hsl(var(--success))",
+          foreground: "hsl(var(--success-foreground))",
+        },
+        warning: {
+          DEFAULT: "hsl(var(--warning))",
+          foreground: "hsl(var(--warning-foreground))",
+        },
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar-background))",
+          foreground: "hsl(var(--sidebar-foreground))",
+          primary: "hsl(var(--sidebar-primary))",
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          border: "hsl(var(--sidebar-border))",
+          ring: "hsl(var(--sidebar-ring))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+        "fade-in": {
+          from: { opacity: "0", transform: "translateY(10px)" },
+          to: { opacity: "1", transform: "translateY(0)" },
+        },
+        "slide-in": {
+          from: { transform: "translateX(-100%)" },
+          to: { transform: "translateX(0)" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        "fade-in": "fade-in 0.3s ease-out",
+        "slide-in": "slide-in 0.3s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+} satisfies Config;