feat: Load shops and their services from the database instead of using mock data.

web/src/context/AppContext.tsx

@@ -44,12 +44,13 @@ type AppContextValue = State & {
   addBarber: (shopId: string, barber: Omit<Barber, 'id'>) => void;
   updateBarber: (shopId: string, barber: Barber) => void;
   deleteBarber: (shopId: string, barberId: string) => void;
+  refreshShops: () => Promise<void>;
 };
 
 const initialState: State = {
   user: undefined,
   users: mockUsers,
-  shops: mockShops,
+  shops: [], // Removes mockShops integration
   appointments: [],
   orders: [],
   cart: [],
@@ -59,11 +60,12 @@ const initialState: State = {
 const AppContext = createContext<AppContextValue | undefined>(undefined);
 
 export const AppProvider = ({ children }: { children: React.ReactNode }) => {
+  const [loading, setLoading] = useState(true);
   const [state, setState] = useState<State>(() => {
     const stored = storage.get<Partial<State> | null>('smart-agenda', null);
     const safeStored = stored && typeof stored === 'object' ? stored : {};
     const safeUsers = Array.isArray(safeStored.users) ? safeStored.users : initialState.users;
-    const safeShops = Array.isArray(safeStored.shops) ? safeStored.shops : initialState.shops;
+    // shops are no longer bound by storage safely
     const safeAppointments = Array.isArray(safeStored.appointments) ? safeStored.appointments : initialState.appointments;
     const safeOrders = Array.isArray(safeStored.orders) ? safeStored.orders : initialState.orders;
     const safeCart = Array.isArray(safeStored.cart) ? safeStored.cart : initialState.cart;
@@ -75,7 +77,7 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
       ...safeStored,
       user: safeUser,
       users: safeUsers,
-      shops: safeShops,
+      shops: [], // Start empty, will be populated by refreshShops
       appointments: safeAppointments,
       orders: safeOrders,
       cart: safeCart,
@@ -83,6 +85,23 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     };
   });
 
+  const refreshShops = async () => {
+    const { data: shopsData, error: shopsError } = await supabase.from('shops').select('*');
+    if (shopsError) return;
+
+    const { data: servicesData, error: servicesError } = await supabase.from('services').select('*');
+    if (servicesError) return;
+
+    const fetchedShops = shopsData.map((shop) => ({
+      ...shop,
+      services: servicesData.filter((s) => s.shop_id === shop.id),
+      products: [],
+      barbers: [],
+    }));
+
+    setState((s) => ({ ...s, shops: fetchedShops }));
+  };
+
   useEffect(() => {
     storage.set('smart-agenda', state);
   }, [state]);
@@ -459,8 +478,25 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     addBarber,
     updateBarber,
     deleteBarber,
+    refreshShops,
   };
 
+  /**
+   * Hook de Inicialização Master.
+   * Aciona a função de preenchimento do Contexto assincronamente e liberta 
+   * a interface UI da view de Loading.
+   */
+  useEffect(() => {
+    const init = async () => {
+      await refreshShops();
+      setLoading(false);
+    };
+    init();
+  }, []);
+
+  // Loading Shield evita quebra generalizada se o app renderizar sem BD disponível
+  if (loading) return null;
+
   return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
 };