@imksh/create 1.0.23 → 1.0.25

package/templates/react-native/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/react-native/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/react-native/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/react-native/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/react-native/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/react-native/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/react-native/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/react-native/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/react-native/tsconfig.json

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

package/templates/react-ts/src/vite-env.d.ts

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

package/templates/mern-react-native/mobile/.env

@@ -1,2 +0,0 @@
-EXPO_PUBLIC_API_URL=http://10.91.141.90:5001/api
-EXPO_PUBLIC_APP_NAME=MyApp

package/templates/mern-react-native/mobile/.env.example

@@ -1,2 +0,0 @@
-EXPO_PUBLIC_API_URL=your_api
-EXPO_PUBLIC_APP_NAME=MyApp

package/templates/mern-react-native/mobile/.vscode/extensions.json

@@ -1 +0,0 @@
-{ "recommendations": ["expo.vscode-expo-tools"] }

package/templates/mern-react-native/mobile/.vscode/settings.json

@@ -1,7 +0,0 @@
-{
-  "editor.codeActionsOnSave": {
-    "source.fixAll": "explicit",
-    "source.organizeImports": "explicit",
-    "source.sortMembers": "explicit"
-  }
-}

package/templates/mern-react-native/mobile/README.md

@@ -1,159 +0,0 @@
-# 📱 Mobile App (React Native + Expo)
-
-This is the mobile application of the starter template, built entirely with **React Native** and **Expo**. It is designed to be a highly scalable boilerplate featuring a modern tech stack, a unified permissions system, and a robust custom UI component library.
-
-## ✨ Key Features
-
-- **Expo Router**: File-based routing that makes navigation predictable and deeply linkable.
-- **NativeWind (Tailwind CSS)**: Styling is powered by Tailwind CSS classes, complete with dynamic Light/Dark mode support.
-- **Custom UI Library**: Beautiful, highly-reusable components built from scratch (e.g., `Tabs`, `Button`, `Image`, `ScrollContainer`, `Input`) designed to work perfectly across both themes.
-- **Zustand State Management**: Lightweight and fast global state management, used to handle the user's auth session securely.
-- **Unified Permission Service**: A centralized handler for iOS and Android hardware permissions using `react-native-permissions`.
-- **Push Notification Pipeline**: Built-in support for generating Expo Push Tokens on physical devices and syncing them to your backend.
-
-## 🧩 Included UI Components
-
-The starter kit comes with a massive, completely customizable, and gesture-driven UI library built from scratch out of atomic elements.
-
-- **Layout**: `Container`, `Section`, `ScrollContainer`, `HStack`, `VStack`
-- **Buttons**: `Button` (with variants, sizes, and soft props), `IconButton`, `FloatingActionButton`
-- **Data Display**: `Avatar`, `Badge`, `Accordion`, `SwipeableRow`, `Card`
-- **Inputs**: `Input`, `Checkbox`, `Radio`, `Switch`, `Slider`, `SearchBar`
-- **Feedback & Loading**: `Spinner`, `ProgressBar`, `CircularProgress`, `Skeleton`, `GestureWrapper`
-- **Navigation**: `Tabs` (Underline & Button variants)
-- **Overlay & Modals**: `BottomModal` (Gesture-driven bottom sheet)
-
-## 🔌 Included Services
-
-Pre-configured service wrappers allow you to focus on logic rather than boilerplate:
-
-- **`auth.service.ts`**: Prebuilt Axios integrations for `sendOtp`, `signup`, `login`, `updateMe`, `logout`, and `savePushToken`.
-- **`permission.service.ts`**: A unified permissions handler exposing `requirePermission`, `openSettingsForApp`, and `registerForPushNotificationsAsync`.
-
----
-
-## 🛠 Tech Stack
-
-- **Framework**: Expo / React Native
-- **Styling**: NativeWind (Tailwind v3) & `react-native-reanimated`
-- **Routing**: `expo-router`
-- **State**: `zustand`
-- **Storage**: `@react-native-async-storage/async-storage`
-- **API**: `axios`
-
----
-
-## 🚀 Getting Started
-
-### Prerequisites
-
-Make sure you have the following installed on your machine:
-
-- Node.js (v18+)
-- [EAS CLI](https://docs.expo.dev/build/setup/) (`npm install -g eas-cli`)
-- iOS Simulator (macOS only) or Android Emulator
-
-### Installation
-
-1. Navigate to the `mobile` directory:
-   ```bash
-   cd mobile
-   ```
-2. Install dependencies:
-   ```bash
-   npm install
-   ```
-3. Start the development server:
-   ```bash
-   npm run dev
-   ```
-4. Press `i` to open the app on an iOS Simulator, or `a` to open it on an Android Emulator.
-
----
-
-## 🏗 Project Structure
-
-```bash
-src/
-├── app/                  # Expo Router screens (e.g., _layout.tsx, login.tsx, (tabs)/)
-├── components/           # Reusable UI components
-│   ├── common/           # Generic components (Loading, etc.)
-│   └── ui/               # Custom UI library (Button, Tabs, Image, Input)
-├── constants/            # Theme tokens (Colors, Typography)
-├── services/             # API and business logic wrappers
-│   ├── auth.service.ts   # Axios API calls for authentication
-│   └── permission.service.ts # Unified hardware permission logic
-├── store/                # Zustand global stores (useAuthStore.ts)
-└── utils/                # Helper functions (storage.ts, api.ts)
-```
-
----
-
-## 📦 Build Instructions
-
-This template is configured for both cloud-based builds (via EAS) and fast local compilations using standard Gradle scripts.
-
-### Cloud Builds (Expo Application Services)
-
-If you don't have Android Studio or Xcode configured, you can build directly in the cloud:
-
-```bash
-# Build an Android APK (Uses the "preview" profile in eas.json)
-npm run build:eas:apk
-
-# Build an Android App Bundle (.aab) for the Play Store (Uses "production" profile)
-npm run build:eas:aab
-
-# Build an iOS app
-npm run build:ios
-```
-
-### Local Builds (Requires Android Studio/SDK)
-
-If you have your local SDK set up, you can compile extremely fast on your own machine:
-
-```bash
-# Compile a local .apk
-npm run build:apk
-
-# Compile a local .aab
-npm run build:aab
-```
-
-_(Note: Rebuilding natively is required whenever you add new npm packages containing native code, or modify the `app.json` plugins!)_
-
----
-
-## 🔒 Handling Permissions
-
-Rather than installing different disjointed `expo-*` libraries every time you need hardware access, this template centralizes all permission requests using the `PermissionService`.
-
-To check or request access:
-
-```typescript
-import { permissionService } from "@/services/permission.service";
-
-// Calling requirePermission() will automatically prompt the user if they haven't been asked yet
-const hasCameraAccess = await permissionService.requirePermission("camera");
-
-if (!hasCameraAccess) {
-  // Deep link the user to the OS settings if they permanently blocked the permission
-  permissionService.openSettingsForApp();
-}
-```
-
-## 🔔 Push Notifications
-
-To request push notifications, just call the utility function. It will automatically detect if it is running on a physical device, set up the required Android notification channels, fetch the token from Apple/Google, and return it:
-
-```typescript
-import { permissionService } from "@/services/permission.service";
-import { authService } from "@/services/auth.service";
-
-const token = await permissionService.registerForPushNotificationsAsync();
-
-// Send it to the backend!
-if (token) {
-  await authService.savePushToken(token);
-}
-```

package/templates/mern-react-native/mobile/docs/README.md

@@ -1,17 +0,0 @@
-# Mobile App Documentation
-
-Welcome to the documentation for the Expo React Native Mobile App. This folder contains detailed information on how to use the app, navigate its architecture, and utilize the custom UI component library.
-
-## Table of Contents
-
-### Core
-- [Getting Started](./getting-started.md)
-
-### UI Component Library
-- [Buttons](./components/buttons.md)
-- [Data Display](./components/data-display.md) (e.g., SwipeableRow, Accordion, Avatar)
-- [Feedback](./components/feedback.md) (e.g., Progress, Spinners)
-- [Gestures & Touch](./components/gestures.md) (e.g., GestureWrapper)
-- [Inputs](./components/inputs.md) (e.g., TextInput, OTPInput, Switches)
-- [Layout](./components/layout.md) (e.g., Container, Divider, Grid)
-- [Navigation](./components/navigation.md) (e.g., Tabs, Pagination, ProgressStepper)

package/templates/mern-react-native/mobile/docs/components/buttons.md

@@ -1,40 +0,0 @@
-# Button Components
-
-Buttons trigger actions. The custom UI library provides several highly polished button variations.
-
-## `Button`
-The primary button component for the application, supporting different variants (solid, outline, ghost), colors, and loading states.
-
-### Usage Example
-```tsx
-import { Button } from '@/components/ui/buttons/Button';
-
-export default function Actions() {
-  return (
-    <>
-      <Button 
-        title="Submit" 
-        onPress={() => console.log('Primary pressed')} 
-      />
-      <Button 
-        title="Cancel" 
-        variant="outline"
-        onPress={() => console.log('Outline pressed')} 
-      />
-      <Button 
-        title="Saving..." 
-        loading={true}
-      />
-    </>
-  );
-}
-```
-
-## `IconButton`
-A button that only contains an icon without text. Perfect for header buttons or tight layouts.
-
-## `FloatingActionButton` (FAB)
-A persistent button that hovers over the screen, typically placed in the bottom right corner. Ideal for primary creation actions like "Compose Message".
-
-## `ButtonGroup`
-A wrapper to seamlessly group multiple related buttons together horizontally.