@imksh/create 1.0.24 → 1.0.26

package/templates/mern-react-native/mobile/src/components/ui/inputs/WebLocationPicker.tsx

@@ -0,0 +1,321 @@
+import React, { useState, useEffect, useRef, useMemo } from "react";
+import { View, Modal, TouchableOpacity, ActivityIndicator } from "react-native";
+import * as Location from "expo-location";
+import { Ionicons } from "@expo/vector-icons";
+import { useColorScheme } from "nativewind";
+import { Colors } from "../../../constants/Colors";
+import { Txt } from "../../common/Typography";
+import Button from "../buttons/Button";
+import Input from "./Input";
+import { toast } from "@/utils/toast";
+import { WebView, WebViewMessageEvent } from "react-native-webview";
+import { LocationLoader } from "../../common/LocationLoader";
+
+export interface LocationDetails {
+  addressLine1: string;
+  addressLine2?: string;
+  locality: string;
+  city: string;
+  state: string;
+  pinCode: string;
+  latitude: number;
+  longitude: number;
+}
+
+interface WebLocationPickerProps {
+  onLocationSelected: (details: LocationDetails) => void;
+  initialCoordinate?: { latitude: number; longitude: number };
+  renderTrigger?: (onPress: () => void) => React.ReactNode;
+}
+
+export default function WebLocationPicker({
+  onLocationSelected,
+  initialCoordinate,
+  renderTrigger,
+}: WebLocationPickerProps) {
+  const { colorScheme } = useColorScheme();
+  const theme = Colors[colorScheme ?? "light"];
+
+  const [modalVisible, setModalVisible] = useState(false);
+  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 [mapCenter, setMapCenter] = useState({
+    latitude: initialCoordinate?.latitude || 28.6139,
+    longitude: initialCoordinate?.longitude || 77.209,
+  });
+
+  const [currentCenter, setCurrentCenter] = useState(mapCenter);
+
+  const webViewRef = useRef<WebView>(null);
+
+  useEffect(() => {
+    if (initialCoordinate?.latitude && initialCoordinate?.longitude) {
+       
+      setMapCenter(initialCoordinate);
+      setCurrentCenter(initialCoordinate);
+    }
+  }, [initialCoordinate]);
+
+  useEffect(() => {
+    if (animationDone && positionFetched) {
+      setLoadingLocation(false);
+    }
+  }, [animationDone, positionFetched]);
+
+  const requestLocationAndOpenMap = async () => {
+    setModalVisible(true);
+    setLoadingLocation(true);
+    setAnimationDone(false);
+    setPositionFetched(false);
+
+    // Asynchronously fetch current position
+    (async () => {
+      try {
+        let { status } = await Location.requestForegroundPermissionsAsync();
+        if (status !== "granted") {
+          setPositionFetched(true);
+          return;
+        }
+
+        if (!initialCoordinate?.latitude) {
+          let location = await Location.getCurrentPositionAsync({ accuracy: Location.Accuracy.Balanced });
+          setMapCenter({
+            latitude: location.coords.latitude,
+            longitude: location.coords.longitude,
+          });
+          setCurrentCenter({
+            latitude: location.coords.latitude,
+            longitude: location.coords.longitude,
+          });
+        }
+      } catch (e) {
+        console.warn(e);
+      } finally {
+        setPositionFetched(true);
+      }
+    })();
+  };
+
+  const handleConfirmLocation = async () => {
+    setLoading(true);
+    try {
+      const [address] = await Location.reverseGeocodeAsync({
+        latitude: currentCenter.latitude,
+        longitude: currentCenter.longitude,
+      });
+
+      if (address) {
+        const details: LocationDetails = {
+          addressLine1: address.street || address.name || "",
+          locality: address.subregion || address.district || "",
+          city: address.city || address.subregion || "",
+          state: address.region || "",
+          pinCode: address.postalCode || "",
+          latitude: currentCenter.latitude,
+          longitude: currentCenter.longitude,
+        };
+        onLocationSelected(details);
+        setModalVisible(false);
+      }
+    } catch (error) {
+      console.warn("Geocoding failed", error);
+    }
+    setLoading(false);
+  };
+
+  const handleSearch = async () => {
+    if (!searchQuery.trim()) return;
+    setSearching(true);
+    try {
+      const results = await Location.geocodeAsync(searchQuery);
+      if (results && results.length > 0) {
+        const { latitude, longitude } = results[0];
+        setCurrentCenter({ latitude, longitude });
+        webViewRef.current?.injectJavaScript(`
+          map.setView([${latitude}, ${longitude}], 15);
+          true;
+        `);
+      } else {
+        toast.success("Location not found");
+      }
+    } catch (error) {
+      console.warn("Search failed", error);
+      toast.error("Failed to search location");
+    }
+    setSearching(false);
+  };
+
+  const handleMessage = (event: WebViewMessageEvent) => {
+    try {
+      const data = JSON.parse(event.nativeEvent.data);
+      if (data.type === "centerChanged") {
+        setCurrentCenter({
+          latitude: data.lat,
+          longitude: data.lng,
+        });
+      }
+    } catch {}
+  };
+
+  const htmlContent = useMemo(() => `
+    <!DOCTYPE html>
+    <html>
+    <head>
+      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+      <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+      <style>
+        body, html, #map { margin: 0; padding: 0; height: 100%; width: 100%; background: #f0f0f0; }
+        .center-marker {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -100%);
+          z-index: 1000;
+          font-size: 36px;
+          pointer-events: none;
+        }
+      </style>
+    </head>
+    <body>
+      <div id="map"></div>
+      <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', {
+          maxZoom: 19
+        }).addTo(map);
+
+        map.on('moveend', function() {
+          var center = map.getCenter();
+          window.ReactNativeWebView.postMessage(JSON.stringify({
+            type: 'centerChanged',
+            lat: center.lat,
+            lng: center.lng
+          }));
+        });
+      </script>
+    </body>
+    </html>
+  `, [mapCenter.latitude, mapCenter.longitude]);
+
+  return (
+    <>
+      {renderTrigger ? (
+        renderTrigger(requestLocationAndOpenMap)
+      ) : (
+        <TouchableOpacity
+          onPress={requestLocationAndOpenMap}
+          className="w-full h-14 bg-base-200 rounded-xl mb-4 flex-row items-center justify-between px-4 border border-base-300"
+        >
+          <View className="flex-row items-center">
+            <Ionicons
+              name="map-outline"
+              size={24}
+              color={theme.primary}
+              style={{ marginRight: 12 }}
+            />
+            <Txt color={theme.baseContent} weight="semibold">
+              {initialCoordinate?.latitude
+                ? "Update Location on Map"
+                : "Pick from Map"}
+            </Txt>
+          </View>
+          {loading && !modalVisible ? (
+            <ActivityIndicator color={theme.primary} />
+          ) : (
+            <Ionicons name="chevron-forward" size={20} color={theme.secondary} />
+          )}
+        </TouchableOpacity>
+      )}
+
+      <Modal
+        animationType="slide"
+        transparent={false}
+        visible={modalVisible}
+        onRequestClose={() => setModalVisible(false)}
+      >
+        {loadingLocation ? (
+          <View style={{ flex: 1 }}>
+            <LocationLoader
+              onReady={() => {
+                setAnimationDone(true);
+              }}
+            />
+          </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>
+
+          <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>
+            <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>
+
+          <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/mern-react-native/mobile/src/components/ui/layout/Grid.tsx

@@ -2,19 +2,61 @@ import React from "react";
 import { View, ViewProps } from "react-native";
 
 export interface GridProps extends ViewProps {
-  columns?: number;
+  cols?: number;
   gap?: number;
-  children: React.ReactNode[];
+  children: React.ReactNode;
 }
 
-export default function Grid({ columns = 2, gap = 12, children, style, ...props }: GridProps) {
+export interface GridItemProps extends ViewProps {
+  colSpan?: number;
+  children: React.ReactNode;
+}
+
+export function GridItem({
+  children,
+  ...props
+}: GridItemProps) {
+  return <View {...props}>{children}</View>;
+}
+
+export default function Grid({
+  cols = 2,
+  gap = 12,
+  children,
+  style,
+  ...props
+}: GridProps) {
   return (
-    <View style={[{ flexDirection: "row", flexWrap: "wrap", margin: -gap / 2 }, style]} {...props}>
-      {React.Children.map(children, (child) => (
-        <View style={{ width: `${100 / columns}%`, padding: gap / 2 }}>
-          {child}
-        </View>
-      ))}
+    <View
+      style={[
+        {
+          flexDirection: "row",
+          flexWrap: "wrap",
+          margin: -gap / 2,
+        },
+        style,
+      ]}
+      {...props}
+    >
+      {React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) return null;
+
+        const colSpan = Math.min(
+          (child as React.ReactElement<GridItemProps>).props.colSpan ?? 1,
+          cols
+        );
+
+        return (
+          <View
+            style={{
+              width: `${(100 / cols) * colSpan}%`,
+              padding: gap / 2,
+            }}
+          >
+            {child}
+          </View>
+        );
+      })}
     </View>
   );
-}
+}

package/templates/mern-react-native/mobile/src/components/ui/layout/Section.tsx

@@ -1,7 +1,8 @@
 import React from "react";
-import { View, Text, ViewProps } from "react-native";
+import { View, ViewProps } from "react-native";
 import { useColorScheme } from "nativewind";
 import { Colors } from "../../../constants/Colors";
+import { Txt } from "../../common/Typography";
 
 export interface SectionProps extends ViewProps {
   title?: string;
@@ -32,16 +33,14 @@ export default function Section({
           }}
         >
           {title && (
-            <Text
-              style={{
-                fontSize: 18,
-                fontWeight: "700",
-                color: theme.baseContent,
-              }}
+            <Txt
+              color={theme.baseContent}
+              weight="bold"
+              variant="lg"
               className={titleClass}
             >
               {title}
-            </Text>
+            </Txt>
           )}
           {action}
         </View>

package/templates/mern-react-native/mobile/src/components/ui/navigation/Pagination.tsx

@@ -1,8 +1,9 @@
 import React from "react";
-import { View, TouchableOpacity, Text } from "react-native";
+import { View, TouchableOpacity } from "react-native";
 import { useColorScheme } from "nativewind";
 import { Colors } from "../../../constants/Colors";
 import { Ionicons } from "@expo/vector-icons";
+import { Txt } from "../../common/Typography";
 
 export interface PaginationProps {
   currentPage: number;
@@ -41,9 +42,9 @@ export default function Pagination({ currentPage, totalPages, onPageChange }: Pa
               justifyContent: "center",
             }}
           >
-            <Text style={{ color: isActive ? theme.primaryContent : theme.baseContent, fontWeight: isActive ? "700" : "500" }}>
+            <Txt color={isActive ? theme.primaryContent : theme.baseContent} weight={isActive ? "bold" : "semibold"}>
               {p}
-            </Text>
+            </Txt>
           </TouchableOpacity>
         );
       })}

package/templates/mern-react-native/mobile/src/components/ui/navigation/ProgressStepper.tsx

@@ -1,8 +1,9 @@
 import React from "react";
-import { View, Text } from "react-native";
+import { View } from "react-native";
 import { useColorScheme } from "nativewind";
 import { Colors } from "../../../constants/Colors";
 import { Ionicons } from "@expo/vector-icons";
+import { Txt } from "../../common/Typography";
 
 export interface ProgressStepperProps {
   steps: string[];
@@ -36,14 +37,14 @@ export default function ProgressStepper({ steps, currentStep }: ProgressStepperP
                 {isCompleted ? (
                   <Ionicons name="checkmark" size={16} color="#fff" />
                 ) : (
-                  <Text style={{ color: isActive ? theme.primaryContent : theme.secondary, fontWeight: "700" }}>
+                  <Txt color={isActive ? theme.primaryContent : theme.secondary} weight="bold">
                     {index + 1}
-                  </Text>
+                  </Txt>
                 )}
               </View>
-              <Text style={{ color: isActive ? theme.primary : theme.secondary, fontSize: 10, textAlign: "center" }}>
+              <Txt color={isActive ? theme.primary : theme.secondary} variant="xs" align="center">
                 {step}
-              </Text>
+              </Txt>
             </View>
             
             {index < steps.length - 1 && (

package/templates/mern-react-native/mobile/src/components/ui/navigation/Tabs.tsx

@@ -10,12 +10,15 @@ export interface TabItem {
   label: string;
 }
 
+export type TabsSize = "xs" | "sm" | "base" | "md" | "lg";
+
 export interface TabsProps {
   tabs: TabItem[];
   activeTab: string;
   onChange: (id: string) => void;
   variant?: "button" | "underline";
   scrollable?: boolean;
+  size?: TabsSize;
 }
 
 export default function Tabs({
@@ -24,10 +27,33 @@ export default function Tabs({
   onChange,
   variant = "underline",
   scrollable = false,
+  size = "base",
 }: TabsProps) {
   const { colorScheme } = useColorScheme();
   const theme = Colors[colorScheme ?? "light"];
 
+  const getSizeStyles = (): {
+    py: number;
+    fontSize: number;
+  } => {
+    switch (size) {
+      case "xs":
+        return { py: variant === "button" ? 5 : 6, fontSize: 11 };
+      case "sm":
+        return { py: variant === "button" ? 7 : 8, fontSize: 12 };
+      case "base":
+        return { py: variant === "button" ? 9 : 10, fontSize: 14 };
+      case "md":
+        return { py: variant === "button" ? 11 : 12, fontSize: 15 };
+      case "lg":
+        return { py: variant === "button" ? 13 : 14, fontSize: 17 };
+      default:
+        return { py: variant === "button" ? 9 : 10, fontSize: 14 };
+    }
+  };
+
+  const sStyles = getSizeStyles();
+
   const [tabWidths, setTabWidths] = useState<{ [key: string]: number }>({});
   const [tabXs, setTabXs] = useState<{ [key: string]: number }>({});
 
@@ -40,7 +66,7 @@ export default function Tabs({
       indicatorWidth.value = withTiming(tabWidths[activeTab], config);
       indicatorPosition.value = withTiming(tabXs[activeTab], config);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+     
   }, [activeTab, tabWidths, tabXs]);
 
   const indicatorStyle = useAnimatedStyle(() => {
@@ -101,7 +127,7 @@ export default function Tabs({
             onPress={() => onChange(tab.id)}
             onLayout={(e) => handleLayout(tab.id, e)}
             style={{
-              paddingVertical: variant === "button" ? 10 : 12, // py-2.5 for button
+              paddingVertical: sStyles.py,
               paddingHorizontal: 16,
               flex: scrollable ? undefined : 1,
               alignItems: "center",
@@ -110,9 +136,9 @@ export default function Tabs({
             }}
           >
             <Txt
-              variant="mid"
+              variant="md"
               style={{
-                fontSize: 14, // text-sm
+                fontSize: sStyles.fontSize,
                 fontWeight: isActive ? "600" : "500",
                 color:
                   variant === "button" && isActive

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

@@ -1,5 +1,16 @@
-import axios from "axios";
+import axios, { AxiosResponse, AxiosRequestConfig } from "axios";
 import { get } from "../utils/storage";
+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>;
+  }
+}
 
 // eslint-disable-next-line import/no-named-as-default-member
 export const api = axios.create({

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

@@ -0,0 +1,12 @@
+export interface SidebarMenuItem {
+  icon: string;
+  label: string;
+  route: string;
+}
+
+export const sidebarConfig: Record<string, SidebarMenuItem[]> = {
+  default: [
+    { icon: "home-outline", label: "Dashboard", route: "/" },
+    { icon: "person-outline", label: "Profile", route: "/profile" },
+  ],
+};

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

@@ -25,7 +25,7 @@ export const tabNavigationConfig: TabConfig[] = [
   {
     name: "profile",
     title: "Profile",
-    baseIcon: "person",
+    baseIcon: "person-circle",
   },
 ];
 

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/notification.service.ts

@@ -0,0 +1,22 @@
+import {api} from "../config/api";
+
+export const notificationService = {
+  getNotifications: () => {
+    return api.get("/notifications");
+  },
+
+  markAsRead: (id: string) => {
+    return api.put(`/notifications/${id}/read`);
+  },
+
+  markAllAsRead: () => {
+    return api.put("/notifications/read-all");
+  },
+
+  registerPushToken: (token: string) => {
+    return api.post("/notifications/push-token", { token });
+  },
+  sendCustomNotification: (tenantId: string, title: string, message: string) => {
+    return api.post("/notifications/send-custom", { tenantId, title, message });
+  },
+};