@imksh/create 1.0.25 → 1.0.26

package/templates/production-fullstack/mobile/babel.config.js

@@ -0,0 +1,13 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
+    plugins: [
+      ["inline-import", { "extensions": [".sql"] }],
+      "react-native-reanimated/plugin" 
+    ],
+  };
+};

package/templates/production-fullstack/mobile/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/production-fullstack/mobile/eas.json

@@ -0,0 +1,24 @@
+{
+  "cli": {
+    "version": ">= 21.0.2",
+    "appVersionSource": "remote"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal",
+      "android": {
+        "buildType": "apk"
+      }
+    },
+    "production": {
+      "autoIncrement": true
+    }
+  },
+  "submit": {
+    "production": {}
+  }
+}

package/templates/production-fullstack/mobile/eslint.config.js

@@ -0,0 +1,10 @@
+// https://docs.expo.dev/guides/using-eslint/
+const { defineConfig } = require('eslint/config');
+const expoConfig = require("eslint-config-expo/flat");
+
+module.exports = defineConfig([
+  expoConfig,
+  {
+    ignores: ["dist/*"],
+  }
+]);

package/templates/production-fullstack/mobile/metro.config.js

@@ -0,0 +1,6 @@
+const { getDefaultConfig } = require("expo/metro-config");
+const { withNativeWind } = require('nativewind/metro');
+ 
+const config = getDefaultConfig(__dirname)
+ 
+module.exports = withNativeWind(config, { input: './src/app/global.css' })

package/templates/production-fullstack/mobile/nativewind-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="nativewind/types" />
+
+// NOTE: This file should not be edited and should be committed with your source code. It is generated by NativeWind.

package/templates/production-fullstack/mobile/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "mobile",
+  "main": "expo-router/entry",
+  "version": "1.0.0",
+  "dependencies": {
+    "@expo/ui": "~57.0.7",
+    "@expo/vector-icons": "^15.1.1",
+    "@react-native-async-storage/async-storage": "2.2.0",
+    "@react-native-community/slider": "^5.2.0",
+    "@react-native-picker/picker": "^2.11.4",
+    "@react-navigation/bottom-tabs": "^7.18.10",
+    "@tanstack/react-query": "^5.101.4",
+    "axios": "^1.18.1",
+    "babel-preset-expo": "^57.0.3",
+    "dayjs": "^1.11.21",
+    "drizzle-orm": "^0.45.2",
+    "expo": "~57.0.7",
+    "expo-blur": "~57.0.2",
+    "expo-constants": "~57.0.6",
+    "expo-device": "~57.0.1",
+    "expo-font": "~57.0.1",
+    "expo-glass-effect": "~57.0.1",
+    "expo-image": "~57.0.1",
+    "expo-image-picker": "~57.0.7",
+    "expo-linear-gradient": "^57.0.1",
+    "expo-linking": "~57.0.3",
+    "expo-location": "~57.0.7",
+    "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",
+    "expo-web-browser": "~57.0.1",
+    "lottie-react": "^2.4.1",
+    "lottie-react-native": "^7.3.8",
+    "nativewind": "^4.2.6",
+    "prettier-plugin-tailwindcss": "^0.5.14",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.86.0",
+    "react-native-gesture-handler": "~2.32.0",
+    "react-native-image-viewing": "^0.2.2",
+    "react-native-keyboard-aware-scroll-view": "^0.9.5",
+    "react-native-maps": "1.27.2",
+    "react-native-otp-entry": "^1.8.6",
+    "react-native-paper": "^5.15.3",
+    "react-native-permissions": "^5.6.0",
+    "react-native-reanimated": "^4.5.2",
+    "react-native-safe-area-context": "^5.8.0",
+    "react-native-screens": "4.25.2",
+    "react-native-toast-message": "^2.4.0",
+    "react-native-web": "~0.21.0",
+    "react-native-webview": "13.16.1",
+    "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"
+  },
+  "scripts": {
+    "dev": "expo start -c",
+    "start": "expo start",
+    "reset-project": "node ./scripts/reset-project.js",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "web": "expo start --web",
+    "lint": "expo lint",
+    "format": "expo lint --fix",
+    "ts:check": "tsc --noEmit",
+    "build": "eas build",
+    "build:android": "eas build -p android",
+    "build:ios": "eas build -p ios",
+    "export": "expo export",
+    "build:eas:apk": "eas build -p android --profile preview",
+    "build:eas:aab": "eas build -p android --profile production",
+    "build:apk": "npx expo prebuild && cd android && ./gradlew assembleRelease",
+    "build:aab": "npx expo prebuild && cd android && ./gradlew bundleRelease"
+  },
+  "private": true
+}

package/templates/production-fullstack/mobile/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/production-fullstack/mobile/src/app/(auth)/change-password.tsx

@@ -0,0 +1,112 @@
+import React, { useState , useCallback } from "react";
+import { View } from "react-native";
+import { useAuthStore } from "../../features/auth/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>
+    </>
+  );
+}

package/templates/production-fullstack/mobile/src/app/(auth)/edit-profile.tsx

@@ -0,0 +1,160 @@
+import React, { useState , useCallback } from "react";
+import { View, TouchableOpacity } from "react-native";
+import { useAuthStore } from "../../features/auth/store/useAuthStore";
+import { Txt } from "../../components/common/Typography";
+import { router, useFocusEffect } from "expo-router";
+import * as ImagePicker from "expo-image-picker";
+import { Ionicons } from "@expo/vector-icons";
+import Avatar from "../../components/ui/data-display/Avatar";
+
+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";
+import { toast } from "@/utils/toast";
+import { authService } from "@/features/auth/api/auth.service";
+
+export default function EditProfileScreen() {
+  const { user, error, setUser, clearError } = useAuthStore();
+  const [loading, setLoading] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      return () => clearError();
+    }, [clearError])
+  );
+
+  const [name, setName] = useState(user?.name || "");
+  const [phone, setPhone] = useState(user?.phone || "");
+  const [avatarUri, setAvatarUri] = useState<string | null>(null);
+
+  const pickImage = async () => {
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.Images,
+      allowsEditing: true,
+      aspect: [1, 1],
+      quality: 0.8,
+    });
+
+    if (!result.canceled && result.assets[0]) {
+      setAvatarUri(result.assets[0].uri);
+    }
+  };
+
+  const handleSave = async () => {
+    const formData = new FormData();
+    try {
+      setLoading(true);
+      if (name !== user?.name) formData.append("name", name);
+      if (phone !== user?.phone) formData.append("phone", phone);
+
+      if (avatarUri) {
+        const filename = avatarUri.split("/").pop() || "avatar.jpg";
+        const match = /\.(\w+)$/.exec(filename);
+        const type = match ? `image/${match[1]}` : `image`;
+
+        formData.append("file", {
+          uri: avatarUri,
+          name: filename,
+          type,
+        } as any);
+      }
+
+      // Only update if something changed
+      if (
+        (formData as any).getParts &&
+        (formData as any).getParts().length === 0
+      ) {
+        router.back();
+        return;
+      }
+
+      const res = await authService.updateMe(formData);
+      if (res.data.success) {
+        setUser(res.data.data);
+        toast.success("Profile updated successfully");
+        router.back();
+      } else {
+        toast.error(res.data.message || "An error occurred");
+      }
+
+      console.log(res.data.data);
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || error.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <ScreenHeader title="Edit Profile" />
+      <ScrollContainer
+        contentContainerStyle={{
+          flexGrow: 1,
+          padding: 16,
+        }}
+        className="bg-base-100"
+      >
+        <View className="items-center mb-8">
+          <View className="relative">
+            <View className="w-28 h-28 rounded-full items-center justify-center border-4 border-base-100 shadow-sm shadow-base-content/20 overflow-hidden">
+              {avatarUri ? (
+                <Avatar url={avatarUri} size={104} />
+              ) : (
+                <Avatar
+                  url={
+                    user?.avatar?.url ||
+                    `https://placehold.co/600x400?text=${user?.name?.charAt(0).toUpperCase() || "U"}`
+                  }
+                  size={104}
+                />
+              )}
+            </View>
+            <TouchableOpacity
+              onPress={pickImage}
+              className="absolute bottom-0 right-0 bg-primary p-2 rounded-full border-2 border-base-100"
+            >
+              <Ionicons name="camera" size={18} color="#fff" />
+            </TouchableOpacity>
+          </View>
+        </View>
+
+        {error ? (
+          <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">
+              ⚠️ {error}
+            </Txt>
+          </View>
+        ) : null}
+
+        <View className="gap-4">
+          <Input
+            leftIcon="person"
+            placeholder="Full name"
+            value={name}
+            onChangeText={setName}
+          />
+
+          <Input
+            leftIcon="call"
+            placeholder="Phone number"
+            value={phone}
+            onChangeText={setPhone}
+            keyboardType="phone-pad"
+          />
+
+          <View className="mt-4">
+            <Button
+              label="Save Changes"
+              onPress={handleSave}
+              isLoading={loading}
+              variant="primary"
+              isFullWidth
+            />
+          </View>
+        </View>
+      </ScrollContainer>
+    </>
+  );
+}

package/templates/production-fullstack/mobile/src/app/(auth)/forgot-password.tsx

@@ -0,0 +1,191 @@
+import React, { useState, useEffect , useCallback } from "react";
+import { View } from "react-native";
+import { useAuthStore } from "../../features/auth/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";
+
+export default function ForgotPasswordScreen() {
+  const { genOtp, verifyOtp, resetPassword, loading, error, clearError } = useAuthStore();
+  const [step, setStep] = useState<"email" | "otp" | "password">("email");
+
+  useFocusEffect(
+    useCallback(() => {
+      return () => clearError();
+    }, [clearError])
+  );
+
+  const [email, setEmail] = useState("");
+  const [otp, setOtp] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+
+  const [timer, setTimer] = useState(0);
+
+  useEffect(() => {
+    let interval: ReturnType<typeof setInterval>;
+    if (timer > 0) {
+      interval = setInterval(() => {
+        setTimer((prev) => prev - 1);
+      }, 1000);
+    }
+    return () => clearInterval(interval);
+  }, [timer]);
+
+  const handleSendOtp = async () => {
+    if (!email) return;
+    const success = await genOtp(email);
+    if (success) {
+      setStep("otp");
+      setTimer(60);
+    }
+  };
+
+  const handleVerifyOtp = async () => {
+    if (!otp) return;
+    const success = await verifyOtp(email, otp);
+    if (success) {
+      setStep("password");
+    }
+  };
+
+  const handleResetPassword = async () => {
+    if (!newPassword) return;
+    const success = await resetPassword(newPassword);
+    if (success) {
+      router.replace("/(auth)/login");
+    }
+  };
+
+  return (
+    <ScrollContainer
+      contentContainerStyle={{
+        flexGrow: 1,
+        justifyContent: "center",
+        padding: 16,
+      }}
+      className="bg-base-100"
+    >
+      <View className="w-full p-6">
+        <View className="items-center mb-8 w-full">
+          <Txt variant="xl" className="text-2xl mb-1 text-center">
+            {step === "email" && "Forgot Password"}
+            {step === "otp" && "Verify Email"}
+            {step === "password" && "Reset Password"}
+          </Txt>
+          <Txt
+            variant="sm"
+            className="text-xs text-base-content/50 text-center px-2"
+          >
+            {step === "email" && "Enter your email to receive an OTP"}
+            {step === "otp" && `Enter the OTP sent to ${email}`}
+            {step === "password" && "Enter your new password"}
+          </Txt>
+        </View>
+
+        {error ? (
+          <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">
+              ⚠️ {error}
+            </Txt>
+          </View>
+        ) : null}
+
+        <View className="gap-2">
+          {step === "email" && (
+            <>
+              <Input
+                leftIcon="mail"
+                placeholder="Email address"
+                value={email}
+                onChangeText={setEmail}
+                autoCapitalize="none"
+                keyboardType="email-address"
+              />
+              <View className="mt-2">
+                <Button
+                  label="Send OTP →"
+                  onPress={handleSendOtp}
+                  isLoading={loading}
+                  variant="primary"
+                  isFullWidth
+                />
+              </View>
+            </>
+          )}
+
+          {step === "otp" && (
+            <>
+              <Input
+                leftIcon="key"
+                placeholder="Enter OTP"
+                value={otp}
+                onChangeText={setOtp}
+                keyboardType="numeric"
+              />
+              <View className="mt-2">
+                <Button
+                  label="Verify OTP →"
+                  onPress={handleVerifyOtp}
+                  isLoading={loading}
+                  variant="primary"
+                  isFullWidth
+                />
+              </View>
+              <View className="mt-4">
+                <Button
+                  label={timer > 0 ? `Resend OTP in ${timer}s` : "Resend OTP"}
+                  onPress={handleSendOtp}
+                  disabled={timer > 0 || loading}
+                  variant="outline"
+                  isFullWidth
+                />
+              </View>
+            </>
+          )}
+
+          {step === "password" && (
+            <>
+              <Input
+                leftIcon="lock-closed"
+                rightIcon={showPassword ? "eye-off" : "eye"}
+                onRightIconPress={() => setShowPassword(!showPassword)}
+                placeholder="New Password"
+                value={newPassword}
+                onChangeText={setNewPassword}
+                secureTextEntry={!showPassword}
+              />
+              <View className="mt-2">
+                <Button
+                  label="Reset Password →"
+                  onPress={handleResetPassword}
+                  isLoading={loading}
+                  variant="primary"
+                  isFullWidth
+                />
+              </View>
+            </>
+          )}
+        </View>
+
+        <View className="mt-8">
+          <Txt
+            variant="sm"
+            className="text-sm text-base-content/50 text-center"
+          >
+            Remember your password?{" "}
+            <Txt
+              variant="md"
+              className="text-primary text-sm"
+              onPress={() => router.push("/(auth)/login")}
+            >
+              Sign in
+            </Txt>
+          </Txt>
+        </View>
+      </View>
+    </ScrollContainer>
+  );
+}