@imksh/create 1.0.28 → 1.0.31

package/templates/layers/next/javascript/src/components/modals/Modal.jsx

@@ -1,13 +1,20 @@
+"use client";
 import { useEffect } from "react";
 import { createPortal } from "react-dom";
 import { IoClose } from "react-icons/io5";
+import { useUiStore } from "../../store/useUiStore";
 
 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",
 };
 
@@ -16,12 +23,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,
 }) => {
+  const setModalOpen = useUiStore((state) => state.setModalOpen);
+
+  useEffect(() => {
+    if (open) {
+      setModalOpen(true);
+      return () => {
+        setModalOpen(false);
+      };
+    }
+  }, [open, setModalOpen]);
+
   useEffect(() => {
     if (!open || !closeOnEsc) return;
 
@@ -33,8 +55,9 @@ const Modal = ({
 
     document.addEventListener("keydown", handleKeyDown);
 
-    return () =>
+    return () => {
       document.removeEventListener("keydown", handleKeyDown);
+    };
   }, [open, closeOnEsc, onClose]);
 
   if (!open) return null;
@@ -51,37 +74,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>
         )}
@@ -91,4 +122,4 @@ const Modal = ({
   );
 };
 
-export default Modal;
+export default Modal;

package/templates/layers/next/javascript/src/components/ui/Input.jsx

@@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+import { X } from "lucide-react";
+
+export const Input = React.forwardRef(
+  (
+    {
+      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/next/{typescript/src/components/ui/sidebar.tsx → javascript/src/components/ui/Sidebar.jsx}

@@ -1,26 +1,36 @@
 "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 isMobile = width < 1024; // lg breakpoint
+  const router = useRouter();
+  const isMobile = width < 1024;
 
   const showSidebar = !isMobile || open;
 
+  const handleLogout = async () => {
+    await logout();
+    close();
+    router.replace("/login");
+  };
+
   return (
     <>
-      {/* Overlay with AnimatePresence */}
       <AnimatePresence>
         {isMobile && open && (
           <motion.div
@@ -34,7 +44,6 @@ const Sidebar = () => {
         )}
       </AnimatePresence>
 
-      {/* Sidebar with AnimatePresence */}
       <AnimatePresence>
         {showSidebar && (
           <motion.aside
@@ -47,18 +56,14 @@ 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 */}
             <div className="h-16 border-b border-base-300 flex items-center justify-between px-5">
               <div className="flex items-center gap-3">
                 {appConfig.app.logo ? (
-                  <img
-                    src={appConfig.app.logo}
-                    alt=""
-                    className="w-8 h-8 rounded-lg"
-                  />
+                  <img src={appConfig.app.logo} alt="" className="w-8 h-8 rounded-lg" />
                 ) : (
                   <div className="flex items-center">
                     <div className="bg-primary w-8 h-8 rounded-lg flex items-center justify-center text-primary-content font-bold">
@@ -85,65 +90,72 @@ const Sidebar = () => {
             <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">
-                        {item.title}
-                      </span>
+                      <span className="font-medium whitespace-nowrap">{item.title}</span>
                     )}
                   </Link>
                 );
               })}
             </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 */}
+            <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/javascript/src/components/ui/SidebarHeader.jsx

@@ -1,11 +1,14 @@
+"use client";
+import React from "react";
 import { FiMenu } from "react-icons/fi";
 import { useUiStore } from "../../store/useUiStore";
+import { Breadcrumbs } from "../common/Breadcrumbs";
 
 const SidebarHeader = ({ title = "Dashboard", actions = null }) => {
-  const { toggleSidebar } = useUiStore();
+  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}
@@ -14,12 +17,14 @@ const SidebarHeader = ({ title = "Dashboard", actions = null }) => {
           <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/javascript/src/config/appConfig.js

@@ -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/javascript/src/hooks/useWindowSize.js

@@ -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/javascript/src/store/useUiStore.js

@@ -6,6 +6,8 @@ export const useUiStore = create((set, get) => ({
   isMobileMenuOpened: false,
   headerTitle: "Dashboard",
   headerActions: null,
+  breadcrumbs: null,
+  setBreadcrumbs: (items) => set({ breadcrumbs: items }),
   setHeaderTitle: (title) => set({ headerTitle: title }),
   setHeaderActions: (actions) => set({ headerActions: actions }),
   toggleCollapsed: () => set((state) => ({ collapsed: !state.collapsed })),
@@ -17,7 +19,10 @@ export const useUiStore = create((set, get) => ({
     set((state) => ({ isMobileMenuOpened: !state.isMobileMenuOpened }));
   },
 
-  theme: typeof window !== "undefined" ? localStorage.getItem("theme") || "light" : "light",
+  theme:
+    typeof window !== "undefined"
+      ? localStorage.getItem("theme") || "light"
+      : "light",
 
   setTheme: (theme) => {
     if (typeof document !== "undefined") {
@@ -26,20 +31,17 @@ export const useUiStore = create((set, get) => ({
     if (typeof window !== "undefined") {
       localStorage.setItem("theme", theme);
     }
-
     set({ theme });
   },
 
   toggleTheme: () => {
     const nextTheme = get().theme === "light" ? "dark" : "light";
-
     if (typeof document !== "undefined") {
       document.documentElement.setAttribute("data-theme", nextTheme);
     }
     if (typeof window !== "undefined") {
       localStorage.setItem("theme", nextTheme);
     }
-
     set({ theme: nextTheme });
   },
 
@@ -57,4 +59,7 @@ export const useUiStore = create((set, get) => ({
     set({
       open: false,
     }),
+
+  modalOpen: false,
+  setModalOpen: (open) => set({ modalOpen: open }),
 }));

package/templates/layers/next/typescript/src/components/common/Breadcrumbs.tsx

@@ -1,25 +1,74 @@
 "use client";
 import React from "react";
 import Link from "next/link";
-import { ChevronRight } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { ArrowLeft, ChevronRight } from "lucide-react";
 
-export const Breadcrumbs = ({ items }: { items: any[] }) => {
+export interface BreadcrumbItem {
+  label: React.ReactNode;
+  path?: string;
+  subtitle?: string;
+  onClick?: () => void;
+}
+
+interface BreadcrumbsProps {
+  items: BreadcrumbItem[];
+}
+
+export const Breadcrumbs = ({ items }: BreadcrumbsProps) => {
+  const router = useRouter();
   return (
     <div className="flex items-center gap-1.5 text-sm font-bold text-base-content/50 flex-wrap">
-      {items.map((item: any, idx: number) => {
+      <button
+        className="btn btn-primary btn-soft btn-square btn-sm mr-1 hidden md:flex"
+        onClick={() => router.back()}
+      >
+        <ArrowLeft size={18} />
+      </button>
+      {items.map((item, idx) => {
         const isLast = idx === items.length - 1;
         return (
           <React.Fragment key={idx}>
             {item.path && !isLast ? (
-              <Link href={item.path} className="hover:text-primary transition-colors">
+              <Link
+                href={item.path}
+                onClick={item.onClick}
+                className="hover:text-primary transition-colors hidden sm:flex items-center gap-1"
+              >
                 {item.label}
               </Link>
-            ) : (
-              <span className={isLast ? "text-base font-black text-base-content tracking-tight" : ""}>
+            ) : item.onClick && !isLast ? (
+              <button
+                type="button"
+                onClick={item.onClick}
+                className="hover:text-primary transition-colors hidden sm:flex items-center gap-1"
+              >
                 {item.label}
-              </span>
+              </button>
+            ) : (
+              <div className="flex flex-col">
+                <span
+                  className={
+                    isLast
+                      ? "text-lg md:text-xl font-bold leading-tight text-base-content tracking-tight truncate max-w-[200px] md:max-w-none"
+                      : ""
+                  }
+                >
+                  {item.label}
+                </span>
+                {item.subtitle && (
+                  <span className="text-xs text-base-content/60 font-normal truncate">
+                    {item.subtitle}
+                  </span>
+                )}
+              </div>
+            )}
+            {!isLast && (
+              <ChevronRight
+                size={14}
+                className="text-base-content/30 shrink-0 hidden sm:block"
+              />
             )}
-            {!isLast && <ChevronRight size={14} className="text-base-content/30 shrink-0" />}
           </React.Fragment>
         );
       })}

package/templates/layers/next/typescript/src/components/common/Loading.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import LottieAnimation from "./LottieIcon";
 import loader from "../../assets/animations/loading.json";