feat: Integrate Data Connect and Implement Staff List View Directory

apps/web/src/features/auth/Login.tsx

@@ -125,7 +125,7 @@ const Login: React.FC = () => {
     // Dispatch Redux action to handle login
     dispatch(loginUser({ email, password }));
   };
-
+  console.log(user);
   return (
     <div className="flex min-h-screen bg-slate-50/50">
       {/* Left Side: Hero Image (Hidden on Mobile) */}
@@ -280,32 +280,6 @@ const Login: React.FC = () => {
               )}
             </Button>
           </form>
-
-          {/* Helper for MVP Testing / Demo purposes */}
-          <div className="mt-8 p-6 bg-slate-50/80 rounded-2xl border border-slate-100 backdrop-blur-sm">
-            <p className="text-[11px] font-bold text-muted-text uppercase tracking-widest mb-4">
-              Quick Login (Development)
-            </p>
-            <div className="flex flex-wrap gap-2">
-              {[
-                { label: "Admin", email: "admin@krow.com" },
-                { label: "Client", email: "client@krow.com" },
-                { label: "Vendor", email: "vendor@krow.com" },
-              ].map((cred) => (
-                <button
-                  key={cred.label}
-                  type="button"
-                  onClick={() => {
-                    setEmail(cred.email);
-                    setPassword("password");
-                  }}
-                  className="px-4 py-2 bg-white border border-slate-200 text-[11px] font-bold rounded-xl hover:border-primary hover:text-primary transition-all"
-                >
-                  {cred.label}
-                </button>
-              ))}
-            </div>
-          </div>
         </div>
       </div>
     </div>

apps/web/src/features/auth/authSlice.ts

@@ -9,7 +9,7 @@ export interface AuthUser {
   email: string | null;
   displayName: string | null;
   photoURL: string | null;
-  userRole?: "admin" | "client" | "vendor";
+  userRole?: "admin" | "client" | "vendor" | "ADMIN" | "CLIENT" | "VENDOR";
 }
 
 interface AuthState {
@@ -43,24 +43,26 @@ export const loginUser = createAsyncThunk(
 
     const firebaseUser = result.user as User;
     
-    // Fetch user role from Firestore
-    let userRole: "admin" | "client" | "vendor" = "client";
+    // Fetch user role from backend (DataConnect) or fallback (Firestore)
+    let userRole: AuthUser['userRole'] = undefined;
+    if(userRole === undefined){
+      userRole = "client"; // Default to 'client' if role is missing
+    }
     try {
       const userData = await fetchUserData(firebaseUser.uid);
-      if (userData) {
-        userRole = userData.userRole;
+      if (userData && userData.userRole) {
+        userRole = userData.userRole as AuthUser['userRole'];
       }
     } catch (error) {
       console.error("Failed to fetch user role:", error);
-      // Continue with default role on error
+      // Do not assign a frontend default — treat missing role as undefined
     }
-
     return {
       uid: firebaseUser.uid,
       email: firebaseUser.email,
       displayName: firebaseUser.displayName,
       photoURL: firebaseUser.photoURL,
-      userRole: userRole,
+      userRole,
     };
   }
 );
@@ -82,20 +84,22 @@ export const logoutUser = createAsyncThunk("auth/logoutUser", async (_, { reject
  * Async thunk to check if user is already logged in
  * Fetches user role from Firestore on app initialization
  */
-export const checkAuthStatus = createAsyncThunk("auth/checkAuthStatus", async (_, { rejectWithValue }) => {
+export const checkAuthStatus = createAsyncThunk("auth/checkAuthStatus", async () => {
   const currentUser = getCurrentUser();
 
   if (currentUser) {
-    // Fetch user role from Firestore
-    let userRole: "admin" | "client" | "vendor" = "client";
+    // Fetch user role from backend (DataConnect) or fallback (Firestore)
+    let userRole: AuthUser['userRole'] = undefined;
     try {
       const userData = await fetchUserData(currentUser.uid);
-      if (userData) {
-        userRole = userData.userRole;
+      if (userData && userData.userRole) {
+        console.log("User data fetched during auth check:", userData);
+        userRole = userData.userRole as AuthUser['userRole'];
+        console.log("Fetched user role:", userRole);
       }
     } catch (error) {
       console.error("Failed to fetch user role:", error);
-      // Continue with default role on error
+      // Do not apply a frontend default role
     }
 
     return {
@@ -103,7 +107,7 @@ export const checkAuthStatus = createAsyncThunk("auth/checkAuthStatus", async (_
       email: currentUser.email,
       displayName: currentUser.displayName,
       photoURL: currentUser.photoURL,
-      userRole: userRole,
+      userRole,
     };
   }
 

apps/web/src/features/auth/firebase.ts

@@ -2,6 +2,8 @@
 import { initializeApp } from "firebase/app";
 import { getAnalytics } from "firebase/analytics";
 import { getAuth } from "firebase/auth";
+import { getDataConnect } from "firebase/data-connect";
+import { connectorConfig } from "@/dataconnect-generated";
 // TODO: Add SDKs for Firebase products that you want to use
 // https://firebase.google.com/docs/web/setup#available-libraries
 
@@ -17,7 +19,9 @@ const firebaseConfig = {
   measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID
 };
 
+
 // Initialize Firebase
 export const app = initializeApp(firebaseConfig);
 export const analytics = getAnalytics(app);
+export const dataConnect = getDataConnect(app, connectorConfig);
 export const auth = getAuth(app);