@imksh/create 1.0.23 → 1.0.25

package/templates/mern-react-native/mobile/src/config/tabNavigation.ts

@@ -13,19 +13,49 @@ export const tabNavigationConfig: TabConfig[] = [
     baseIcon: "home",
   },
   {
-    name: "search",
-    title: "Search",
-    baseIcon: "search",
+    name: "explore",
+    title: "Explore",
+    baseIcon: "compass",
   },
   {
-    name: "dashboard",
-    title: "Dashboard",
-    baseIcon: "cube",
+    name: "payments",
+    title: "Payments",
+    baseIcon: "wallet",
+  },
+  {
+    name: "notifications",
+    title: "Notifications",
+    baseIcon: "notifications",
   },
   {
     name: "profile",
     title: "Profile",
-    baseIcon: "person",
+    baseIcon: "person-circle",
+  },
+  {
+    name: "properties",
+    title: "Properties",
+    baseIcon: "business",
+  },
+  {
+    name: "tenant",
+    title: "Tenant",
+    baseIcon: "people",
+  },
+  {
+    name: "users",
+    title: "Users",
+    baseIcon: "people",
+  },
+  {
+    name: "requests",
+    title: "Requests",
+    baseIcon: "clipboard",
+  },
+  {
+    name: "more",
+    title: "More",
+    baseIcon: "ellipsis-horizontal",
   },
 ];
 

package/templates/mern-react-native/mobile/src/db/index.ts

@@ -0,0 +1,9 @@
+import { drizzle } from 'drizzle-orm/expo-sqlite';
+import * as SQLite from 'expo-sqlite';
+import * as schema from './schema';
+
+// Open the local database. If it doesn't exist, it will be created.
+const expoDb = SQLite.openDatabaseSync('imksh.db');
+
+// Pass the database instance to Drizzle
+export const db = drizzle(expoDb, { schema });

package/templates/mern-react-native/mobile/src/db/schema.ts

@@ -0,0 +1,14 @@
+import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core';
+
+export const users = sqliteTable('users', {
+  id: integer('id').primaryKey({ autoIncrement: true }),
+  email: text('email').notNull().unique(),
+  name: text('name'),
+  role: text('role').default('user'),
+  createdAt: text('created_at').notNull().default('CURRENT_TIMESTAMP'),
+});
+
+export const preferences = sqliteTable('preferences', {
+  key: text('key').primaryKey(),
+  value: text('value').notNull(),
+});

package/templates/mern-react-native/mobile/src/hooks/useDebounce.ts

@@ -0,0 +1,17 @@
+import { useState, useEffect } from "react";
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

package/templates/mern-react-native/mobile/src/services/socket.service.ts

@@ -0,0 +1,36 @@
+import { io, Socket } from 'socket.io-client';
+import { get } from '../utils/storage';
+import Constants from 'expo-constants';
+
+let socket: Socket | null = null;
+
+// Set your backend socket URL
+const SOCKET_URL = Constants.expoConfig?.extra?.apiUrl || 'http://localhost:3000';
+
+export const initializeSocket = async () => {
+  if (socket) return;
+  const token = await get('token');
+  if (!token) return;
+
+  socket = io(SOCKET_URL, {
+    auth: { token },
+    transports: ['websocket'],
+  });
+
+  socket.on('connect', () => {
+    console.log('Connected to socket server');
+  });
+
+  socket.on('disconnect', () => {
+    console.log('Disconnected from socket server');
+  });
+};
+
+export const getSocket = () => socket;
+
+export const disconnectSocket = () => {
+  if (socket) {
+    socket.disconnect();
+    socket = null;
+  }
+};

package/templates/mern-react-native/mobile/src/store/useAuthStore.ts

@@ -1,20 +1,15 @@
 import { create } from "zustand";
 import { authService } from "../services/auth.service";
-import { save, remove } from "../utils/storage";
-
-export interface User {
-  _id: string;
-  name: string;
-  email: string;
-  phone?: string;
-  role: string;
-  avatar?: {
-    url?: string;
-    publicId?: string;
-  };
-  createdAt?: string;
-  updatedAt?: string;
-}
+import { save, remove, get } from "../utils/storage";
+import { User } from "../types/auth.type";
+import { initializeSocket, disconnectSocket } from "../services/socket.service";
+import { useNotificationStore } from "./useNotificationStore";
+
+// ── Module-level prefetch ──────────────────────────────────────────────────
+// Kick off the AsyncStorage read the instant this module is imported
+// (before any React component mounts). By the time loadCachedUser() is
+// called from a useEffect, the promise is already resolved or very close.
+const _prefetchedUser: Promise<User | null> = get("user");
 
 export interface AuthState {
   user: User | null;
@@ -34,6 +29,13 @@ export interface AuthState {
   getMe: () => Promise<void>;
   updateProfile: (updates: Partial<User> | FormData) => Promise<boolean>;
   logout: () => Promise<void>;
+  genOtp: (email: string) => Promise<boolean>;
+  verifyOtp: (email: string, otp: string) => Promise<boolean>;
+  resetPassword: (newPassword: string) => Promise<boolean>;
+  changePassword: (oldPassword: string, newPassword: string) => Promise<boolean>;
+  setUser: (user: User) => void;
+  clearError: () => void;
+  loadCachedUser: () => Promise<void>;
 }
 
 export const useAuthStore = create<AuthState>((set) => ({
@@ -42,6 +44,27 @@ export const useAuthStore = create<AuthState>((set) => ({
   isCheckingAuth: true,
   error: null,
 
+  setUser: (user: User) => set({ user }),
+
+  clearError: () => set({ error: null }),
+
+  loadCachedUser: async () => {
+    // Await the already-in-flight prefetch — typically resolves in <1ms here
+    const cached = await _prefetchedUser;
+    if (cached) {
+      set({ user: cached, isCheckingAuth: false });
+      // Re-establish socket + push on app resume with a cached session
+      initializeSocket();
+      const notifStore = useNotificationStore.getState();
+      notifStore.listenForSocketEvents();
+      notifStore.registerForPushNotificationsAsync();
+      notifStore.fetchNotifications();
+    } else {
+      // No cache — mark auth check done so routing doesn't hang
+      set({ isCheckingAuth: false });
+    }
+  },
+
   sendOtp: async (email: string) => {
     set({ loading: true, error: null });
     try {
@@ -74,13 +97,21 @@ export const useAuthStore = create<AuthState>((set) => ({
         otp,
         role,
       );
-      if (data.token) {
-        save("token", data.token);
+      if (data.data?.token) {
+        save("token", data.data.token);
       }
+      const user = data.data?.user;
+      if (user) save("user", user);
       set({
-        user: data.data,
+        user,
         loading: false,
       });
+      // Initialise socket + push after signup
+      initializeSocket();
+      const notifStore = useNotificationStore.getState();
+      notifStore.listenForSocketEvents();
+      notifStore.registerForPushNotificationsAsync();
+      notifStore.fetchNotifications();
       return true;
     } catch (err: any) {
       set({
@@ -97,13 +128,21 @@ export const useAuthStore = create<AuthState>((set) => ({
     set({ loading: true, error: null });
     try {
       const { data } = await authService.login(email, password);
-      if (data.token) {
-        save("token", data.token);
+      if (data.data?.token) {
+        save("token", data.data.token);
       }
+      const user = data.data?.user;
+      if (user) save("user", user);
       set({
-        user: data.data,
+        user,
         loading: false,
       });
+      // Initialise socket + push after login
+      initializeSocket();
+      const notifStore = useNotificationStore.getState();
+      notifStore.listenForSocketEvents();
+      notifStore.registerForPushNotificationsAsync();
+      notifStore.fetchNotifications();
       return true;
     } catch (err: any) {
       set({
@@ -123,7 +162,7 @@ export const useAuthStore = create<AuthState>((set) => ({
     save("token", "demo-token-123");
     set({
       user: {
-        _id: "demo_user_123",
+        id: "demo_user_123",
         name: "Demo User",
         email: "demo@imksh.com",
         role: "admin",
@@ -133,12 +172,13 @@ export const useAuthStore = create<AuthState>((set) => ({
   },
 
   getMe: async () => {
-    set({ isCheckingAuth: true });
     try {
       const { data } = await authService.getMe();
-      set({ user: data.data, isCheckingAuth: false });
-    } catch {
-      set({ isCheckingAuth: false });
+      const user = data.data;
+      // Always update cache with fresh server data
+      if (user) save("user", user);
+      set({ user, isCheckingAuth: false });
+      // Network failed — cached user (already loaded) stays in place
     } finally {
       set({ isCheckingAuth: false });
     }
@@ -167,7 +207,9 @@ export const useAuthStore = create<AuthState>((set) => ({
     } catch {
       // ignore errors — cookie may already be expired
     } finally {
-      remove("token");
+      await remove("token");
+      await remove("user");   // clear cached user on logout
+      disconnectSocket();
       set({ loading: false });
     }
     set({
@@ -175,4 +217,57 @@ export const useAuthStore = create<AuthState>((set) => ({
       error: null,
     });
   },
+
+  genOtp: async (email: string) => {
+    set({ loading: true, error: null });
+    try {
+      await authService.genOtp(email);
+      return true;
+    } catch (err: any) {
+      set({ error: err.response?.data?.message || err.message, loading: false });
+      return false;
+    } finally {
+      set({ loading: false });
+    }
+  },
+
+  verifyOtp: async (email: string, otp: string) => {
+    set({ loading: true, error: null });
+    try {
+      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 });
+      return false;
+    } finally {
+      set({ loading: false });
+    }
+  },
+
+  resetPassword: async (newPassword: string) => {
+    set({ loading: true, error: null });
+    try {
+      await authService.resetPassword(newPassword);
+      return true;
+    } catch (err: any) {
+      set({ error: err.response?.data?.message || err.message, loading: false });
+      return false;
+    } finally {
+      set({ loading: false });
+    }
+  },
+
+  changePassword: async (oldPassword: string, newPassword: string) => {
+    set({ loading: true, error: null });
+    try {
+      await authService.changePassword(oldPassword, newPassword);
+      return true;
+    } catch (err: any) {
+      set({ error: err.response?.data?.message || err.message, loading: false });
+      return false;
+    } finally {
+      set({ loading: false });
+    }
+  },
 }));

package/templates/mern-react-native/mobile/src/store/useNotificationStore.ts

@@ -0,0 +1,53 @@
+import { create } from 'zustand';
+import { getSocket } from '../services/socket.service';
+import * as Notifications from 'expo-notifications';
+
+export interface NotificationState {
+  notifications: any[];
+  pushToken: string | null;
+  listenForSocketEvents: () => void;
+  registerForPushNotificationsAsync: () => Promise<void>;
+  fetchNotifications: () => Promise<void>;
+}
+
+export const useNotificationStore = create<NotificationState>((set, get) => ({
+  notifications: [],
+  pushToken: null,
+
+  listenForSocketEvents: () => {
+    const socket = getSocket();
+    if (!socket) return;
+
+    socket.on('new_notification', (data) => {
+      set((state) => ({ notifications: [data, ...state.notifications] }));
+    });
+  },
+
+  registerForPushNotificationsAsync: async () => {
+    try {
+      const { status: existingStatus } = await Notifications.getPermissionsAsync();
+      let finalStatus = existingStatus;
+      if (existingStatus !== 'granted') {
+        const { status } = await Notifications.requestPermissionsAsync();
+        finalStatus = status;
+      }
+      if (finalStatus !== 'granted') {
+        console.log('Failed to get push token for push notification!');
+        return;
+      }
+      // Note: projectId is required for Expo Go and EAS.
+      const token = (await Notifications.getExpoPushTokenAsync()).data;
+      set({ pushToken: token });
+      
+      // Here you would typically send the pushToken to your backend
+    } catch (e) {
+      console.warn("Failed to register for push notifications", e);
+    }
+  },
+
+  fetchNotifications: async () => {
+    // API call to fetch notifications could go here
+    // e.g., const data = await api.get('/notifications');
+    set({ notifications: [] });
+  }
+}));

package/templates/mern-react-native/mobile/src/types/auth.type.ts

@@ -0,0 +1,14 @@
+export interface User {
+  id: string; // Updated from _id for Prisma consistency
+  _id?: string; // Fallback for mongo legacy if any
+  name: string;
+  email: string;
+  phone?: string;
+  role: string;
+  avatar?: {
+    url?: string;
+    publicId?: string;
+  };
+  createdAt?: string;
+  updatedAt?: string;
+}

package/templates/mern-react-native/mobile/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
+    "jsx": "react-jsx",
     "strict": true,
     "noImplicitAny": false,
     "paths": {

package/templates/mern-ts/client/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/react-native/babel.config.js

@@ -6,6 +6,7 @@ module.exports = function (api) {
       "nativewind/babel",
     ],
     plugins: [
+      ["inline-import", { "extensions": [".sql"] }],
       "react-native-reanimated/plugin" 
     ],
   };

package/templates/react-native/drizzle.config.ts

@@ -0,0 +1,8 @@
+import type { Config } from 'drizzle-kit';
+
+export default {
+  schema: './src/db/schema.ts',
+  out: './drizzle',
+  dialect: 'sqlite',
+  driver: 'expo',
+} satisfies Config;

package/templates/react-native/expo-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="expo/types" />
+
+// NOTE: This file should not be edited and should be in your git ignore

package/templates/react-native/package.json

@@ -11,6 +11,7 @@
     "@react-navigation/bottom-tabs": "^7.18.10",
     "axios": "^1.18.1",
     "babel-preset-expo": "^57.0.3",
+    "drizzle-orm": "^0.45.2",
     "expo": "~57.0.7",
     "expo-blur": "~57.0.2",
     "expo-constants": "~57.0.6",
@@ -18,10 +19,12 @@
     "expo-font": "~57.0.1",
     "expo-glass-effect": "~57.0.1",
     "expo-image": "~57.0.1",
+    "expo-linear-gradient": "^57.0.1",
     "expo-linking": "~57.0.3",
     "expo-notifications": "~57.0.6",
     "expo-router": "~57.0.7",
     "expo-splash-screen": "~57.0.4",
+    "expo-sqlite": "^57.0.1",
     "expo-status-bar": "~57.0.1",
     "expo-symbols": "~57.0.1",
     "expo-system-ui": "~57.0.1",
@@ -45,11 +48,14 @@
     "react-native-toast-message": "^2.4.0",
     "react-native-web": "~0.21.0",
     "react-native-worklets": "0.10.0",
+    "socket.io-client": "^4.8.3",
     "tailwindcss": "^3.4.19",
     "zustand": "^5.0.14"
   },
   "devDependencies": {
     "@types/react": "~19.2.2",
+    "babel-plugin-inline-import": "^3.0.0",
+    "drizzle-kit": "^0.31.10",
     "eslint": "^9.0.0",
     "eslint-config-expo": "~57.0.0",
     "typescript": "~6.0.3"

package/templates/react-native/src/app/(auth)/_layout.tsx

@@ -0,0 +1,12 @@
+import { Stack } from 'expo-router';
+
+export default function AuthLayout() {
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="login" />
+      <Stack.Screen name="forgot-password" />
+      <Stack.Screen name="edit-profile" options={{ presentation: 'modal' }} />
+      <Stack.Screen name="change-password" options={{ presentation: 'modal' }} />
+    </Stack>
+  );
+}

package/templates/react-native/src/app/(auth)/change-password.tsx

@@ -0,0 +1,112 @@
+import React, { useState , useCallback } from "react";
+import { View } from "react-native";
+import { useAuthStore } from "../../store/useAuthStore";
+import { Txt } from "../../components/common/Typography";
+import { router, useFocusEffect } from "expo-router";
+import ScrollContainer from "../../components/ui/layout/ScrollContainer";
+import Input from "../../components/ui/inputs/Input";
+import Button from "../../components/ui/buttons/Button";
+import ScreenHeader from "@/components/common/ScreenHeader";
+
+export default function ChangePasswordScreen() {
+  const { changePassword, loading, error, clearError } = useAuthStore();
+
+  useFocusEffect(
+    useCallback(() => {
+      return () => clearError();
+    }, [clearError])
+  );
+
+  const [oldPassword, setOldPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+
+  const [showOldPassword, setShowOldPassword] = useState(false);
+  const [showNewPassword, setShowNewPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+
+  const [validationError, setValidationError] = useState("");
+
+  const handleSave = async () => {
+    setValidationError("");
+    if (!oldPassword || !newPassword || !confirmPassword) {
+      setValidationError("Please fill all fields");
+      return;
+    }
+
+    if (newPassword !== confirmPassword) {
+      setValidationError("New passwords do not match");
+      return;
+    }
+
+    const success = await changePassword(oldPassword, newPassword);
+    if (success) {
+      router.back();
+    }
+  };
+
+  return (
+    <>
+      <ScreenHeader title="Change Password" />
+      <ScrollContainer
+        contentContainerStyle={{
+          flexGrow: 1,
+          padding: 16,
+        }}
+        className="bg-base-100"
+      >
+        {error || validationError ? (
+          <View className="bg-error/10 border border-error/20 rounded-2xl p-3 mb-4">
+            <Txt variant="md" className="text-error text-xs text-center">
+              ⚠️ {validationError || error}
+            </Txt>
+          </View>
+        ) : null}
+
+        <View className="gap-4">
+          <Input
+            leftIcon="lock-closed"
+            rightIcon={showOldPassword ? "eye-off" : "eye"}
+            onRightIconPress={() => setShowOldPassword(!showOldPassword)}
+            placeholder="Current Password"
+            value={oldPassword}
+            onChangeText={setOldPassword}
+            secureTextEntry={!showOldPassword}
+          />
+
+          <Input
+            leftIcon="key"
+            rightIcon={showNewPassword ? "eye-off" : "eye"}
+            onRightIconPress={() => setShowNewPassword(!showNewPassword)}
+            placeholder="New Password"
+            value={newPassword}
+            onChangeText={setNewPassword}
+            secureTextEntry={!showNewPassword}
+          />
+
+          <Input
+            leftIcon="checkmark-circle"
+            rightIcon={showConfirmPassword ? "eye-off" : "eye"}
+            onRightIconPress={() =>
+              setShowConfirmPassword(!showConfirmPassword)
+            }
+            placeholder="Confirm New Password"
+            value={confirmPassword}
+            onChangeText={setConfirmPassword}
+            secureTextEntry={!showConfirmPassword}
+          />
+
+          <View className="mt-4">
+            <Button
+              label="Update Password"
+              onPress={handleSave}
+              isLoading={loading}
+              variant="primary"
+              isFullWidth
+            />
+          </View>
+        </View>
+      </ScrollContainer>
+    </>
+  );
+}