@imksh/create 1.0.31 → 1.0.32

package/templates/layers/react-native/base/src/components/ui/inputs/WebLocationPicker.tsx

@@ -10,6 +10,7 @@ import Input from "./Input";
 import { toast } from "@/utils/toast";
 import { WebView, WebViewMessageEvent } from "react-native-webview";
 import { LocationLoader } from "../../common/LocationLoader";
+import ScreenHeader from "@/components/common/ScreenHeader";
 
 export interface LocationDetails {
   addressLine1: string;
@@ -40,11 +41,12 @@ export default function WebLocationPicker({
   const [loading, setLoading] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
   const [searching, setSearching] = useState(false);
-  
+
   const [loadingLocation, setLoadingLocation] = useState(false);
   const [animationDone, setAnimationDone] = useState(false);
   const [positionFetched, setPositionFetched] = useState(false);
-  
+  const [showWebView, setShowWebView] = useState(true);
+
   const [mapCenter, setMapCenter] = useState({
     latitude: initialCoordinate?.latitude || 28.6139,
     longitude: initialCoordinate?.longitude || 77.209,
@@ -56,7 +58,6 @@ export default function WebLocationPicker({
 
   useEffect(() => {
     if (initialCoordinate?.latitude && initialCoordinate?.longitude) {
-       
       setMapCenter(initialCoordinate);
       setCurrentCenter(initialCoordinate);
     }
@@ -69,6 +70,7 @@ export default function WebLocationPicker({
   }, [animationDone, positionFetched]);
 
   const requestLocationAndOpenMap = async () => {
+    setShowWebView(true);
     setModalVisible(true);
     setLoadingLocation(true);
     setAnimationDone(false);
@@ -84,7 +86,9 @@ export default function WebLocationPicker({
         }
 
         if (!initialCoordinate?.latitude) {
-          let location = await Location.getCurrentPositionAsync({ accuracy: Location.Accuracy.Balanced });
+          let location = await Location.getCurrentPositionAsync({
+            accuracy: Location.Accuracy.Balanced,
+          });
           setMapCenter({
             latitude: location.coords.latitude,
             longitude: location.coords.longitude,
@@ -120,8 +124,15 @@ export default function WebLocationPicker({
           latitude: currentCenter.latitude,
           longitude: currentCenter.longitude,
         };
-        onLocationSelected(details);
-        setModalVisible(false);
+
+        // Hide WebView first to prevent Android crash when Modal closes
+        setShowWebView(false);
+        setTimeout(() => {
+          onLocationSelected(details);
+          setModalVisible(false);
+          setLoading(false);
+        }, 150);
+        return;
       }
     } catch (error) {
       console.warn("Geocoding failed", error);
@@ -129,6 +140,37 @@ export default function WebLocationPicker({
     setLoading(false);
   };
 
+  const [fetchingCurrentLocation, setFetchingCurrentLocation] = useState(false);
+
+  const handleCurrentLocation = async () => {
+    setFetchingCurrentLocation(true);
+    try {
+      let { status } = await Location.requestForegroundPermissionsAsync();
+      if (status !== "granted") {
+        toast.error("Permission to access location was denied");
+        return;
+      }
+
+      let location = await Location.getCurrentPositionAsync({
+        accuracy: Location.Accuracy.Balanced,
+      });
+
+      const lat = location.coords.latitude;
+      const lng = location.coords.longitude;
+
+      setCurrentCenter({ latitude: lat, longitude: lng });
+      webViewRef.current?.injectJavaScript(`
+        map.setView([${lat}, ${lng}], 15);
+        true;
+      `);
+    } catch (error) {
+      console.warn("Failed to get current location", error);
+      toast.error("Failed to get current location");
+    } finally {
+      setFetchingCurrentLocation(false);
+    }
+  };
+
   const handleSearch = async () => {
     if (!searchQuery.trim()) return;
     setSearching(true);
@@ -142,11 +184,10 @@ export default function WebLocationPicker({
           true;
         `);
       } else {
-        toast.success("Location not found");
+        toast.error("Location not found");
       }
-    } catch (error) {
-      console.warn("Search failed", error);
-      toast.error("Failed to search location");
+    } catch {
+      toast.error("Failed to search");
     }
     setSearching(false);
   };
@@ -163,7 +204,8 @@ export default function WebLocationPicker({
     } catch {}
   };
 
-  const htmlContent = useMemo(() => `
+  const htmlContent = useMemo(
+    () => `
     <!DOCTYPE html>
     <html>
     <head>
@@ -188,7 +230,7 @@ export default function WebLocationPicker({
       <div class="center-marker">📍</div>
       <script>
         var map = L.map('map', { zoomControl: false, attributionControl: false }).setView([${mapCenter.latitude}, ${mapCenter.longitude}], 15);
-        L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
           maxZoom: 19
         }).addTo(map);
 
@@ -203,7 +245,9 @@ export default function WebLocationPicker({
       </script>
     </body>
     </html>
-  `, [mapCenter.latitude, mapCenter.longitude]);
+  `,
+    [mapCenter.latitude, mapCenter.longitude],
+  );
 
   return (
     <>
@@ -223,14 +267,18 @@ export default function WebLocationPicker({
             />
             <Txt color={theme.baseContent} weight="semibold">
               {initialCoordinate?.latitude
-                ? "Update Location on Map"
-                : "Pick from Map"}
+                ? "Update Location"
+                : "Pick from map"}
             </Txt>
           </View>
           {loading && !modalVisible ? (
             <ActivityIndicator color={theme.primary} />
           ) : (
-            <Ionicons name="chevron-forward" size={20} color={theme.secondary} />
+            <Ionicons
+              name="chevron-forward"
+              size={20}
+              color={theme.secondary}
+            />
           )}
         </TouchableOpacity>
       )}
@@ -251,68 +299,94 @@ export default function WebLocationPicker({
           </View>
         ) : (
           <View className="flex-1 bg-base-100">
-            <View
-              className="h-16 flex-row items-center justify-between px-4 border-b border-base-300 pt-4 bg-base-100"
-              style={{ zIndex: 10 }}
-            >
-            <TouchableOpacity onPress={() => setModalVisible(false)}>
-              <Ionicons name="close" size={28} color={theme.baseContent} />
-            </TouchableOpacity>
-            <Txt weight="bold" style={{ fontSize: 18 }}>
-              Select Location
-            </Txt>
-            <View style={{ width: 28 }} />
-          </View>
+            <ScreenHeader
+              icon="close"
+              onBack={() => setModalVisible(false)}
+              title="Select Location"
+            />
 
-          <View className="px-4 py-3 bg-base-100 flex-row items-center border-b border-base-200 gap-4">
-            <View className="flex-1" style={{ marginBottom: -16 }}>
-              <Input
-                placeholder="Search city, area, etc."
-                value={searchQuery}
-                onChangeText={setSearchQuery}
-                onSubmitEditing={handleSearch}
-                returnKeyType="search"
-                containerStyle={{ marginBottom: 0 }}
-                leftIcon="search"
+            <View className="px-4 py-3 bg-base-100 flex-row items-center border-b border-base-200 gap-4">
+              <View className="flex-1" style={{ marginBottom: -8 }}>
+                <Input
+                  placeholder="Search Location"
+                  value={searchQuery}
+                  onChangeText={setSearchQuery}
+                  onSubmitEditing={handleSearch}
+                  returnKeyType="search"
+                  containerStyle={{ marginBottom: 0 }}
+                  leftIcon="search"
+                />
+              </View>
+              <Button
+                onPress={handleSearch}
+                isLoading={searching}
+                label="Go"
+                variant="primary"
+                soft
+                size="md"
+                className=""
               />
             </View>
-            <Button 
-              onPress={handleSearch} 
-              isLoading={searching} 
-              label="Go" 
-              variant="primary"
-              soft
-              size="md"
-              className="my-auto"
-            />
-          </View>
 
-          <View className="flex-1 relative">
-            <WebView
-              ref={webViewRef}
-              source={{ html: htmlContent }}
-              onMessage={handleMessage}
-              style={{ flex: 1 }}
-              javaScriptEnabled={true}
-              scrollEnabled={false}
-              bounces={false}
-              startInLoadingState={true}
-              renderLoading={() => (
-                <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f0f0f0' }}>
-                  <ActivityIndicator size="large" color={theme.primary} />
-                </View>
+            <View className="flex-1 relative">
+              {showWebView && (
+                <WebView
+                  ref={webViewRef}
+                  source={{ html: htmlContent }}
+                  onMessage={handleMessage}
+                  style={{ flex: 1 }}
+                  javaScriptEnabled={true}
+                  scrollEnabled={false}
+                  bounces={false}
+                  startInLoadingState={true}
+                  renderLoading={() => (
+                    <View
+                      style={{
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        justifyContent: "center",
+                        alignItems: "center",
+                        backgroundColor: "#f0f0f0",
+                      }}
+                    >
+                      <ActivityIndicator size="large" color={theme.primary} />
+                    </View>
+                  )}
+                />
               )}
-            />
-          </View>
 
-          <View className="p-4 bg-base-100 border-t border-base-300 pb-8">
-            <Button
-              label="Confirm Location"
-              onPress={handleConfirmLocation}
-              isLoading={loading}
-              variant="primary"
-            />
-          </View>
+              <TouchableOpacity
+                onPress={handleCurrentLocation}
+                disabled={fetchingCurrentLocation}
+                className="absolute bottom-6 right-4 w-12 h-12 rounded-full items-center justify-center shadow-lg border border-base-200"
+                style={{
+                  backgroundColor: theme.base100,
+                  elevation: 5,
+                  shadowColor: "#000",
+                  shadowOffset: { width: 0, height: 2 },
+                  shadowOpacity: 0.25,
+                  shadowRadius: 3.84,
+                }}
+              >
+                {fetchingCurrentLocation ? (
+                  <ActivityIndicator size="small" color={theme.primary} />
+                ) : (
+                  <Ionicons name="locate" size={24} color={theme.primary} />
+                )}
+              </TouchableOpacity>
+            </View>
+
+            <View className="p-4 bg-base-100 border-t border-base-300 pb-8">
+              <Button
+                label="Confirm Location"
+                onPress={handleConfirmLocation}
+                isLoading={loading}
+                variant="primary"
+              />
+            </View>
           </View>
         )}
       </Modal>

package/templates/layers/react-native/base/src/config/api.ts

@@ -4,11 +4,11 @@ import { ApiResponse } from "../types/common.type";
 
 declare module 'axios' {
   export interface AxiosInstance {
-    get<T = any, R = AxiosResponse<ApiResponse<T>>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>;
-    delete<T = any, R = AxiosResponse<ApiResponse<T>>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>;
-    post<T = any, R = AxiosResponse<ApiResponse<T>>, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<R>;
-    put<T = any, R = AxiosResponse<ApiResponse<T>>, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<R>;
-    patch<T = any, R = AxiosResponse<ApiResponse<T>>, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<R>;
+    get<T = unknown, R = AxiosResponse<ApiResponse<T>>, D = unknown>(url: string, config?: AxiosRequestConfig<D>): Promise<R>;
+    delete<T = unknown, R = AxiosResponse<ApiResponse<T>>, D = unknown>(url: string, config?: AxiosRequestConfig<D>): Promise<R>;
+    post<T = unknown, R = AxiosResponse<ApiResponse<T>>, D = unknown>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<R>;
+    put<T = unknown, R = AxiosResponse<ApiResponse<T>>, D = unknown>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<R>;
+    patch<T = unknown, R = AxiosResponse<ApiResponse<T>>, D = unknown>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<R>;
   }
 }
 

package/templates/layers/react-native/base/src/services/auth.service.ts

@@ -14,9 +14,11 @@ export const authService = {
   login: (email: string, password: string) =>
     api.post("/auth/login", { email, password }),
 
+  googleLogin: (idToken: string) => api.post("/auth/google", { idToken }),
+
   getMe: () => api.get("/auth/me"),
 
-  updateMe: (data: any) => api.put("/auth/me", data),
+  updateMe: (data: FormData | Record<string, unknown>) => api.put("/auth/me", data),
 
   logout: () => api.post("/auth/logout"),
 

package/templates/layers/react-native/base/src/services/permission.service.ts

@@ -175,13 +175,11 @@ class PermissionService {
     const Notifications = require("expo-notifications");
 
     if (!Device.isDevice) {
-      console.log("Must use physical device for Push Notifications");
       return null;
     }
 
     const hasPermission = await this.requirePermission("notification");
     if (!hasPermission) {
-      console.log("User denied push notification permissions");
       return null;
     }
 

package/templates/layers/react-native/base/src/services/socket.service.ts

@@ -17,13 +17,6 @@ export const initializeSocket = async () => {
     transports: ['websocket'],
   });
 
-  socket.on('connect', () => {
-    console.log('Connected to socket server');
-  });
-
-  socket.on('disconnect', () => {
-    console.log('Disconnected from socket server');
-  });
 };
 
 export const getSocket = () => socket;

package/templates/layers/react-native/base/src/store/useAuthStore.ts

@@ -11,6 +11,20 @@ import { useNotificationStore } from "./useNotificationStore";
 // called from a useEffect, the promise is already resolved or very close.
 const _prefetchedUser: Promise<User | null> = get("user");
 
+interface ApiErrorResponse {
+  response?: {
+    data?: {
+      message?: string;
+    };
+  };
+  message?: string;
+}
+
+const getErrorMessage = (err: unknown): string => {
+  const apiErr = err as ApiErrorResponse;
+  return apiErr.response?.data?.message || apiErr.message || "An unexpected error occurred";
+};
+
 export interface AuthState {
   user: User | null;
   loading: boolean;
@@ -31,6 +45,7 @@ export interface AuthState {
     role?: string,
   ) => Promise<boolean>;
   login: (email: string, password: string) => Promise<boolean>;
+  googleLogin: (idToken: string) => Promise<boolean>;
   demoLogin: () => Promise<void>;
   getMe: () => Promise<void>;
   updateProfile: (updates: Partial<User> | FormData) => Promise<boolean>;
@@ -111,9 +126,9 @@ export const useAuthStore = create<AuthState>((set) => ({
     try {
       await authService.sendOtp(email);
       return true;
-    } catch (err: any) {
+    } catch (err: unknown) {
       set({
-        error: err.response?.data?.message || err.message,
+        error: getErrorMessage(err),
         loading: false,
       });
       return false;
@@ -154,9 +169,9 @@ export const useAuthStore = create<AuthState>((set) => ({
       notifStore.registerForPushNotificationsAsync();
       notifStore.fetchNotifications();
       return true;
-    } catch (err: any) {
+    } catch (err: unknown) {
       set({
-        error: err.response?.data?.message || err.message,
+        error: getErrorMessage(err),
         loading: false,
       });
       return false;
@@ -185,9 +200,39 @@ export const useAuthStore = create<AuthState>((set) => ({
       notifStore.registerForPushNotificationsAsync();
       notifStore.fetchNotifications();
       return true;
-    } catch (err: any) {
+    } catch (err: unknown) {
+      set({
+        error: getErrorMessage(err),
+        loading: false,
+      });
+      return false;
+    } finally {
+      set({ loading: false });
+    }
+  },
+
+  googleLogin: async (idToken: string) => {
+    set({ loading: true, error: null });
+    try {
+      const { data } = await authService.googleLogin(idToken);
+      if (data.data?.token) {
+        save("token", data.data.token);
+      }
+      const user = data.data?.user || data.data;
+      if (user) save("user", user);
+      set({
+        user,
+        loading: false,
+      });
+      initializeSocket();
+      const notifStore = useNotificationStore.getState();
+      notifStore.listenForSocketEvents();
+      notifStore.registerForPushNotificationsAsync();
+      notifStore.fetchNotifications();
+      return true;
+    } catch (err: unknown) {
       set({
-        error: err.response?.data?.message || err.message,
+        error: getErrorMessage(err),
         loading: false,
       });
       return false;
@@ -231,9 +276,9 @@ export const useAuthStore = create<AuthState>((set) => ({
       const { data } = await authService.updateMe(updates);
       set({ user: data.data, loading: false });
       return true;
-    } catch (err: any) {
+    } catch (err: unknown) {
       set({
-        error: err.response?.data?.message || err.message,
+        error: getErrorMessage(err),
         loading: false,
       });
       return false;
@@ -264,8 +309,8 @@ export const useAuthStore = create<AuthState>((set) => ({
     try {
       await authService.genOtp(email);
       return true;
-    } catch (err: any) {
-      set({ error: err.response?.data?.message || err.message, loading: false });
+    } catch (err: unknown) {
+      set({ error: getErrorMessage(err), loading: false });
       return false;
     } finally {
       set({ loading: false });
@@ -278,8 +323,8 @@ export const useAuthStore = create<AuthState>((set) => ({
       const { data } = await authService.verifyOtp(email, otp);
       if (data.token) save("token", data.token);
       return true;
-    } catch (err: any) {
-      set({ error: err.response?.data?.message || err.message, loading: false });
+    } catch (err: unknown) {
+      set({ error: getErrorMessage(err), loading: false });
       return false;
     } finally {
       set({ loading: false });
@@ -291,8 +336,8 @@ export const useAuthStore = create<AuthState>((set) => ({
     try {
       await authService.resetPassword(newPassword);
       return true;
-    } catch (err: any) {
-      set({ error: err.response?.data?.message || err.message, loading: false });
+    } catch (err: unknown) {
+      set({ error: getErrorMessage(err), loading: false });
       return false;
     } finally {
       set({ loading: false });
@@ -304,8 +349,8 @@ export const useAuthStore = create<AuthState>((set) => ({
     try {
       await authService.changePassword(oldPassword, newPassword);
       return true;
-    } catch (err: any) {
-      set({ error: err.response?.data?.message || err.message, loading: false });
+    } catch (err: unknown) {
+      set({ error: getErrorMessage(err), loading: false });
       return false;
     } finally {
       set({ loading: false });

package/templates/layers/react-native/base/src/store/useNotificationStore.ts

@@ -12,7 +12,7 @@ export interface AppNotification {
   type: string;
   url: string | null;
   isRead: boolean;
-  metadata: any | null;
+  metadata: Record<string, unknown> | null;
   createdAt: string;
 }
 
@@ -47,9 +47,12 @@ export const useNotificationStore = create<NotificationState>((set, get) => ({
         unreadCount,
         loading: false,
       });
-    } catch (error: any) {
+    } catch (error: unknown) {
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response
+          ?.data?.message || "Failed to fetch notifications";
       set({
-        error: error.response?.data?.message || "Failed to fetch notifications",
+        error: message,
         loading: false,
       });
     }
@@ -58,45 +61,38 @@ export const useNotificationStore = create<NotificationState>((set, get) => ({
   markAsRead: async (id: string) => {
     try {
       // Optimistic update
-      const { notifications, unreadCount } = get();
-      const updated = notifications.map(n => 
-        n.id === id ? { ...n, isRead: true } : n
-      );
-      
-      set({ 
-        notifications: updated, 
-        unreadCount: Math.max(0, unreadCount - 1) 
-      });
+      set((state) => ({
+        notifications: state.notifications.map((n) =>
+          n.id === id ? { ...n, isRead: true } : n
+        ),
+        unreadCount: Math.max(0, state.unreadCount - 1),
+      }));
 
       await notificationService.markAsRead(id);
-    } catch{
-      // Revert if failed
+    } catch {
+      // Revert if API fails
       get().fetchNotifications();
     }
   },
 
   markAllAsRead: async () => {
     try {
-      const { notifications } = get();
-      const updated = notifications.map(n => ({ ...n, isRead: true }));
-      
-      set({ 
-        notifications: updated, 
-        unreadCount: 0 
-      });
+      set((state) => ({
+        notifications: state.notifications.map((n) => ({ ...n, isRead: true })),
+        unreadCount: 0,
+      }));
 
       await notificationService.markAllAsRead();
-    } catch{
+    } catch {
       get().fetchNotifications();
     }
   },
 
   registerForPushNotificationsAsync: async () => {
-    let token;
+    let token: string | undefined;
 
-    const isExpoGo = Constants.appOwnership === 'expo';
-    if (isExpoGo && Platform.OS === 'android') {
-      console.log('Skipping push notification registration: not supported in Expo Go on Android (SDK 53+).');
+    const isExpoGo = Constants.appOwnership === "expo";
+    if (isExpoGo && Platform.OS === "android") {
       return;
     }
 
@@ -106,12 +102,12 @@ export const useNotificationStore = create<NotificationState>((set, get) => ({
       // eslint-disable-next-line @typescript-eslint/no-require-imports
       const Device = require("expo-device");
 
-      if (Platform.OS === 'android') {
-        await Notifications.setNotificationChannelAsync('default', {
-          name: 'default',
+      if (Platform.OS === "android") {
+        await Notifications.setNotificationChannelAsync("default", {
+          name: "default",
           importance: Notifications.AndroidImportance.MAX,
           vibrationPattern: [0, 250, 250, 250],
-          lightColor: '#FF231F7C',
+          lightColor: "#FF231F7C",
         });
       }
 
@@ -119,13 +115,12 @@ export const useNotificationStore = create<NotificationState>((set, get) => ({
         const { status: existingStatus } = await Notifications.getPermissionsAsync();
         let finalStatus = existingStatus;
         
-        if (existingStatus !== 'granted') {
+        if (existingStatus !== "granted") {
           const { status } = await Notifications.requestPermissionsAsync();
           finalStatus = status;
         }
         
-        if (finalStatus !== 'granted') {
-          console.log('Failed to get push token for push notification!');
+        if (finalStatus !== "granted") {
           return;
         }
         
@@ -136,17 +131,16 @@ export const useNotificationStore = create<NotificationState>((set, get) => ({
 
         token = (await Notifications.getExpoPushTokenAsync({ projectId })).data;
         
-        // Send token to backend
-        try {
-          await notificationService.registerPushToken(token);
-        } catch (e) {
-          console.error("Failed to save push token to server", e);
+        if (token) {
+          try {
+            await notificationService.registerPushToken(token);
+          } catch {
+            // Token registration failed silently
+          }
         }
-      } else {
-        console.log('Must use physical device for Push Notifications');
       }
-    } catch (e) {
-      console.warn("Failed to setup push notifications dynamically:", e);
+    } catch {
+      // Notification setup failed silently
     }
 
     return token;