@imksh/create 1.0.11 → 1.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imksh/create",
-  "version": "1.0.11",
+  "version": "1.0.16",
   "description": "A production-ready create for scaffolding modern applications.",
   "type": "module",
   "bin": {
@@ -39,5 +39,11 @@
     "fs-extra": "^11.2.0",
     "inquirer": "^9.2.16",
     "ora": "^8.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }

package/templates/mern/client/package.json

@@ -29,7 +29,6 @@
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
     "@vitejs/plugin-react": "^4.2.0",
-    "autoprefixer": "^10.4.19",
     "eslint": "^8.53.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",

package/templates/mern/client/src/App.jsx

@@ -20,17 +20,17 @@ const App = () => {
   // Initialize Lenis smooth scroll
   // useLenis();
 
-  // useEffect(() => {
-  //   getMe();
-  // }, []);
+  useEffect(() => {
+    getMe();
+  }, []);
 
-  // if (loading) {
-  //   return (
-  //     <div className="flex h-screen items-center justify-center bg-base-100">
-  //       <Loading />
-  //     </div>
-  //   );
-  // }
+  if (loading) {
+    return (
+      <div className="flex h-screen items-center justify-center bg-base-100">
+        <Loading />
+      </div>
+    );
+  }
 
   return (
     <div className="min-h-screen bg-base-100 text-base-content">

package/templates/mern/client/src/components/layout/ProtectedRoute.jsx

@@ -3,9 +3,9 @@ import { useAuthStore } from "../../store/useAuthStore";
 import Loading from "../common/Loading";
 
 const ProtectedRoute = ({ children, role }) => {
-  const { user, isCheckingAuth } = useAuthStore();
+  const { user, loading } = useAuthStore();
 
-  if (isCheckingAuth) return <Loading />;
+  if (loading) return <Loading />;
 
   if (!user) return <Navigate to="/login" />;
 

package/templates/mern/client/src/store/useAuthStore.js

@@ -14,7 +14,7 @@ export const useAuthStore = create((set, get) => ({
         localStorage.setItem("token", data.token);
       }
       set({
-        user: data,
+        user: data.data,
         loading: false,
       });
       return true;
@@ -37,7 +37,7 @@ export const useAuthStore = create((set, get) => ({
         localStorage.setItem("token", data.token);
       }
       set({
-        user: data,
+        user: data.data,
         loading: false,
       });
       return true;
@@ -56,7 +56,7 @@ export const useAuthStore = create((set, get) => ({
     set({ loading: true });
     try {
       const { data } = await authService.getMe();
-      set({ user: data, loading: false });
+      set({ user: data.data, loading: false });
     } catch (err) {
       set({ loading: false });
     } finally {
@@ -68,7 +68,7 @@ export const useAuthStore = create((set, get) => ({
     set({ loading: true, error: null });
     try {
       const { data } = await authService.updateMe(updates);
-      set({ user: data, loading: false });
+      set({ user: data.data, loading: false });
       return true;
     } catch (err) {
       set({

package/templates/mern/client/src/utils/formatDate.js

@@ -0,0 +1,15 @@
+export const formatDate = (
+  date,
+  options = { day: "2-digit", month: "short", year: "numeric" },
+  locale = "en-IN",
+) => {
+  if (!date) return "-";
+
+  const parsedDate = new Date(date);
+
+  if (isNaN(parsedDate.getTime())) {
+    return "-";
+  }
+
+  return new Intl.DateTimeFormat(locale, options).format(parsedDate);
+};

package/templates/mern/server/.env.example

@@ -12,7 +12,7 @@ APP_PRIMARY_COLOR=#2563eb
 # ==========================
 # Database
 # ==========================
-MONGO_URI=
+MONGO_URI=mongodb://localhost:27017/test
 
 # ==========================
 # JWT

package/templates/mern/server/src/index.js

@@ -7,7 +7,7 @@ import logger from "./utils/logger.js";
 
 dotenv.config();
 
-const PORT = process.env.PORT || 5000;
+const PORT = process.env.PORT || 5001;
 
 // Connect to Database
 connectDB();

package/templates/mern-ts/client/package.json

@@ -31,13 +31,9 @@
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
     "@vitejs/plugin-react": "^4.2.0",
-    "autoprefixer": "^10.4.19",
     "eslint": "^8.53.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",
-    "flyonui": "^1.0.0",
-    "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.3",
     "typescript": "^5.2.2",
     "vite": "^5.0.0",
     "eslint-plugin-react": "^7.33.2"

package/templates/mern-ts/client/src/App.tsx

@@ -20,17 +20,17 @@ const App = () => {
   // Initialize Lenis smooth scroll
   // useLenis();
 
-  // useEffect(() => {
-  //   getMe();
-  // }, []);
+  useEffect(() => {
+    getMe();
+  }, []);
 
-  // if (loading) {
-  //   return (
-  //     <div className="flex h-screen items-center justify-center bg-base-100">
-  //       <Loading />
-  //     </div>
-  //   );
-  // }
+  if (loading) {
+    return (
+      <div className="flex h-screen items-center justify-center bg-base-100">
+        <Loading />
+      </div>
+    );
+  }
 
   return (
     <div className="min-h-screen bg-base-100 text-base-content">

package/templates/mern-ts/client/src/components/layout/ProtectedRoute.tsx

@@ -9,9 +9,9 @@ interface ProtectedRouteProps {
 }
 
 const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children, role }) => {
-  const { user, isCheckingAuth } = useAuthStore();
+  const { user, loading } = useAuthStore();
 
-  if (isCheckingAuth) return <Loading />;
+  if (loading) return <Loading />;
 
   if (!user) return <Navigate to="/login" />;
 

package/templates/mern-ts/client/src/components/modals/ConfirmModal.tsx

@@ -7,7 +7,10 @@ import {
   FaCircleXmark,
 } from "react-icons/fa6";
 
-const variants = {
+const variants: Record<
+  "warning" | "error" | "success" | "info",
+  { icon: any; iconBg: string; iconColor: string; button: string }
+> = {
   warning: {
     icon: FaTriangleExclamation,
     iconBg: "bg-warning/15",
@@ -34,6 +37,20 @@ const variants = {
   },
 };
 
+export interface ConfirmModalProps {
+  open: boolean;
+  variant?: "warning" | "error" | "success" | "info";
+  title?: string;
+  message?: string;
+  confirmText?: string;
+  cancelText?: string;
+  loading?: boolean;
+  closeOnBackdrop?: boolean;
+  closeOnEsc?: boolean;
+  onConfirm: () => void | Promise<void>;
+  onCancel: () => void;
+}
+
 const ConfirmModal = ({
   open,
   variant = "warning",
@@ -46,11 +63,11 @@ const ConfirmModal = ({
   closeOnEsc = true,
   onConfirm,
   onCancel,
-}) => {
+}: ConfirmModalProps) => {
   useEffect(() => {
     if (!open || !closeOnEsc) return;
 
-    const handleKeyDown = (e) => {
+    const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === "Escape") {
         onCancel?.();
       }
@@ -63,7 +80,7 @@ const ConfirmModal = ({
 
   if (!open) return null;
 
-  const style = variants[variant] || variants.warning;
+  const style = variants[variant || "warning"];
   const Icon = style.icon;
 
   return createPortal(

package/templates/mern-ts/client/src/components/modals/Modal.tsx

@@ -1,7 +1,19 @@
-import { useEffect } from "react";
+import { useEffect, ReactNode } from "react";
 import { createPortal } from "react-dom";
 import { IoClose } from "react-icons/io5";
 
+export interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  children: ReactNode;
+  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+  closeOnBackdrop?: boolean;
+  closeOnEsc?: boolean;
+  showCloseButton?: boolean;
+  footer?: ReactNode;
+}
+
 const sizes = {
   sm: "max-w-sm",
   md: "max-w-md",
@@ -21,7 +33,7 @@ const Modal = ({
   closeOnEsc = true,
   showCloseButton = true,
   footer,
-}) => {
+}: ModalProps) => {
   useEffect(() => {
     if (!open || !closeOnEsc) return;
 

package/templates/mern-ts/client/src/services/authService.ts

@@ -1,15 +1,15 @@
 import { api } from "../config/api";
 
 export const authService = {
-  signup: (name, email, password, role = "user") =>
+  signup: (name: string, email: string, password: string, role = "user") =>
     api.post("/auth/signup", { name, email, password, role }),
 
-  login: (email, password) =>
+  login: (email: string, password: string) =>
     api.post("/auth/login", { email, password }),
 
   getMe: () => api.get("/auth/me"),
 
-  updateMe: (data) => api.put("/auth/me", data),
+  updateMe: (data: any) => api.put("/auth/me", data),
 
   logout: () =>
     api.post("/auth/logout"),

package/templates/mern-ts/client/src/store/useAuthStore.ts

@@ -1,12 +1,37 @@
 import { create } from "zustand";
 import { authService } from "../services/authService";
 
-export const useAuthStore = create((set, get) => ({
+export interface User {
+  _id: string;
+  name: string;
+  email: string;
+  phone?: string;
+  role: string;
+  avatar?: {
+    url?: string;
+    publicId?: string;
+  };
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export interface AuthState {
+  user: User | null;
+  loading: boolean;
+  error: string | null;
+  signup: (name: string, email: string, password: string, role?: string) => Promise<boolean>;
+  login: (email: string, password: string) => Promise<boolean>;
+  getMe: () => Promise<void>;
+  updateProfile: (updates: Partial<User> | FormData) => Promise<boolean>;
+  logout: () => Promise<void>;
+}
+
+export const useAuthStore = create<AuthState>((set) => ({
   user: null,
   loading: true,
   error: null,
 
-  signup: async (name, email, password, role = "user") => {
+  signup: async (name: string, email: string, password: string, role = "user") => {
     set({ loading: true, error: null });
     try {
       const { data } = await authService.signup(name, email, password, role);
@@ -14,11 +39,11 @@ export const useAuthStore = create((set, get) => ({
         localStorage.setItem("token", data.token);
       }
       set({
-        user: data,
+        user: data.data,
         loading: false,
       });
       return true;
-    } catch (err) {
+    } catch (err: any) {
       set({
         error: err.response?.data?.message || err.message,
         loading: false,
@@ -29,7 +54,7 @@ export const useAuthStore = create((set, get) => ({
     }
   },
 
-  login: async (email, password) => {
+  login: async (email: string, password: string) => {
     set({ loading: true, error: null });
     try {
       const { data } = await authService.login(email, password);
@@ -37,11 +62,11 @@ export const useAuthStore = create((set, get) => ({
         localStorage.setItem("token", data.token);
       }
       set({
-        user: data,
+        user: data.data,
         loading: false,
       });
       return true;
-    } catch (err) {
+    } catch (err: any) {
       set({
         error: err.response?.data?.message || err.message,
         loading: false,
@@ -56,21 +81,21 @@ export const useAuthStore = create((set, get) => ({
     set({ loading: true });
     try {
       const { data } = await authService.getMe();
-      set({ user: data, loading: false });
-    } catch (err) {
+      set({ user: data.data, loading: false });
+    } catch (err: any) {
       set({ loading: false });
     } finally {
       set({ loading: false });
     }
   },
 
-  updateProfile: async (updates) => {
+  updateProfile: async (updates: Partial<User> | FormData) => {
     set({ loading: true, error: null });
     try {
       const { data } = await authService.updateMe(updates);
-      set({ user: data, loading: false });
+      set({ user: data.data, loading: false });
       return true;
-    } catch (err) {
+    } catch (err: any) {
       set({
         error: err.response?.data?.message || err.message,
         loading: false,
@@ -96,3 +121,4 @@ export const useAuthStore = create((set, get) => ({
     });
   },
 }));
+

package/templates/mern-ts/client/src/store/useUiStore.ts

@@ -1,13 +1,33 @@
 import { create } from "zustand";
+import { ReactNode } from "react";
 
-export const useUiStore = create((set, get) => ({
+export interface UiState {
+  open: boolean;
+  collapsed: boolean;
+  isMobileMenuOpened: boolean;
+  headerTitle: string;
+  headerActions: ReactNode;
+  setHeaderTitle: (title: string) => void;
+  setHeaderActions: (actions: ReactNode) => void;
+  toggleCollapsed: () => void;
+  setMobileMenuOpened: (open: boolean) => void;
+  toggleMobileMenuOpened: () => void;
+  theme: string;
+  setTheme: (theme: string) => void;
+  toggleTheme: () => void;
+  toggleSidebar: () => void;
+  openSidebar: () => void;
+  close: () => void;
+}
+
+export const useUiStore = create<UiState>((set, get) => ({
   open: false,
   collapsed: false,
   isMobileMenuOpened: false,
   headerTitle: "Dashboard",
   headerActions: null,
-  setHeaderTitle: (title) => set({ headerTitle: title }),
-  setHeaderActions: (actions) => set({ headerActions: actions }),
+  setHeaderTitle: (title: string) => set({ headerTitle: title }),
+  setHeaderActions: (actions: ReactNode) => set({ headerActions: actions }),
   toggleCollapsed: () => set((state) => ({ collapsed: !state.collapsed })),
 
   setMobileMenuOpened: (open) => {

package/templates/mern-ts/client/src/utils/formatDate.ts

@@ -0,0 +1,19 @@
+export const formatDate = (
+  date: string | Date | number,
+  options: Intl.DateTimeFormatOptions = {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+  },
+  locale = "en-IN"
+): string => {
+  if (!date) return "-";
+
+  const parsedDate = new Date(date);
+
+  if (isNaN(parsedDate.getTime())) {
+    return "-";
+  }
+
+  return new Intl.DateTimeFormat(locale, options).format(parsedDate);
+};

package/templates/mern-ts/server/.env.example

@@ -12,7 +12,7 @@ APP_PRIMARY_COLOR=#2563eb
 # ==========================
 # Database
 # ==========================
-MONGO_URI=
+MONGO_URI=mongodb://localhost:27017/test
 
 # ==========================
 # JWT

package/templates/mern-ts/server/src/index.ts

@@ -6,7 +6,7 @@ import logger from "./utils/logger.js";
 
 dotenv.config();
 
-const PORT = process.env.PORT || 5000;
+const PORT = process.env.PORT || 5001;
 
 connectDB();
 

package/templates/mern-ts/server/src/models/otp.model.ts

@@ -1,6 +1,12 @@
-import mongoose from "mongoose";
+import mongoose, { Document } from "mongoose";
 
-const otpSchema = new mongoose.Schema({
+export interface IOtp extends Document {
+  email: string;
+  otp: string;
+  createdAt: Date;
+}
+
+const otpSchema = new mongoose.Schema<IOtp>({
   email: {
     type: String,
     required: true,
@@ -16,6 +22,6 @@ const otpSchema = new mongoose.Schema({
   },
 });
 
-const Otp = mongoose.model("Otp", otpSchema);
+const Otp = mongoose.model<IOtp>("Otp", otpSchema);
 
 export default Otp;

package/templates/mern-ts/server/src/models/pushSubscription.model.ts

@@ -1,6 +1,19 @@
-import mongoose from "mongoose";
+import mongoose, { Document } from "mongoose";
 
-const pushSubscriptionSchema = new mongoose.Schema(
+export interface IPushSubscription extends Document {
+  endpoint: string;
+  keys: {
+    p256dh: string;
+    auth: string;
+  };
+  user?: mongoose.Types.ObjectId;
+  role: "admin" | "user";
+  expiresAt: Date;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+const pushSubscriptionSchema = new mongoose.Schema<IPushSubscription>(
   {
     endpoint: {
       type: String,
@@ -29,4 +42,4 @@ const pushSubscriptionSchema = new mongoose.Schema(
   { timestamps: true },
 );
 
-export default mongoose.model("PushSubscription", pushSubscriptionSchema);
+export default mongoose.model<IPushSubscription>("PushSubscription", pushSubscriptionSchema);

package/templates/mern-ts/server/src/models/user.model.ts

@@ -1,6 +1,20 @@
-import mongoose from "mongoose";
+import mongoose, { Document } from "mongoose";
 
-const userSchema = new mongoose.Schema(
+export interface IUser extends Document {
+  name: string;
+  email: string;
+  phone?: string;
+  avatar?: {
+    publicId?: string;
+    url?: string;
+  };
+  password?: string;
+  role: "user" | "admin" | "other";
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+const userSchema = new mongoose.Schema<IUser>(
   {
     name: {
       type: String,
@@ -39,5 +53,5 @@ const userSchema = new mongoose.Schema(
   { timestamps: true },
 );
 
-const User = mongoose.model("User", userSchema);
+const User = mongoose.model<IUser>("User", userSchema);
 export default User;

package/templates/node/.env.example

@@ -12,7 +12,7 @@ APP_PRIMARY_COLOR=#2563eb
 # ==========================
 # Database
 # ==========================
-MONGO_URI=
+MONGO_URI=mongodb://localhost:27017/test
 
 # ==========================
 # JWT

package/templates/node-ts/.env.example

@@ -12,7 +12,7 @@ APP_PRIMARY_COLOR=#2563eb
 # ==========================
 # Database
 # ==========================
-MONGO_URI=
+MONGO_URI=mongodb://localhost:27017/test
 
 # ==========================
 # JWT

package/templates/node-ts/src/models/otp.model.ts

@@ -1,6 +1,12 @@
-import mongoose from "mongoose";
+import mongoose, { Document } from "mongoose";
 
-const otpSchema = new mongoose.Schema({
+export interface IOtp extends Document {
+  email: string;
+  otp: string;
+  createdAt: Date;
+}
+
+const otpSchema = new mongoose.Schema<IOtp>({
   email: {
     type: String,
     required: true,
@@ -16,6 +22,6 @@ const otpSchema = new mongoose.Schema({
   },
 });
 
-const Otp = mongoose.model("Otp", otpSchema);
+const Otp = mongoose.model<IOtp>("Otp", otpSchema);
 
 export default Otp;

package/templates/node-ts/src/models/pushSubscription.model.ts

@@ -1,6 +1,19 @@
-import mongoose from "mongoose";
+import mongoose, { Document } from "mongoose";
 
-const pushSubscriptionSchema = new mongoose.Schema(
+export interface IPushSubscription extends Document {
+  endpoint: string;
+  keys: {
+    p256dh: string;
+    auth: string;
+  };
+  user?: mongoose.Types.ObjectId;
+  role: "admin" | "user";
+  expiresAt: Date;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+const pushSubscriptionSchema = new mongoose.Schema<IPushSubscription>(
   {
     endpoint: {
       type: String,
@@ -29,4 +42,4 @@ const pushSubscriptionSchema = new mongoose.Schema(
   { timestamps: true },
 );
 
-export default mongoose.model("PushSubscription", pushSubscriptionSchema);
+export default mongoose.model<IPushSubscription>("PushSubscription", pushSubscriptionSchema);

package/templates/node-ts/src/models/user.model.ts

@@ -1,6 +1,20 @@
-import mongoose from "mongoose";
+import mongoose, { Document } from "mongoose";
 
-const userSchema = new mongoose.Schema(
+export interface IUser extends Document {
+  name: string;
+  email: string;
+  phone?: string;
+  avatar?: {
+    publicId?: string;
+    url?: string;
+  };
+  password?: string;
+  role: "user" | "admin" | "other";
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+const userSchema = new mongoose.Schema<IUser>(
   {
     name: {
       type: String,
@@ -39,5 +53,5 @@ const userSchema = new mongoose.Schema(
   { timestamps: true },
 );
 
-const User = mongoose.model("User", userSchema);
+const User = mongoose.model<IUser>("User", userSchema);
 export default User;

package/templates/react/package.json

@@ -29,7 +29,6 @@
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
     "@vitejs/plugin-react": "^4.2.0",
-    "autoprefixer": "^10.4.19",
     "eslint": "^8.53.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",

package/templates/react/src/App.jsx

@@ -20,17 +20,17 @@ const App = () => {
   // Initialize Lenis smooth scroll
   // useLenis();
 
-  // useEffect(() => {
-  //   getMe();
-  // }, []);
+  useEffect(() => {
+    getMe();
+  }, []);
 
-  // if (loading) {
-  //   return (
-  //     <div className="flex h-screen items-center justify-center bg-base-100">
-  //       <Loading />
-  //     </div>
-  //   );
-  // }
+  if (loading) {
+    return (
+      <div className="flex h-screen items-center justify-center bg-base-100">
+        <Loading />
+      </div>
+    );
+  }
 
   return (
     <div className="min-h-screen bg-base-100 text-base-content">

package/templates/react/src/components/layout/ProtectedRoute.jsx

@@ -3,9 +3,9 @@ import { useAuthStore } from "../../store/useAuthStore";
 import Loading from "../common/Loading";
 
 const ProtectedRoute = ({ children, role }) => {
-  const { user, isCheckingAuth } = useAuthStore();
+  const { user, loading } = useAuthStore();
 
-  if (isCheckingAuth) return <Loading />;
+  if (loading) return <Loading />;
 
   if (!user) return <Navigate to="/login" />;
 

package/templates/react/src/store/useAuthStore.js

@@ -14,7 +14,7 @@ export const useAuthStore = create((set, get) => ({
         localStorage.setItem("token", data.token);
       }
       set({
-        user: data,
+        user: data.data,
         loading: false,
       });
       return true;
@@ -37,7 +37,7 @@ export const useAuthStore = create((set, get) => ({
         localStorage.setItem("token", data.token);
       }
       set({
-        user: data,
+        user: data.data,
         loading: false,
       });
       return true;
@@ -56,7 +56,7 @@ export const useAuthStore = create((set, get) => ({
     set({ loading: true });
     try {
       const { data } = await authService.getMe();
-      set({ user: data, loading: false });
+      set({ user: data.data, loading: false });
     } catch (err) {
       set({ loading: false });
     } finally {
@@ -68,7 +68,7 @@ export const useAuthStore = create((set, get) => ({
     set({ loading: true, error: null });
     try {
       const { data } = await authService.updateMe(updates);
-      set({ user: data, loading: false });
+      set({ user: data.data, loading: false });
       return true;
     } catch (err) {
       set({

package/templates/react/src/utils/formatDate.js

@@ -0,0 +1,15 @@
+export const formatDate = (
+  date,
+  options = { day: "2-digit", month: "short", year: "numeric" },
+  locale = "en-IN",
+) => {
+  if (!date) return "-";
+
+  const parsedDate = new Date(date);
+
+  if (isNaN(parsedDate.getTime())) {
+    return "-";
+  }
+
+  return new Intl.DateTimeFormat(locale, options).format(parsedDate);
+};

package/templates/react-ts/package.json

@@ -31,13 +31,9 @@
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
     "@vitejs/plugin-react": "^4.2.0",
-    "autoprefixer": "^10.4.19",
     "eslint": "^8.53.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",
-    "flyonui": "^1.0.0",
-    "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.3",
     "typescript": "^5.2.2",
     "vite": "^5.0.0",
     "eslint-plugin-react": "^7.33.2"

package/templates/react-ts/src/components/layout/ProtectedRoute.tsx

@@ -9,9 +9,9 @@ interface ProtectedRouteProps {
 }
 
 const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children, role }) => {
-  const { user, isCheckingAuth } = useAuthStore();
+  const { user, loading } = useAuthStore();
 
-  if (isCheckingAuth) return <Loading />;
+  if (loading) return <Loading />;
 
   if (!user) return <Navigate to="/login" />;
 

package/templates/react-ts/src/components/modals/ConfirmModal.tsx

@@ -7,7 +7,10 @@ import {
   FaCircleXmark,
 } from "react-icons/fa6";
 
-const variants = {
+const variants: Record<
+  "warning" | "error" | "success" | "info",
+  { icon: any; iconBg: string; iconColor: string; button: string }
+> = {
   warning: {
     icon: FaTriangleExclamation,
     iconBg: "bg-warning/15",
@@ -34,6 +37,20 @@ const variants = {
   },
 };
 
+export interface ConfirmModalProps {
+  open: boolean;
+  variant?: "warning" | "error" | "success" | "info";
+  title?: string;
+  message?: string;
+  confirmText?: string;
+  cancelText?: string;
+  loading?: boolean;
+  closeOnBackdrop?: boolean;
+  closeOnEsc?: boolean;
+  onConfirm: () => void | Promise<void>;
+  onCancel: () => void;
+}
+
 const ConfirmModal = ({
   open,
   variant = "warning",
@@ -46,11 +63,11 @@ const ConfirmModal = ({
   closeOnEsc = true,
   onConfirm,
   onCancel,
-}) => {
+}: ConfirmModalProps) => {
   useEffect(() => {
     if (!open || !closeOnEsc) return;
 
-    const handleKeyDown = (e) => {
+    const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === "Escape") {
         onCancel?.();
       }
@@ -63,7 +80,7 @@ const ConfirmModal = ({
 
   if (!open) return null;
 
-  const style = variants[variant] || variants.warning;
+  const style = variants[variant || "warning"];
   const Icon = style.icon;
 
   return createPortal(

package/templates/react-ts/src/components/modals/Modal.tsx

@@ -1,7 +1,19 @@
-import { useEffect } from "react";
+import { useEffect, ReactNode } from "react";
 import { createPortal } from "react-dom";
 import { IoClose } from "react-icons/io5";
 
+export interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  children: ReactNode;
+  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+  closeOnBackdrop?: boolean;
+  closeOnEsc?: boolean;
+  showCloseButton?: boolean;
+  footer?: ReactNode;
+}
+
 const sizes = {
   sm: "max-w-sm",
   md: "max-w-md",
@@ -21,7 +33,7 @@ const Modal = ({
   closeOnEsc = true,
   showCloseButton = true,
   footer,
-}) => {
+}: ModalProps) => {
   useEffect(() => {
     if (!open || !closeOnEsc) return;
 

package/templates/react-ts/src/services/authService.ts

@@ -1,15 +1,15 @@
 import { api } from "../config/api";
 
 export const authService = {
-  signup: (name, email, password, role = "user") =>
+  signup: (name: string, email: string, password: string, role = "user") =>
     api.post("/auth/signup", { name, email, password, role }),
 
-  login: (email, password) =>
+  login: (email: string, password: string) =>
     api.post("/auth/login", { email, password }),
 
   getMe: () => api.get("/auth/me"),
 
-  updateMe: (data) => api.put("/auth/me", data),
+  updateMe: (data: any) => api.put("/auth/me", data),
 
   logout: () =>
     api.post("/auth/logout"),

package/templates/react-ts/src/store/useAuthStore.ts

@@ -1,12 +1,37 @@
 import { create } from "zustand";
 import { authService } from "../services/authService";
 
-export const useAuthStore = create((set, get) => ({
+export interface User {
+  _id: string;
+  name: string;
+  email: string;
+  phone?: string;
+  role: string;
+  avatar?: {
+    url?: string;
+    publicId?: string;
+  };
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export interface AuthState {
+  user: User | null;
+  loading: boolean;
+  error: string | null;
+  signup: (name: string, email: string, password: string, role?: string) => Promise<boolean>;
+  login: (email: string, password: string) => Promise<boolean>;
+  getMe: () => Promise<void>;
+  updateProfile: (updates: Partial<User> | FormData) => Promise<boolean>;
+  logout: () => Promise<void>;
+}
+
+export const useAuthStore = create<AuthState>((set) => ({
   user: null,
   loading: true,
   error: null,
 
-  signup: async (name, email, password, role = "user") => {
+  signup: async (name: string, email: string, password: string, role = "user") => {
     set({ loading: true, error: null });
     try {
       const { data } = await authService.signup(name, email, password, role);
@@ -14,11 +39,11 @@ export const useAuthStore = create((set, get) => ({
         localStorage.setItem("token", data.token);
       }
       set({
-        user: data,
+        user: data.data,
         loading: false,
       });
       return true;
-    } catch (err) {
+    } catch (err: any) {
       set({
         error: err.response?.data?.message || err.message,
         loading: false,
@@ -29,7 +54,7 @@ export const useAuthStore = create((set, get) => ({
     }
   },
 
-  login: async (email, password) => {
+  login: async (email: string, password: string) => {
     set({ loading: true, error: null });
     try {
       const { data } = await authService.login(email, password);
@@ -37,11 +62,11 @@ export const useAuthStore = create((set, get) => ({
         localStorage.setItem("token", data.token);
       }
       set({
-        user: data,
+        user: data.data,
         loading: false,
       });
       return true;
-    } catch (err) {
+    } catch (err: any) {
       set({
         error: err.response?.data?.message || err.message,
         loading: false,
@@ -56,21 +81,21 @@ export const useAuthStore = create((set, get) => ({
     set({ loading: true });
     try {
       const { data } = await authService.getMe();
-      set({ user: data, loading: false });
-    } catch (err) {
+      set({ user: data.data, loading: false });
+    } catch (err: any) {
       set({ loading: false });
     } finally {
       set({ loading: false });
     }
   },
 
-  updateProfile: async (updates) => {
+  updateProfile: async (updates: Partial<User> | FormData) => {
     set({ loading: true, error: null });
     try {
       const { data } = await authService.updateMe(updates);
-      set({ user: data, loading: false });
+      set({ user: data.data, loading: false });
       return true;
-    } catch (err) {
+    } catch (err: any) {
       set({
         error: err.response?.data?.message || err.message,
         loading: false,
@@ -96,3 +121,4 @@ export const useAuthStore = create((set, get) => ({
     });
   },
 }));
+

package/templates/react-ts/src/store/useUiStore.ts

@@ -1,13 +1,33 @@
 import { create } from "zustand";
+import { ReactNode } from "react";
 
-export const useUiStore = create((set, get) => ({
+export interface UiState {
+  open: boolean;
+  collapsed: boolean;
+  isMobileMenuOpened: boolean;
+  headerTitle: string;
+  headerActions: ReactNode;
+  setHeaderTitle: (title: string) => void;
+  setHeaderActions: (actions: ReactNode) => void;
+  toggleCollapsed: () => void;
+  setMobileMenuOpened: (open: boolean) => void;
+  toggleMobileMenuOpened: () => void;
+  theme: string;
+  setTheme: (theme: string) => void;
+  toggleTheme: () => void;
+  toggleSidebar: () => void;
+  openSidebar: () => void;
+  close: () => void;
+}
+
+export const useUiStore = create<UiState>((set, get) => ({
   open: false,
   collapsed: false,
   isMobileMenuOpened: false,
   headerTitle: "Dashboard",
   headerActions: null,
-  setHeaderTitle: (title) => set({ headerTitle: title }),
-  setHeaderActions: (actions) => set({ headerActions: actions }),
+  setHeaderTitle: (title: string) => set({ headerTitle: title }),
+  setHeaderActions: (actions: ReactNode) => set({ headerActions: actions }),
   toggleCollapsed: () => set((state) => ({ collapsed: !state.collapsed })),
 
   setMobileMenuOpened: (open) => {

package/templates/react-ts/src/utils/formatDate.ts

@@ -0,0 +1,19 @@
+export const formatDate = (
+  date: string | Date | number,
+  options: Intl.DateTimeFormatOptions = {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+  },
+  locale = "en-IN"
+): string => {
+  if (!date) return "-";
+
+  const parsedDate = new Date(date);
+
+  if (isNaN(parsedDate.getTime())) {
+    return "-";
+  }
+
+  return new Intl.DateTimeFormat(locale, options).format(parsedDate);
+};