@imksh/create 1.0.30 → 1.0.32

package/templates/layers/react/typescript/src/components/ui/Input.tsx

@@ -0,0 +1,58 @@
+import React, { InputHTMLAttributes, ReactNode } from "react";
+import { X } from "lucide-react";
+
+export interface InputProps extends Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "size"
+> {
+  icon?: ReactNode;
+  wrapperClassName?: string;
+  onClear?: () => void;
+  size?: "xs" | "sm" | "md" | "lg";
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      icon,
+      wrapperClassName = "",
+      onClear,
+      className = "",
+      value,
+      size,
+      ...props
+    },
+    ref,
+  ) => {
+    const sizeClass = size ? `input-${size}` : "";
+    return (
+      <div className={`relative ${wrapperClassName}`}>
+        {icon && (
+          <div className="absolute left-3 top-1/2 -translate-y-1/2 text-base-content/50 pointer-events-none flex items-center justify-center z-10">
+            {icon}
+          </div>
+        )}
+        <input
+          ref={ref}
+          value={value}
+          className={`input input-bordered w-full ${sizeClass} ${icon ? "pl-10" : ""} ${
+            onClear && value ? "pr-10" : ""
+          } ${className}`}
+          {...props}
+        />
+        {onClear && value && (
+          <button
+            type="button"
+            onClick={onClear}
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-base-content/40 hover:text-base-content transition-colors flex items-center justify-center"
+            aria-label="Clear input"
+          >
+            <X size={16} />
+          </button>
+        )}
+      </div>
+    );
+  },
+);
+
+Input.displayName = "Input";

package/templates/layers/react/typescript/src/components/ui/Sidebar.tsx

@@ -2,14 +2,18 @@ import { NavLink } from "react-router-dom";
 import { IoClose } from "react-icons/io5";
 import { useUiStore } from "../../store/useUiStore";
 import { navigation } from "../../config/navigation";
-import { ChevronLeft, ChevronRight, Moon, Sun } from "lucide-react";
+import { Moon, Sun } from "lucide-react";
 import appConfig from "../../config/appConfig";
 import { motion, AnimatePresence } from "framer-motion";
 import useWindowSize from "../../hooks/useWindowSize";
+import { useAuthStore } from "../../store/useAuthStore";
+import { GoSidebarCollapse, GoSidebarExpand } from "react-icons/go";
+import { CiLogout } from "react-icons/ci";
 
 const Sidebar = () => {
-  const { open, close, collapsed, toggleCollapsed } = useUiStore();
-  const { theme, toggleTheme } = useUiStore();
+  const { open, close, collapsed, toggleCollapsed, theme, toggleTheme } =
+    useUiStore();
+  const { logout, user } = useAuthStore();
   const { width } = useWindowSize();
   const isMobile = width < 1024; // lg breakpoint
 
@@ -44,7 +48,7 @@ const Sidebar = () => {
               h-screen bg-base-200 border-r border-base-300
               flex flex-col overflow-hidden
               transition-[width] duration-300
-              ${collapsed ? "w-20" : "w-[75%] md:w-[16%] md:max-w-60"}
+              ${collapsed ? "w-18" : "w-[75%] md:w-[16%] md:max-w-60"}
             `}
           >
             {/* Header */}
@@ -79,68 +83,127 @@ const Sidebar = () => {
             </div>
 
             {/* Navigation */}
-            <nav className="flex-1 overflow-y-auto p-2.5 space-y-1" data-lenis-prevent>
-              {navigation.map((item) => {
-                const Icon = item.icon;
+            <nav
+              className="flex-1 overflow-y-auto p-2.5 space-y-1"
+              data-lenis-prevent
+            >
+              {navigation
+                .filter((item) => {
+                  const orgRole = user?.orgRole;
+                  const isUserAdmin =
+                    user?.role === "ADMIN" ||
+                    orgRole === "OWNER" ||
+                    orgRole === "ADMIN";
+
+                  // Check if item is hidden for this role
+                  if (item.hiddenForRoles) {
+                    if (
+                      isUserAdmin &&
+                      (item.hiddenForRoles.includes("OWNER") ||
+                        item.hiddenForRoles.includes("ADMIN"))
+                    ) {
+                      return false;
+                    }
+                    if (orgRole && item.hiddenForRoles.includes(orgRole)) {
+                      return false;
+                    }
+                  }
+
+                  if (!item.allowedRoles) return true; // visible to all
+                  // System-level ADMIN always gets full access
+                  if (user?.role === "ADMIN") return true;
+                  // If orgRole not yet resolved, show all items (fail open for admins)
+                  if (!orgRole) return true;
+                  return item.allowedRoles.includes(orgRole);
+                })
+                .map((item) => {
+                  const Icon = item.icon;
 
-                return (
-                  <NavLink
-                    key={item.path}
-                    to={item.path}
-                    onClick={isMobile ? close : undefined}
-                    className={({ isActive }) =>
-                      `flex items-center gap-3 rounded-box px-4 py-3 duration-0  h-12 
+                  return (
+                    <NavLink
+                      key={item.path}
+                      to={item.path}
+                      onClick={isMobile ? close : undefined}
+                      className={({ isActive }) =>
+                        `flex items-center gap-3 rounded-box px-4 py-3 duration-0  h-12 
                       ${
                         isActive
                           ? "bg-primary text-primary-content"
                           : "hover:bg-base-300"
                       } ${collapsed ? "justify-center px-0" : ""}`
-                    }
-                    title={collapsed ? item.title : ""}
-                  >
-                    <Icon
-                      size={18}
-                      className={`shrink-0 ${collapsed && "mr-auto"}`}
-                    />
+                      }
+                      title={collapsed ? item.title : ""}
+                    >
+                      <Icon
+                        size={18}
+                        className={`shrink-0 ${collapsed && "mr-auto"}`}
+                      />
 
-                    {!collapsed && (
-                      <span className="font-medium transition-all duration-0 whitespace-nowrap">
-                        {item.title}
-                      </span>
-                    )}
-                  </NavLink>
-                );
-              })}
+                      {!collapsed && (
+                        <span className="font-medium transition-all duration-0 whitespace-nowrap">
+                          {item.title}
+                        </span>
+                      )}
+                    </NavLink>
+                  );
+                })}
             </nav>
 
-            {/* Footer with Collapse Button */}
-            <button
-              onClick={toggleTheme}
-              className={`w-full flex items-center gap-3 px-3 py-2.5 md:px-4 text-sm font-semibold transition-all duration-150 text-base-content/60 hover:text-base-content hover:bg-base-300/60 justify-between rounded-none ${collapsed ? "justify-center" : ""}`}
-              title="Toggle Theme"
+            {/* Footer with Actions */}
+            <div
+              className={`p-3 border-t border-base-300/50 shrink-0 flex gap-2 ${
+                collapsed
+                  ? "flex-col items-center justify-center"
+                  : "flex-row items-center justify-between"
+              }`}
             >
-              {!collapsed && <span>{theme === "dark" ? "Dark" : "Light"}</span>}
-              <span className="btn btn-xs btn-ghost btn-circle ">
-                {theme === "dark" ? (
-                  <Sun size={16} className="shrink-0 " />
-                ) : (
-                  <Moon size={16} className="shrink-0" />
-                )}
-              </span>
-            </button>
-            <div className="p-3 border-t border-base-300/50 shrink-0 flex flex-col gap-2">
               <button
-                onClick={toggleCollapsed}
-                className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-semibold transition-all duration-150 text-base-content/60 hover:text-base-content hover:bg-base-300/60 ${collapsed ? "justify-center" : ""}`}
-                title={collapsed ? "Expand Sidebar" : "Collapse Sidebar"}
+                onClick={() => {
+                  logout();
+                  close();
+                }}
+                className={`btn btn-sm btn-circle btn-soft btn-error ${collapsed ? "hidden" : "flex"}`}
+                title="Logout"
               >
-                {collapsed ? (
-                  <ChevronRight size={18} className="shrink-0 mr-auto" />
-                ) : (
-                  <ChevronLeft size={18} className="shrink-0" />
-                )}
-                {!collapsed && <span className="truncate">Collapse</span>}
+                <CiLogout size={18} />
               </button>
+
+              <div
+                className={`flex items-center gap-2 ${collapsed ? "flex-col" : ""}`}
+              >
+                <button
+                  onClick={toggleTheme}
+                  className="flex items-center gap-3 hover:opacity-80 transition-opacity"
+                  title="Toggle Theme"
+                >
+                  <div
+                    className={`btn btn-sm btn-circle btn-primary btn-soft pointer-events-none ${collapsed ? "hidden" : "flex"}`}
+                  >
+                    {theme === "dark" ? (
+                      <Sun size={16} className="shrink-0" />
+                    ) : (
+                      <Moon size={16} className="shrink-0" />
+                    )}
+                  </div>
+                  {!collapsed && (
+                    <span className="md:hidden font-medium text-sm text-base-content/80">
+                      {theme === "dark" ? "Dark Mode" : "Light Mode"}
+                    </span>
+                  )}
+                </button>
+
+                <button
+                  onClick={toggleCollapsed}
+                  className="btn btn-sm btn-circle btn-outline border-none text-base-content/70 hover:text-base-content hover:bg-base-300/60 hidden md:flex"
+                  title={collapsed ? "Expand Sidebar" : "Collapse Sidebar"}
+                >
+                  {collapsed ? (
+                    <GoSidebarExpand size={18} />
+                  ) : (
+                    <GoSidebarCollapse size={18} />
+                  )}
+                </button>
+              </div>
             </div>
           </motion.aside>
         )}

package/templates/layers/react/typescript/src/components/ui/SidebarHeader.tsx

@@ -8,7 +8,10 @@ interface SidebarHeaderProps {
   actions?: React.ReactNode;
 }
 
-const SidebarHeader = ({ title = "Dashboard", actions = null }: SidebarHeaderProps) => {
+const SidebarHeader = ({
+  title = "Dashboard",
+  actions = null,
+}: SidebarHeaderProps) => {
   const { toggleSidebar, breadcrumbs } = useUiStore();
 
   return (
@@ -28,9 +31,7 @@ const SidebarHeader = ({ title = "Dashboard", actions = null }: SidebarHeaderPro
         )}
       </div>
 
-      <div className="flex items-center gap-2">
-        {actions}
-      </div>
+      <div className="flex items-center gap-2">{actions}</div>
     </header>
   );
 };

package/templates/layers/react/typescript/src/config/appConfig.ts

@@ -1,11 +1,11 @@
 const appConfig = {
   app: {
-    name: "React App",
+    name: "My App",
     logo: "./logo.png",
-    shortName: "React",
+    shortName: "App",
     description: "A React application built with @imksh/create",
     version: "1.0.0",
-    author: "Karan Sharma",
+    author: "",
   },
 
   api: {

package/templates/layers/react/typescript/src/hooks/useWindowSize.ts

@@ -2,11 +2,10 @@ import { useState, useEffect } from "react";
 
 const useWindowSize = () => {
   const [size, setSize] = useState({
-    width: window.innerWidth,
-    height: window.innerHeight,
+    width: typeof window !== "undefined" ? window.innerWidth : 1024,
+    height: typeof window !== "undefined" ? window.innerHeight : 768,
   });
 
-
   useEffect(() => {
     const handleResize = () => {
       setSize({

package/templates/layers/react/typescript/src/main.tsx

@@ -8,17 +8,17 @@ if ("serviceWorker" in navigator) {
   window.addEventListener("load", () => {
     navigator.serviceWorker
       .register("/sw.js")
-      .then((reg) =>
-        console.log("Service Worker registered successfully:", reg.scope),
-      )
-      .catch((err) => console.log("Service Worker registration failed:", err));
+      .catch(() => {});
   });
 }
 
-ReactDOM.createRoot(document.getElementById("root")).render(
-  <React.StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
-  </React.StrictMode>,
-);
+const rootElement = document.getElementById("root");
+if (rootElement) {
+  ReactDOM.createRoot(rootElement).render(
+    <React.StrictMode>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </React.StrictMode>,
+  );
+}

package/templates/layers/react/typescript/src/services/authService.ts

@@ -12,7 +12,7 @@ export const authService = {
 
   getMe: () => api.get("/auth/me"),
 
-  updateMe: (data: any) => api.put("/auth/me", data),
+  updateMe: (data: FormData | Record<string, unknown>) => api.put("/auth/me", data),
 
   logout: () =>
     api.post("/auth/logout"),

package/templates/layers/react/typescript/src/store/useAuthStore.ts

@@ -7,6 +7,7 @@ export interface User {
   email: string;
   phone?: string;
   role: string;
+  orgRole?: string;
   avatar?: {
     url?: string;
     publicId?: string;
@@ -15,6 +16,20 @@ export interface User {
   updatedAt?: string;
 }
 
+interface ApiErrorResponse {
+  response?: {
+    data?: {
+      message?: string;
+    };
+  };
+  message?: string;
+}
+
+const getErrorMessage = (err: unknown): string => {
+  const apiErr = err as ApiErrorResponse;
+  return apiErr.response?.data?.message || apiErr.message || "An unexpected error occurred";
+};
+
 export interface AuthState {
   user: User | null;
   loading: boolean;
@@ -39,9 +54,9 @@ export const useAuthStore = create<AuthState>((set) => ({
     try {
       await authService.sendOtp(email);
       return true;
-    } catch (err: any) {
+    } catch (err: unknown) {
       set({
-        error: err.response?.data?.message || err.message,
+        error: getErrorMessage(err),
         loading: false,
       });
       return false;
@@ -62,9 +77,9 @@ export const useAuthStore = create<AuthState>((set) => ({
         loading: false,
       });
       return true;
-    } catch (err: any) {
+    } catch (err: unknown) {
       set({
-        error: err.response?.data?.message || err.message,
+        error: getErrorMessage(err),
         loading: false,
       });
       return false;
@@ -85,9 +100,9 @@ export const useAuthStore = create<AuthState>((set) => ({
         loading: false,
       });
       return true;
-    } catch (err: any) {
+    } catch (err: unknown) {
       set({
-        error: err.response?.data?.message || err.message,
+        error: getErrorMessage(err),
         loading: false,
       });
       return false;
@@ -101,7 +116,7 @@ export const useAuthStore = create<AuthState>((set) => ({
     try {
       const { data } = await authService.getMe();
       set({ user: data.data, isCheckingAuth: false });
-    } catch (err: any) {
+    } catch {
       set({ isCheckingAuth: false });
     } finally {
       set({ isCheckingAuth: false });
@@ -114,9 +129,9 @@ export const useAuthStore = create<AuthState>((set) => ({
       const { data } = await authService.updateMe(updates);
       set({ user: data.data, loading: false });
       return true;
-    } catch (err: any) {
+    } catch (err: unknown) {
       set({
-        error: err.response?.data?.message || err.message,
+        error: getErrorMessage(err),
         loading: false,
       });
       return false;

package/templates/layers/react-native/base/app.json

@@ -4,47 +4,39 @@
     "slug": "mobile",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./assets/images/logo/logoWithBg.png",
+    "icon": "./assets/images/logo/icon.png",
     "scheme": "mobile",
     "userInterfaceStyle": "automatic",
     "ios": {
-      "icon": "./assets/images/logo/logoWithBg.png",
+      "icon": "./assets/images/logo/icon.png",
       "bundleIdentifier": "com.anonymous.mobile"
     },
     "android": {
       "adaptiveIcon": {
         "backgroundColor": "#E6F4FE",
-        "foregroundImage": "./assets/images/logo/logoWithBg.png",
-        "backgroundImage": "./assets/images/logo/logoWithBg.png",
-        "monochromeImage": "./assets/images/logo/logoWithBg.png"
+        "foregroundImage": "./assets/images/logo/icon.png",
+        "backgroundImage": "./assets/images/logo/icon.png",
+        "monochromeImage": "./assets/images/logo/icon.png"
       },
       "predictiveBackGestureEnabled": false,
       "package": "com.anonymous.mobile",
       "permissions": [
         "android.permission.CAMERA",
-        "android.permission.RECORD_AUDIO",
         "android.permission.ACCESS_FINE_LOCATION",
-        "android.permission.ACCESS_COARSE_LOCATION",
-        "android.permission.READ_CONTACTS",
-        "android.permission.READ_CALENDAR",
-        "android.permission.READ_EXTERNAL_STORAGE",
-        "android.permission.WRITE_EXTERNAL_STORAGE",
-        "android.permission.BLUETOOTH_CONNECT",
-        "android.permission.BLUETOOTH_SCAN",
-        "android.permission.CALL_PHONE"
+        "android.permission.ACCESS_COARSE_LOCATION"
       ]
     },
     "web": {
       "bundler": "metro",
       "output": "static",
-      "favicon": "./assets/images/logo/logoWithBg.png"
+      "favicon": "./assets/images/logo/icon.png"
     },
     "plugins": [
       "expo-router",
       [
         "expo-splash-screen",
         {
-          "image": "./assets/images/logo/logoWithBg.png",
+          "image": "./assets/images/logo/icon.png",
           "imageWidth": 200,
           "resizeMode": "contain",
           "backgroundColor": "#FFFFFF",
@@ -58,14 +50,9 @@
         {
           "iosPermissions": [
             "Camera",
-            "Microphone",
-            "LocationAlways",
             "LocationWhenInUse",
             "Notifications",
-            "PhotoLibrary",
-            "Contacts",
-            "Calendars",
-            "BluetoothPeripheral"
+            "PhotoLibrary"
           ]
         }
       ]

package/templates/layers/react-native/base/eslint.config.js

@@ -6,5 +6,9 @@ module.exports = defineConfig([
   expoConfig,
   {
     ignores: ["dist/*"],
-  }
+    rules: {
+      "@typescript-eslint/no-explicit-any": "error",
+      "no-console": "error",
+    },
+  },
 ]);

package/templates/layers/react-native/base/package.json

@@ -7,6 +7,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-google-signin/google-signin": "^13.1.0",
     "@react-native-picker/picker": "^2.11.4",
     "@react-navigation/bottom-tabs": "^7.18.10",
     "axios": "^1.18.1",
@@ -17,6 +18,7 @@
     "expo-constants": "~57.0.6",
     "expo-device": "~57.0.1",
     "expo-file-system": "~18.0.7",
+    "expo-sharing": "~13.0.1",
     "expo-font": "~57.0.1",
     "expo-glass-effect": "~57.0.1",
     "expo-image": "~57.0.1",
@@ -64,9 +66,12 @@
   "devDependencies": {
     "@types/react": "~19.2.2",
     "babel-plugin-inline-import": "^3.0.0",
+    "dpdm": "^3.14.0",
     "drizzle-kit": "^0.31.10",
     "eslint": "^9.0.0",
     "eslint-config-expo": "~57.0.0",
+    "prettier": "^3.4.2",
+    "ts-prune": "^0.10.3",
     "typescript": "~6.0.3"
   },
   "scripts": {
@@ -77,7 +82,12 @@
     "ios": "expo run:ios",
     "web": "expo start --web",
     "lint": "expo lint",
-    "format": "expo lint --fix",
+    "lint:fix": "expo lint --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,json}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,json}\"",
+    "circular-check": "dpdm --circular --no-warning --no-tree --exit-code circular:1 \"src/**/*.{ts,tsx}\"",
+    "ts-prune": "ts-prune",
+    "ts-purns": "ts-prune",
     "ts:check": "tsc --noEmit",
     "build": "eas build",
     "build:android": "eas build -p android",

package/templates/layers/react-native/base/src/app/(auth)/edit-profile.tsx

@@ -45,13 +45,14 @@ export default function EditProfileScreen() {
           uri: avatarUri,
           name: filename,
           type,
-        } as any);
+        } as unknown as Blob);
       }
 
       // Only update if something changed
+      const rnFormData = formData as unknown as { getParts?: () => unknown[] };
       if (
-        (formData as any).getParts &&
-        (formData as any).getParts().length === 0
+        rnFormData.getParts &&
+        rnFormData.getParts().length === 0
       ) {
         router.back();
         return;
@@ -65,10 +66,9 @@ export default function EditProfileScreen() {
       } else {
         toast.error(res.data.message);
       }
-
-      console.log(res.data.data);
-    } catch (error: any) {
-      toast.error(error.response?.data?.message || error.message);
+    } catch (error: unknown) {
+      const err = error as { response?: { data?: { message?: string } }; message?: string };
+      toast.error(err.response?.data?.message || err.message || "Failed to update profile");
     } finally {
       setLoading(false);
     }