@nebulit/embuilder 0.1.39

package/templates/frontend/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/templates/frontend/src/main.tsx

@@ -0,0 +1,5 @@
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(<App />);

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

@@ -0,0 +1,408 @@
+import { useState, useEffect } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { supabase } from '@/integrations/supabase/client';
+import { useAuth } from '@/contexts/AuthContext';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useToast } from '@/hooks/use-toast';
+import { LogOut } from 'lucide-react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+
+const Auth = () => {
+  const [loginEmail, setLoginEmail] = useState('');
+  const [loginPassword, setLoginPassword] = useState('');
+  const [magicLinkEmail, setMagicLinkEmail] = useState('');
+  const [resetEmail, setResetEmail] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [magicLinkSent, setMagicLinkSent] = useState(false);
+  const [resetEmailSent, setResetEmailSent] = useState(false);
+  const [showResetForm, setShowResetForm] = useState(false);
+  const [isPasswordUpdateMode, setIsPasswordUpdateMode] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+  const navigate = useNavigate();
+  const { toast } = useToast();
+  const { user, session, tenantId, setTenantId } = useAuth();
+  const [searchParams] = useSearchParams();
+
+  useEffect(() => {
+    const checkPasswordReset = async () => {
+      const isReset = searchParams.get('reset') === 'true';
+      if (isReset) {
+        const { data: { session } } = await supabase.auth.getSession();
+        if (session) {
+          setIsPasswordUpdateMode(true);
+        }
+      }
+    };
+    checkPasswordReset();
+  }, [searchParams]);
+
+
+  const handleLogout = async () => {
+    setLoading(true);
+    const { error } = await supabase.auth.signOut();
+    if (error) {
+      toast({
+        title: 'Error',
+        description: error.message,
+        variant: 'destructive',
+      });
+    } else {
+      toast({
+        title: 'Signed out',
+        description: 'You have been signed out successfully.',
+      });
+    }
+    setLoading(false);
+  };
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+
+    const { error } = await supabase.auth.signInWithPassword({
+      email: loginEmail,
+      password: loginPassword,
+    });
+
+    if (error) {
+      toast({
+        title: 'Error',
+        description: error.message,
+        variant: 'destructive',
+      });
+    } else {
+      navigate('/');
+    }
+    setLoading(false);
+  };
+
+  const handleMagicLink = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+
+    const { error } = await supabase.auth.signInWithOtp({
+      email: magicLinkEmail,
+      options: {
+        emailRedirectTo: `${window.location.origin}/`,
+      },
+    });
+
+    if (error) {
+      toast({
+        title: 'Error',
+        description: error.message,
+        variant: 'destructive',
+      });
+    } else {
+      setMagicLinkSent(true);
+      toast({
+        title: 'Login link sent',
+        description: 'Please check your email and click the link to sign in.',
+      });
+    }
+    setLoading(false);
+  };
+
+  const handlePasswordReset = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+
+    const { error } = await supabase.auth.resetPasswordForEmail(resetEmail, {
+      redirectTo: `${window.location.origin}/auth?reset=true`,
+    });
+
+    if (error) {
+      toast({
+        title: 'Error',
+        description: error.message,
+        variant: 'destructive',
+      });
+    } else {
+      setResetEmailSent(true);
+      toast({
+        title: 'Email sent',
+        description: 'Please check your email for the password reset link.',
+      });
+    }
+    setLoading(false);
+  };
+
+  const handleUpdatePassword = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (newPassword !== confirmPassword) {
+      toast({
+        title: 'Error',
+        description: 'Passwords do not match.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    if (newPassword.length < 6) {
+      toast({
+        title: 'Error',
+        description: 'Password must be at least 6 characters long.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    setLoading(true);
+
+    const { error } = await supabase.auth.updateUser({
+      password: newPassword,
+    });
+
+    if (error) {
+      toast({
+        title: 'Error',
+        description: error.message,
+        variant: 'destructive',
+      });
+    } else {
+      toast({
+        title: 'Password updated',
+        description: 'Your password has been changed successfully. You will be redirected to the home page.',
+      });
+      setIsPasswordUpdateMode(false);
+      navigate('/');
+    }
+    setLoading(false);
+  };
+
+
+  return (
+    <div className="min-h-screen bg-background flex items-center justify-center p-4">
+      <Card className="w-full max-w-md shadow-[var(--shadow-medium)]">
+        <CardHeader className="space-y-4">
+          <div className="flex justify-center">
+            <img
+              src="/logo.png"
+              alt="App Logo"
+              className=" w-auto object-contain"
+            />
+          </div>
+          <div className="text-center">
+            <CardTitle>{isPasswordUpdateMode ? 'Set New Password' : ''}</CardTitle>
+          </div>
+          {user && !isPasswordUpdateMode && (
+            <div className="flex flex-col items-center gap-3 pt-2 border-t">
+              <p className="text-sm text-muted-foreground">
+                Signed in as: <strong>{user.email}</strong>
+              </p>
+              <div className="flex gap-2">
+                <Button
+                  variant="default"
+                  size="sm"
+                  onClick={() => navigate('/')}
+                  className="gap-2"
+                >
+                  Start
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleLogout}
+                  disabled={loading}
+                  className="gap-2"
+                >
+                  <LogOut className="h-4 w-4" />
+                  {loading ? 'Logging out...' : 'Logout'}
+                </Button>
+              </div>
+            </div>
+          )}
+        </CardHeader>
+        <CardContent>
+          {isPasswordUpdateMode ? (
+            <form onSubmit={handleUpdatePassword} className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="new-password">New Password</Label>
+                <Input
+                  id="new-password"
+                  type="password"
+                  placeholder="At least 6 characters"
+                  value={newPassword}
+                  onChange={(e) => setNewPassword(e.target.value)}
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="confirm-password">Confirm password</Label>
+                <Input
+                  id="confirm-password"
+                  type="password"
+                  placeholder="Confirm password"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  required
+                />
+              </div>
+              <Button type="submit" className="w-full" disabled={loading}>
+                {loading ? 'Saving...' : 'Save Password'}
+              </Button>
+            </form>
+          ) : (
+            <Tabs defaultValue="login" className="w-full" onValueChange={(value) => {
+              if (value === 'signup') {
+                navigate('/register');
+              }
+              setMagicLinkSent(false);
+            }}>
+              <TabsList className="grid w-full grid-cols-3">
+                <TabsTrigger value="login">Login</TabsTrigger>
+                <TabsTrigger value="magic">Login Link</TabsTrigger>
+                <TabsTrigger value="signup">Register</TabsTrigger>
+              </TabsList>
+
+              <TabsContent value="login">
+              {showResetForm ? (
+                resetEmailSent ? (
+                  <div className="space-y-4 text-center py-4">
+                    <div className="text-sm text-muted-foreground">
+                      A password reset link has been sent to <strong>{resetEmail}</strong>.
+                      Please check your email.
+                    </div>
+                    <Button
+                      variant="outline"
+                      className="w-full"
+                      onClick={() => {
+                        setShowResetForm(false);
+                        setResetEmailSent(false);
+                        setResetEmail('');
+                      }}
+                    >
+                      Back to login
+                    </Button>
+                  </div>
+                ) : (
+                  <form onSubmit={handlePasswordReset} className="space-y-4">
+                    <div className="space-y-2">
+                      <Label htmlFor="reset-email">Email</Label>
+                      <Input
+                        id="reset-email"
+                        type="email"
+                        placeholder="your@email.com"
+                        value={resetEmail}
+                        onChange={(e) => setResetEmail(e.target.value)}
+                        required
+                      />
+                    </div>
+                    <div className="text-sm text-muted-foreground">
+                      We will send you a link to reset your password.
+                    </div>
+                    <Button type="submit" className="w-full" disabled={loading}>
+                      {loading ? 'Sending...' : 'Send link'}
+                    </Button>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      className="w-full"
+                      onClick={() => setShowResetForm(false)}
+                    >
+                      Back to login
+                    </Button>
+                  </form>
+                )
+              ) : (
+                <form onSubmit={handleLogin} className="space-y-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="login-email">Email</Label>
+                    <Input
+                      id="login-email"
+                      type="email"
+                      placeholder="your@email.com"
+                      value={loginEmail}
+                      onChange={(e) => setLoginEmail(e.target.value)}
+                      required
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="login-password">Password</Label>
+                    <Input
+                      id="login-password"
+                      type="password"
+                      value={loginPassword}
+                      onChange={(e) => setLoginPassword(e.target.value)}
+                      required
+                    />
+                  </div>
+                  <Button type="submit" className="w-full" disabled={loading}>
+                    {loading ? 'Loading...' : 'Sign in'}
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="link"
+                    className="w-full text-sm"
+                    onClick={() => setShowResetForm(true)}
+                  >
+                    Forgot password?
+                  </Button>
+                </form>
+              )}
+            </TabsContent>
+
+            <TabsContent value="magic">
+              {magicLinkSent ? (
+                <div className="space-y-4 text-center py-4">
+                  <div className="text-sm text-muted-foreground">
+                    A login link has been sent to <strong>{magicLinkEmail}</strong>.
+                    Please check your email and click the link to sign in.
+                  </div>
+                  <Button
+                    variant="outline"
+                    className="w-full"
+                    onClick={() => {
+                      setMagicLinkSent(false);
+                      setMagicLinkEmail('');
+                    }}
+                  >
+                    Send again
+                  </Button>
+                </div>
+              ) : (
+                <form onSubmit={handleMagicLink} className="space-y-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="magic-email">Email</Label>
+                    <Input
+                      id="magic-email"
+                      type="email"
+                      placeholder="your@email.com"
+                      value={magicLinkEmail}
+                      onChange={(e) => setMagicLinkEmail(e.target.value)}
+                      required
+                    />
+                  </div>
+                  <div className="text-sm text-muted-foreground">
+                    We will send you a login link so you can sign in without a password.
+                  </div>
+                  <Button type="submit" className="w-full" disabled={loading}>
+                    {loading ? 'Sending...' : 'Send login link'}
+                  </Button>
+                </form>
+              )}
+            </TabsContent>
+          </Tabs>
+          )}
+        </CardContent>
+      </Card>
+
+      <Dialog open={showModal} onOpenChange={setShowModal}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Assigned Organizations</DialogTitle>
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};
+
+export default Auth;

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

@@ -0,0 +1,168 @@
+import {DashboardLayout} from "@/components/layout/DashboardLayout";
+import {StatCard} from "@/components/ui/stat-card";
+import {Users, Calendar, ClipboardList} from "lucide-react";
+import {mockClerks} from "@/data/mock-data";
+import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
+import {Badge} from "@/components/ui/badge";
+import {useActiveShiftsForDashboard} from "@/hooks/api/useShifts";
+import {useActiveTasksForDashboard} from "@/hooks/api/useTasks";
+import {useClerks} from "@/hooks/api/useClerks";
+import {useUpcomingReservations} from "@/hooks/api/useReservations";
+import {format} from "date-fns";
+import {DashboardCalendar, CalendarEntry} from "@/components/calendar/Calendar";
+import {useMemo, useCallback} from "react";
+import {useApiContext} from "@/hooks/useApiContext";
+import {registerNoShow, registerShowUp} from "@/lib/api";
+
+export default function Dashboard() {
+    const ctx = useApiContext();
+    const {data: activeShifts = [], isLoading: shiftsLoading} = useActiveShiftsForDashboard();
+    const {data: activeTasks = [], isLoading: tasksLoading} = useActiveTasksForDashboard();
+    const {data: clerks = []} = useClerks();
+    const {data: upcomingReservations = []} = useUpcomingReservations();
+    const activeStaff = mockClerks.filter((c) => c.active).length;
+
+    const getClerkName = (clerkId: string) => {
+        const clerk = clerks.find((c) => c.clerkId === clerkId);
+        return clerk ? `${clerk.name} ${clerk.surname}` : clerkId;
+    };
+
+    const calendarEntries = useMemo<CalendarEntry[]>(() => {
+        return upcomingReservations.map((r) => ({
+            type: "reservation",
+            id: r.reservation_id,
+            title: r.name || r.reservation_id,
+            description: r.description,
+            start: r.start_date,
+            email: r.email,
+            phone: r.phone,
+            end: r.end_date,
+            showupRegistered: r.showup_registered,
+        }));
+    }, [upcomingReservations]);
+
+    const handleNoShow = useCallback((reservationId: string) => {
+        registerNoShow(reservationId, ctx).catch(console.error);
+    }, [ctx]);
+
+    const handleShowUp = useCallback((reservationId: string) => {
+        registerShowUp(reservationId, ctx).catch(console.error);
+    }, [ctx]);
+
+    return (
+        <DashboardLayout title="Overview" subtitle="Welcome back! Here is your summary.">
+            {/* Stats Grid */}
+            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
+                <StatCard
+                    title="Active Staff"
+                    value={activeStaff}
+                    icon={Users}
+                    change={`${mockClerks.length - activeStaff} inactive`}
+                    changeType="neutral"
+                />
+            </div>
+
+            {/* Quick Actions & Recent Activity */}
+            <div className="mt-8 grid gap-6 lg:grid-cols-2">
+                {/* Active Shifts */}
+                <Card className="animate-fade-in">
+                    <CardHeader>
+                        <CardTitle className="flex items-center gap-2 text-lg">
+                            <Calendar className="h-5 w-5 text-primary"/>
+                            Active Shifts Today
+                        </CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="space-y-4">
+                            {shiftsLoading ? (
+                                <p className="text-sm text-muted-foreground">Loading...</p>
+                            ) : activeShifts.length === 0 ? (
+                                <p className="text-sm text-muted-foreground">No active shifts</p>
+                            ) : (
+                                activeShifts.map((shift) => (
+                                    <div
+                                        key={shift.shiftId}
+                                        className="flex items-center justify-between rounded-lg border border-border bg-muted/30 p-4"
+                                    >
+                                        <div>
+                                            <p className="font-medium text-foreground">{shift.name}</p>
+                                            <p className="text-sm text-muted-foreground">{shift.fromTo}</p>
+                                            {shift.assignees.length > 0 && (
+                                                <p className="mt-1 text-xs text-muted-foreground">
+                                                    {shift.assignees.map(getClerkName).join(", ")}
+                                                </p>
+                                            )}
+                                        </div>
+                                        <Badge variant="secondary" className="bg-success/10 text-success">
+                                            Active
+                                        </Badge>
+                                    </div>
+                                ))
+                            )}
+                        </div>
+                    </CardContent>
+                </Card>
+            </div>
+
+            {/* Pending Tasks */}
+            <Card className="mt-6 animate-fade-in">
+                <CardHeader>
+                    <CardTitle className="flex items-center gap-2 text-lg">
+                        <ClipboardList className="h-5 w-5 text-primary"/>
+                        Pending Tasks
+                    </CardTitle>
+                </CardHeader>
+                <CardContent>
+                    {tasksLoading ? (
+                        <p className="text-sm text-muted-foreground">Loading...</p>
+                    ) : activeTasks.length === 0 ? (
+                        <p className="text-sm text-muted-foreground">No active tasks</p>
+                    ) : (
+                        <div className="overflow-x-auto">
+                            <table className="w-full">
+                                <thead>
+                                <tr className="border-b border-border">
+                                    <th className="pb-3 text-left text-sm font-medium text-muted-foreground">Task</th>
+                                    <th className="pb-3 text-left text-sm font-medium text-muted-foreground">Assigned to</th>
+                                    <th className="pb-3 text-left text-sm font-medium text-muted-foreground">Due date</th>
+                                    <th className="pb-3 text-left text-sm font-medium text-muted-foreground">Recurrence</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                {activeTasks.map((task) => (
+                                    <tr key={task.taskId} className="border-b border-border/50 last:border-0">
+                                        <td className="py-4">
+                                            <p className="font-medium text-foreground">{task.title}</p>
+                                            <p className="text-sm text-muted-foreground">{task.description}</p>
+                                        </td>
+                                        <td className="py-4 text-foreground">
+                                            {task.assignedClerk ? getClerkName(task.assignedClerk) : "Unassigned"}
+                                        </td>
+                                        <td className="py-4 text-foreground">
+                                            {task.date ? format(new Date(task.date), "MM/dd/yyyy") : "–"}
+                                        </td>
+                                        <td className="py-4">
+                                            {task.repeats ? (
+                                                <Badge variant="outline">{task.repeats}</Badge>
+                                            ) : (
+                                                <span className="text-sm text-muted-foreground">Once</span>
+                                            )}
+                                        </td>
+                                    </tr>
+                                ))}
+                                </tbody>
+                            </table>
+                        </div>
+                    )}
+                </CardContent>
+            </Card>
+
+            <DashboardCalendar
+                entries={calendarEntries}
+                onAppointmentClick={() => {}}
+                onNoShow={handleNoShow}
+                onShowUp={handleShowUp}
+            />
+        </DashboardLayout>
+    );
+}