@nebulit/embuilder 0.1.39

package/templates/frontend/src/contexts/RefreshContext.tsx

@@ -0,0 +1,236 @@
+import { createContext, useContext, useState, useCallback, ReactNode, useEffect } from 'react';
+import { supabase } from '@/integrations/supabase/client';
+import { useAuth } from '@/contexts/AuthContext';
+
+type RefreshScope = 'all' | 'appointments' | 'tasks' | 'documents' | 'cases' | string;
+
+interface RefreshContextType {
+  /**
+   * Trigger a refresh for specific scope(s) or all components
+   */
+  triggerRefresh: (scope?: RefreshScope | RefreshScope[]) => void;
+
+  /**
+   * Subscribe to refresh events for a specific scope
+   * Returns true when a refresh is triggered for this scope
+   */
+  shouldRefresh: (scope: RefreshScope) => boolean;
+
+  /**
+   * Acknowledge that a component has completed its refresh
+   */
+  acknowledgeRefresh: (scope: RefreshScope) => void;
+
+  /**
+   * Enable/disable Supabase Realtime auto-refresh
+   */
+  realtimeEnabled: boolean;
+  setRealtimeEnabled: (enabled: boolean) => void;
+}
+
+const RefreshContext = createContext<RefreshContextType | undefined>(undefined);
+
+interface RefreshProviderProps {
+  children: ReactNode;
+  /**
+   * Enable Supabase Realtime auto-refresh by default
+   */
+  enableRealtime?: boolean;
+}
+
+export function RefreshProvider({ children, enableRealtime = false }: RefreshProviderProps) {
+  const [activeRefreshes, setActiveRefreshes] = useState<Set<RefreshScope>>(new Set());
+  const [realtimeEnabled, setRealtimeEnabled] = useState(enableRealtime);
+  const { user } = useAuth();
+
+  // Log provider initialization
+  useEffect(() => {
+    console.log('🚀 [PROVIDER] RefreshProvider initialized:', {
+      realtimeEnabled,
+      hasUser: !!user?.id,
+      userId: user?.id
+    });
+  }, [realtimeEnabled, user?.id]);
+
+  const triggerRefresh = useCallback((scope: RefreshScope | RefreshScope[] = 'all') => {
+    const scopes = Array.isArray(scope) ? scope : [scope];
+    console.log('🔄 [TRIGGER] triggerRefresh called with scope(s):', scopes);
+
+    setActiveRefreshes(prev => {
+      const next = new Set(prev);
+      const prevSize = next.size;
+      scopes.forEach(s => next.add(s));
+      // 'all' scope triggers everything
+      if (scopes.includes('all')) {
+        next.add('all');
+      }
+      console.log('🔄 [TRIGGER] Active refreshes updated:', {
+        previous: Array.from(prev),
+        current: Array.from(next),
+        added: next.size - prevSize
+      });
+      return next;
+    });
+  }, []);
+
+  const shouldRefresh = useCallback((scope: RefreshScope): boolean => {
+      const result = activeRefreshes.has(scope) || activeRefreshes.has('all');
+    return result;
+  }, [activeRefreshes]);
+
+  const acknowledgeRefresh = useCallback((scope: RefreshScope) => {
+    setActiveRefreshes(prev => {
+      const next = new Set(prev);
+      next.delete(scope);
+      // If no specific scopes left and 'all' was set, clear it
+      if (next.size === 1 && next.has('all')) {
+        next.delete('all');
+      }
+      console.log('✅ [ACK] Active refreshes after acknowledgment:', {
+        scope,
+        previous: Array.from(prev),
+        current: Array.from(next)
+      });
+      return next;
+    });
+  }, []);
+
+    // Supabase Realtime integration
+    useEffect(() => {
+        if (!realtimeEnabled || !user?.id) {
+            console.log('📡 [REALTIME] Skipping subscription:', {
+                realtimeEnabled,
+                hasUserId: !!user?.id
+            });
+            return;
+        }
+
+        console.log('📡 [REALTIME] Subscribing to Supabase Realtime for user:', user.id);
+
+        // Channel name can be anything; using 'ui-refresh' makes intent clear
+        const channel = supabase.channel(`ui-refresh:${user.id}`);
+
+        channel
+            .on(
+                'postgres_changes',
+                {
+                    event: 'INSERT',
+                    schema: 'public',           // your schema
+                    table: 'ui_refresh_events',
+                    filter: undefined
+                },
+                (payload) => {
+                    // The inserted row is in payload.new
+                    const scope = payload.new?.scope || 'all';
+
+                    console.log('📡 [REALTIME] DB refresh event received:', {
+                        payload,
+                        scope,
+                        timestamp: new Date().toISOString()
+                    });
+
+                    triggerRefresh(scope);
+                }
+            )
+            .subscribe((status) => {
+                console.log('📡 [REALTIME] Subscription status changed:', {
+                    status,
+                    channelName: `ui-refresh:${user.id}`,
+                    timestamp: new Date().toISOString()
+                });
+
+                if (status === 'SUBSCRIBED') {
+                    console.log(`✅ [REALTIME] Successfully subscribed to channel: ui-refresh:${user.id}`);
+                } else if (status === 'CHANNEL_ERROR') {
+                    console.error('❌ [REALTIME] Failed to subscribe to realtime channel');
+                }
+            });
+
+        // Cleanup on unmount
+        return () => {
+            console.log(`🔌 [REALTIME] Unsubscribing from channel: ui-refresh:${user.id}`);
+            supabase.removeChannel(channel);
+        };
+    }, [realtimeEnabled, user?.id, triggerRefresh]);
+
+  return (
+    <RefreshContext.Provider
+      value={{
+        triggerRefresh,
+        shouldRefresh,
+        acknowledgeRefresh,
+        realtimeEnabled,
+        setRealtimeEnabled,
+      }}
+    >
+      {children}
+    </RefreshContext.Provider>
+  );
+}
+
+/**
+ * Hook to trigger refreshes from any component
+ */
+export function useRefreshTrigger() {
+  const context = useContext(RefreshContext);
+  if (!context) {
+    throw new Error('useRefreshTrigger must be used within RefreshProvider');
+  }
+
+  console.log('🔌 [TRIGGER_HOOK] Component using useRefreshTrigger hook');
+
+  return {
+    triggerRefresh: context.triggerRefresh,
+    realtimeEnabled: context.realtimeEnabled,
+    setRealtimeEnabled: context.setRealtimeEnabled,
+  };
+}
+
+/**
+ * Hook for components to subscribe to refresh events
+ *
+ * @param scope - The scope this component listens to (e.g., 'appointments', 'tasks', or 'all')
+ * @param onRefresh - Async function to call when refresh is triggered
+ *
+ * @example
+ * ```tsx
+ * function AppointmentsList() {
+ *   const { refetch } = useQuery(...);
+ *
+ *   useRefreshSubscription('appointments', refetch);
+ *
+ *   return <div>...</div>;
+ * }
+ * ```
+ */
+export function useRefreshSubscription(
+  scope: RefreshScope,
+  onRefresh: () => Promise<void> | void
+) {
+  const context = useContext(RefreshContext);
+  if (!context) {
+    throw new Error('useRefreshSubscription must be used within RefreshProvider');
+  }
+
+  const { shouldRefresh, acknowledgeRefresh } = context;
+
+  useEffect(() => {
+
+      console.log(`{1}should refresh ${scope}`)
+    if (shouldRefresh(scope)) {
+        console.log(`{1}yes`)
+
+      const doRefresh = async () => {
+        try {
+          await onRefresh();
+        } catch (error) {
+          console.error('❌ [SUBSCRIPTION] Refresh failed for scope:', scope, error);
+        } finally {
+          acknowledgeRefresh(scope);
+        }
+      };
+
+      doRefresh();
+    }
+  }, [shouldRefresh, scope, onRefresh, acknowledgeRefresh]);
+}

package/templates/frontend/src/hooks/api/index.ts

@@ -0,0 +1,2 @@
+// API Hooks - Central export
+export * from "./useLocations";

package/templates/frontend/src/hooks/api/useLocations.ts

@@ -0,0 +1,15 @@
+/*import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useApiContext } from "@/hooks/useApiContext";
+import * as api from "@/lib/api";
+
+export function useRegisterRestaurant() {
+  const queryClient = useQueryClient();
+  const ctx = useApiContext();
+
+  return useMutation({
+    mutationFn: (params: api.RegisterRestaurantParams) => api.registerRestaurant(params, ctx),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["restaurants"] });
+    },
+  });
+}*/

package/templates/frontend/src/hooks/use-mobile.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/templates/frontend/src/hooks/use-toast.ts

@@ -0,0 +1,186 @@
+import * as React from "react";
+
+import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+
+type ToasterToast = ToastProps & {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+};
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const;
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"];
+      toast: ToasterToast;
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"];
+      toast: Partial<ToasterToast>;
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"];
+      toastId?: ToasterToast["id"];
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"];
+      toastId?: ToasterToast["id"];
+    };
+
+interface State {
+  toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
+      };
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action;
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      };
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+
+type Toast = Omit<ToasterToast, "id">;
+
+function toast({ ...props }: Toast) {
+  const id = genId();
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  };
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState);
+
+  React.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  };
+}
+
+export { useToast, toast };

package/templates/frontend/src/hooks/useApiContext.ts

@@ -0,0 +1,11 @@
+import { useAuth } from "@/contexts/AuthContext";
+import { ApiContext } from "@/lib/api-client";
+
+export function useApiContext(): ApiContext {
+  const { session, user, tenantId } = useAuth();
+  return {
+    token: session?.access_token ?? "",
+    tenantId: tenantId ?? undefined,
+    userId: user?.id ?? undefined,
+  };
+}

package/templates/frontend/src/index.css

@@ -0,0 +1,118 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* Warm hospitality palette */
+    --background: 40 33% 98%;
+    --foreground: 20 20% 15%;
+
+    --card: 40 30% 99%;
+    --card-foreground: 20 20% 15%;
+
+    --popover: 40 30% 99%;
+    --popover-foreground: 20 20% 15%;
+
+    /* Warm terracotta coral */
+    --primary: 14 70% 54%;
+    --primary-foreground: 40 33% 98%;
+
+    /* Soft sage */
+    --secondary: 150 20% 92%;
+    --secondary-foreground: 150 30% 25%;
+
+    --muted: 40 20% 94%;
+    --muted-foreground: 20 10% 45%;
+
+    /* Sage accent */
+    --accent: 150 25% 88%;
+    --accent-foreground: 150 35% 20%;
+
+    --destructive: 0 72% 51%;
+    --destructive-foreground: 0 0% 100%;
+
+    --border: 40 20% 88%;
+    --input: 40 20% 88%;
+    --ring: 14 70% 54%;
+
+    --radius: 0.625rem;
+
+    /* Sidebar - warm neutral */
+    --sidebar-background: 20 15% 12%;
+    --sidebar-foreground: 40 20% 90%;
+    --sidebar-primary: 14 70% 60%;
+    --sidebar-primary-foreground: 40 33% 98%;
+    --sidebar-accent: 20 15% 18%;
+    --sidebar-accent-foreground: 40 20% 90%;
+    --sidebar-border: 20 15% 20%;
+    --sidebar-ring: 14 70% 54%;
+
+    /* Custom tokens */
+    --success: 150 50% 40%;
+    --success-foreground: 0 0% 100%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 20 20% 15%;
+  }
+
+  .dark {
+    --background: 20 15% 8%;
+    --foreground: 40 20% 95%;
+
+    --card: 20 15% 10%;
+    --card-foreground: 40 20% 95%;
+
+    --popover: 20 15% 10%;
+    --popover-foreground: 40 20% 95%;
+
+    --primary: 14 70% 58%;
+    --primary-foreground: 20 15% 8%;
+
+    --secondary: 150 15% 18%;
+    --secondary-foreground: 150 20% 85%;
+
+    --muted: 20 15% 18%;
+    --muted-foreground: 40 15% 60%;
+
+    --accent: 150 20% 20%;
+    --accent-foreground: 150 20% 90%;
+
+    --destructive: 0 62% 45%;
+    --destructive-foreground: 0 0% 100%;
+
+    --border: 20 15% 20%;
+    --input: 20 15% 20%;
+    --ring: 14 70% 58%;
+
+    --sidebar-background: 20 15% 6%;
+    --sidebar-foreground: 40 20% 90%;
+    --sidebar-primary: 14 70% 60%;
+    --sidebar-primary-foreground: 20 15% 8%;
+    --sidebar-accent: 20 15% 12%;
+    --sidebar-accent-foreground: 40 20% 90%;
+    --sidebar-border: 20 15% 15%;
+    --sidebar-ring: 14 70% 58%;
+
+    --success: 150 50% 45%;
+    --success-foreground: 0 0% 100%;
+    --warning: 38 92% 55%;
+    --warning-foreground: 20 20% 10%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}
+
+@layer utilities {
+  .glass-card {
+    @apply bg-card/80 backdrop-blur-sm border border-border/50;
+  }
+}

package/templates/frontend/src/integrations/supabase/client.ts

@@ -0,0 +1,9 @@
+import { createClient } from '@supabase/supabase-js';
+
+// Supabase project URL
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL || '';
+
+// Publishable key (safe to expose in the front-end)
+const supabasePublishableKey = import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY || '';
+
+export const supabase = createClient(supabaseUrl, supabasePublishableKey);