@imksh/create 1.0.30 → 1.0.32

package/templates/layers/next/typescript/src/components/modals/Modal.tsx

@@ -1,25 +1,47 @@
+"use client";
 import { useEffect, ReactNode } from "react";
 import { createPortal } from "react-dom";
 import { IoClose } from "react-icons/io5";
+import { useUiStore } from "../../store/useUiStore";
 
 export interface ModalProps {
   open: boolean;
   onClose: () => void;
-  title: string;
+  title?: string;
   children: ReactNode;
-  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+  size?:
+    | "sm"
+    | "md"
+    | "lg"
+    | "xl"
+    | "2xl"
+    | "3xl"
+    | "4xl"
+    | "5xl"
+    | "6xl"
+    | "7xl"
+    | "full";
   closeOnBackdrop?: boolean;
   closeOnEsc?: boolean;
   showCloseButton?: boolean;
+  hideHeader?: boolean;
+  className?: string;
+  bodyClass?: string;
   footer?: ReactNode;
+  height?: string | number;
 }
 
 const sizes = {
   sm: "max-w-sm",
   md: "max-w-md",
   lg: "max-w-lg",
-  xl: "max-w-2xl",
-  "2xl": "max-w-4xl",
+  xl: "max-w-xl",
+  "2xl": "max-w-2xl",
+  "3xl": "max-w-3xl",
+  "4xl": "max-w-4xl",
+  "5xl": "max-w-5xl",
+  "6xl": "max-w-6xl",
+  "7xl": "max-w-7xl",
   full: "max-w-7xl",
 };
 
@@ -28,12 +50,27 @@ const Modal = ({
   onClose,
   title,
   children,
-  size = "md",
+  size = "4xl",
   closeOnBackdrop = true,
   closeOnEsc = true,
   showCloseButton = true,
+  hideHeader = false,
+  className = "",
+  bodyClass = "p-2 sm:p-4",
   footer,
+  height,
 }: ModalProps) => {
+  const setModalOpen = useUiStore((state) => state.setModalOpen);
+
+  useEffect(() => {
+    if (open) {
+      setModalOpen(true);
+      return () => {
+        setModalOpen(false);
+      };
+    }
+  }, [open, setModalOpen]);
+
   useEffect(() => {
     if (!open || !closeOnEsc) return;
 
@@ -45,8 +82,9 @@ const Modal = ({
 
     document.addEventListener("keydown", handleKeyDown);
 
-    return () =>
+    return () => {
       document.removeEventListener("keydown", handleKeyDown);
+    };
   }, [open, closeOnEsc, onClose]);
 
   if (!open) return null;
@@ -63,37 +101,45 @@ const Modal = ({
       <div
         className={`
           relative
+          flex flex-col overflow-hidden max-h-[90vh]
           w-full
           ${sizes[size]}
           rounded-2xl
           bg-base-100
-          shadow-2xl
+          shadow-md
           border border-base-300
           animate-in zoom-in-95 fade-in duration-200
+          ${className}
         `}
+        style={height ? { height } : undefined}
       >
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-base-300 px-6 py-4">
-          <h2 className="text-lg font-bold">{title}</h2>
+        {!hideHeader && (title || showCloseButton) && (
+          <div className="flex items-center justify-between border-b border-base-300 px-6 py-4 shrink-0">
+            {title && <h2 className="text-lg font-bold">{title}</h2>}
 
-          {showCloseButton && (
-            <button
-              className="btn btn-circle btn-sm btn-ghost"
-              onClick={onClose}
-            >
-              <IoClose size={20} />
-            </button>
-          )}
-        </div>
+            {showCloseButton && (
+              <button
+                className="btn btn-circle btn-sm btn-error btn-soft text-error/70 hover:text-error hover:bg-error/20 hover:shadow-sm hover:rotate-180 transition-transform duration-200"
+                onClick={onClose}
+              >
+                <IoClose size={20} className="" />
+              </button>
+            )}
+          </div>
+        )}
 
         {/* Body */}
-        <div className="max-h-[70vh] overflow-y-auto p-6">
+        <div
+          className={`flex-1 min-h-0 overflow-y-auto ${bodyClass}`}
+          data-lenis-prevent="true"
+        >
           {children}
         </div>
 
         {/* Footer */}
         {footer && (
-          <div className="border-t border-base-300 px-6 py-4">
+          <div className="border-t border-base-300 px-6 py-4 shrink-0">
             {footer}
           </div>
         )}
@@ -103,4 +149,4 @@ const Modal = ({
   );
 };
 
-export default Modal;
+export default Modal;

package/templates/layers/next/typescript/src/components/ui/Button.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React, { ButtonHTMLAttributes } from "react";
 import { FiLoader } from "react-icons/fi";
 

package/templates/layers/next/typescript/src/components/ui/Header.tsx

@@ -21,7 +21,7 @@ const Header = () => {
   const { user } = useAuthStore();
   const router = useRouter();
   const pathname = usePathname();
-  const headerRef = useRef<HTMLHeadingElement>(null);
+  const headerRef = useRef<HTMLElement>(null);
 
   // Close mobile menu on scroll
   useEffect(() => {
@@ -44,7 +44,7 @@ const Header = () => {
   }, [setIsMobilemenuOpen]);
 
   return (
-    <header ref={headerRef as any} className="sticky top-0 z-40 p-4">
+    <header ref={headerRef} className="sticky top-0 z-40 p-4">
       <div className="max-w-7xl mx-auto relative">
         {/* Main Navbar Bar */}
         <div className="bg-primary text-primary-content rounded-full shadow-lg px-5 py-2.5 flex items-center justify-between relative">

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

@@ -1,79 +1,59 @@
+"use client";
 import React, { InputHTMLAttributes, ReactNode } from "react";
+import { X } from "lucide-react";
 
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-  label?: string;
-  error?: string;
-  helperText?: string;
-  leftIcon?: ReactNode;
-  rightIcon?: ReactNode;
-  fullWidth?: boolean;
+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>(
   (
     {
-      label,
-      error,
-      helperText,
-      leftIcon,
-      rightIcon,
-      fullWidth = true,
+      icon,
+      wrapperClassName = "",
+      onClear,
       className = "",
-      id,
+      value,
+      size,
       ...props
     },
-    ref
+    ref,
   ) => {
-    const inputId = id || (label ? label.toLowerCase().replace(/\s+/g, "-") : undefined);
-
-    const inputClasses = [
-      "input input-bordered",
-      error ? "input-error" : "",
-      leftIcon ? "pl-10" : "",
-      rightIcon ? "pr-10" : "",
-      fullWidth ? "w-full" : "",
-      className,
-    ]
-      .filter(Boolean)
-      .join(" ");
-
+    const sizeClass = size ? `input-${size}` : "";
     return (
-      <div className={`form-control ${fullWidth ? "w-full" : ""}`}>
-        {label && (
-          <label htmlFor={inputId} className="label">
-            <span className="label-text font-medium">{label}</span>
-          </label>
+      <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>
         )}
-        <div className="relative flex items-center">
-          {leftIcon && (
-            <div className="absolute left-3 text-base-content/50 pointer-events-none">
-              {leftIcon}
-            </div>
-          )}
-          <input
-            id={inputId}
-            ref={ref}
-            className={inputClasses}
-            {...props}
-          />
-          {rightIcon && (
-            <div className="absolute right-3 text-base-content/50 pointer-events-none">
-              {rightIcon}
-            </div>
-          )}
-        </div>
-        {(error || helperText) && (
-          <label className="label">
-            <span className={`label-text-alt ${error ? "text-error" : "text-base-content/70"}`}>
-              {error || helperText}
-            </span>
-          </label>
+        <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";
-
-export default Input;

package/templates/layers/next/{javascript/src/components/ui/sidebar.jsx → typescript/src/components/ui/Sidebar.tsx}

@@ -1,23 +1,34 @@
 "use client";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 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 pathname = usePathname();
+  const router = useRouter();
   const isMobile = width < 1024; // lg breakpoint
 
   const showSidebar = !isMobile || open;
 
+  const handleLogout = async () => {
+    await logout();
+    close();
+    router.replace("/login");
+  };
+
   return (
     <>
       {/* Overlay with AnimatePresence */}
@@ -47,7 +58,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 */}
@@ -82,32 +93,30 @@ const Sidebar = () => {
             </div>
 
             {/* Navigation */}
-            <nav className="flex-1 overflow-y-auto p-2.5 space-y-1" data-lenis-prevent>
+            <nav
+              className="flex-1 overflow-y-auto p-2.5 space-y-1"
+              data-lenis-prevent
+            >
               {navigation.map((item) => {
                 const Icon = item.icon;
-                const isActive = pathname === item.path;
+                const isActive =
+                  item.path === "/"
+                    ? pathname === "/"
+                    : pathname.startsWith(item.path);
 
                 return (
                   <Link
                     key={item.path}
                     href={item.path}
                     onClick={isMobile ? close : undefined}
-                    className={`flex items-center gap-3 rounded-box px-4 py-3 transition-all h-12 
-                      ${
-                        isActive
-                          ? "bg-primary text-primary-content"
-                          : "hover:bg-base-300"
-                      } ${collapsed ? "justify-center px-0" : ""}`
-                    }
                     title={collapsed ? item.title : ""}
+                    className={`flex items-center gap-3 rounded-box px-4 py-3 h-12 transition-colors
+                      ${isActive ? "bg-primary text-primary-content" : "hover:bg-base-300"}
+                      ${collapsed ? "justify-center px-0" : ""}`}
                   >
-                    <Icon
-                      size={18}
-                      className={`shrink-0 ${collapsed && "mr-auto"}`}
-                    />
-
+                    <Icon size={18} className={`shrink-0 ${collapsed ? "mr-auto" : ""}`} />
                     {!collapsed && (
-                      <span className="font-medium transition-all duration-300">
+                      <span className="font-medium whitespace-nowrap">
                         {item.title}
                       </span>
                     )}
@@ -116,34 +125,58 @@ const Sidebar = () => {
               })}
             </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={handleLogout}
+                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/next/typescript/src/components/ui/SidebarHeader.tsx

@@ -1,18 +1,22 @@
+"use client";
 import React from "react";
 import { FiMenu } from "react-icons/fi";
 import { useUiStore } from "../../store/useUiStore";
+import { Breadcrumbs } from "../common/Breadcrumbs";
+
+interface SidebarHeaderProps {
+  title?: string;
+  actions?: React.ReactNode;
+}
 
 const SidebarHeader = ({
   title = "Dashboard",
   actions = null,
-}: {
-  title?: string;
-  actions?: React.ReactNode;
-}) => {
-  const { toggleSidebar } = useUiStore();
+}: SidebarHeaderProps) => {
+  const { toggleSidebar, breadcrumbs } = useUiStore();
 
   return (
-    <header className="sticky top-0 z-30 h-16 bg-base-200 backdrop-blur border-b border-base-300 flex items-center justify-between px-4 lg:px-6">
+    <header className="sticky top-0 z-30 h-16 bg-base-200 backdrop-blur border-b border-base-200 flex items-center justify-between px-4 lg:px-6">
       <div className="flex items-center gap-3">
         <button
           onClick={toggleSidebar}
@@ -21,12 +25,14 @@ const SidebarHeader = ({
           <FiMenu size={22} />
         </button>
 
-        <h1 className="text-xl font-bold">{title}</h1>
+        {breadcrumbs && breadcrumbs.length > 0 ? (
+          <Breadcrumbs items={breadcrumbs} />
+        ) : (
+          <h1 className="text-xl font-bold">{title}</h1>
+        )}
       </div>
 
-      <div className="flex items-center gap-2">
-        {actions}
-      </div>
+      <div className="flex items-center gap-2">{actions}</div>
     </header>
   );
 };

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

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

package/templates/layers/next/typescript/src/hooks/usePwaInstall.ts

@@ -1,14 +1,20 @@
 import { useState, useEffect } from "react";
 
+interface BeforeInstallPromptEvent extends Event {
+  prompt: () => Promise<void>;
+  userChoice: Promise<{ outcome: "accepted" | "dismissed"; platform: string }>;
+}
+
 const usePwaInstall = () => {
   const [canInstall, setCanInstall] = useState(false);
   const [isInstalled, setIsInstalled] = useState(false);
-  const [deferredPrompt, setDeferredPrompt] = useState<any>(null);
+  const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null);
 
   useEffect(() => {
-    const handleBeforeInstallPrompt = (e: any) => {
-      e.preventDefault();
-      setDeferredPrompt(e);
+    const handleBeforeInstallPrompt = (e: Event) => {
+      const event = e as BeforeInstallPromptEvent;
+      event.preventDefault();
+      setDeferredPrompt(event);
       setCanInstall(true);
     };
 

package/templates/layers/next/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/next/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"),