@imksh/create 1.0.30 → 1.0.31

package/templates/layers/react/javascript/src/components/ui/Sidebar.jsx

@@ -0,0 +1,215 @@
+import { NavLink } from "react-router-dom";
+import { IoClose } from "react-icons/io5";
+import { useUiStore } from "../../store/useUiStore";
+import { navigation } from "../../config/navigation";
+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, theme, toggleTheme } =
+    useUiStore();
+  const { logout, user } = useAuthStore();
+  const { width } = useWindowSize();
+  const isMobile = width < 1024; // lg breakpoint
+
+  const showSidebar = !isMobile || open;
+
+  return (
+    <>
+      {/* Overlay with AnimatePresence */}
+      <AnimatePresence>
+        {isMobile && open && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="fixed inset-0 bg-base-100/40 z-40 lg:hidden"
+            onClick={close}
+          />
+        )}
+      </AnimatePresence>
+
+      {/* Sidebar with AnimatePresence */}
+      <AnimatePresence>
+        {showSidebar && (
+          <motion.aside
+            initial={isMobile ? { x: "-100%" } : false}
+            animate={{ x: 0 }}
+            exit={isMobile ? { x: "-100%" } : undefined}
+            transition={{ type: "tween", duration: 0.25, ease: "easeInOut" }}
+            className={`
+              fixed lg:static top-0 left-0 z-50
+              h-screen bg-base-200 border-r border-base-300
+              flex flex-col overflow-hidden
+              transition-[width] duration-300
+              ${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"
+                  />
+                ) : (
+                  <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">
+                      {appConfig.app.name.charAt(0)}
+                    </div>
+                  </div>
+                )}
+                <h1
+                  className={`text-xl font-black text-primary whitespace-nowrap overflow-hidden ${collapsed ? "hidden" : ""}`}
+                >
+                  {appConfig.app.name}
+                </h1>
+              </div>
+
+              <button
+                className={`btn btn-sm btn-circle btn-ghost md:hidden ${collapsed ? "hidden" : ""}`}
+                onClick={close}
+              >
+                <IoClose size={20} />
+              </button>
+            </div>
+
+            {/* Navigation */}
+            <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 
+                      ${
+                        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"}`}
+                      />
+
+                      {!collapsed && (
+                        <span className="font-medium transition-all duration-0 whitespace-nowrap">
+                          {item.title}
+                        </span>
+                      )}
+                    </NavLink>
+                  );
+                })}
+            </nav>
+
+            {/* 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"
+              }`}
+            >
+              <button
+                onClick={() => {
+                  logout();
+                  close();
+                }}
+                className={`btn btn-sm btn-circle btn-soft btn-error ${collapsed ? "hidden" : "flex"}`}
+                title="Logout"
+              >
+                <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>
+        )}
+      </AnimatePresence>
+    </>
+  );
+};
+
+export default Sidebar;

package/templates/layers/react/javascript/src/components/ui/SidebarHeader.jsx

@@ -1,36 +1,31 @@
-import { jsx, jsxs } from "react/jsx-runtime";
 import { FiMenu } from "react-icons/fi";
 import { useUiStore } from "../../store/useUiStore";
+
 import { Breadcrumbs } from "../common/Breadcrumbs";
+
 const SidebarHeader = ({ title = "Dashboard", actions = null }) => {
   const { toggleSidebar, breadcrumbs } = useUiStore();
-  return /* @__PURE__ */ jsxs("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",
-    children: [
-      /* @__PURE__ */ jsxs("div", {
-        className: "flex items-center gap-3",
-        children: [
-          /* @__PURE__ */ jsx("button", {
-            onClick: toggleSidebar,
-            className:
-              "btn btn-square border-none bg-base-200 shadow-none text-base-content lg:hidden",
-            children: /* @__PURE__ */ jsx(FiMenu, { size: 22 }),
-          }),
-          breadcrumbs && breadcrumbs.length > 0
-            ? /* @__PURE__ */ jsx(Breadcrumbs, { items: breadcrumbs })
-            : /* @__PURE__ */ jsx("h1", {
-                className: "text-xl font-bold",
-                children: title,
-              }),
-        ],
-      }),
-      /* @__PURE__ */ jsx("div", {
-        className: "flex items-center gap-2",
-        children: actions,
-      }),
-    ],
-  });
+
+  return (
+    <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}
+          className="btn btn-square border-none bg-base-200 shadow-none text-base-content lg:hidden"
+        >
+          <FiMenu size={22} />
+        </button>
+
+        {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>
+    </header>
+  );
 };
-var SidebarHeader_default = SidebarHeader;
-export { SidebarHeader_default as default };
+
+export default SidebarHeader;

package/templates/layers/react/javascript/src/config/appConfig.js

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

@@ -2,8 +2,8 @@ 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(() => {

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { Link } from "react-router-dom";
-import { ChevronRight } from "lucide-react";
+import { Link, useNavigate } from "react-router-dom";
+import { ArrowLeft, ChevronRight } from "lucide-react";
 
 export interface BreadcrumbItem {
   label: React.ReactNode;
@@ -14,23 +14,44 @@ interface BreadcrumbsProps {
 }
 
 export const Breadcrumbs = ({ items }: BreadcrumbsProps) => {
+  const navigation = useNavigate();
   return (
     <div className="flex items-center gap-1.5 text-sm font-bold text-base-content/50 flex-wrap">
+      <button
+        className="btn btn-primary btn-soft btn-square btn-sm mr-1 hidden md:flex"
+        onClick={() => navigation(-1)}
+      >
+        <ArrowLeft size={18} />
+      </button>
       {items.map((item, idx) => {
         const isLast = idx === items.length - 1;
         return (
           <React.Fragment key={idx}>
             {item.path && !isLast ? (
-              <Link to={item.path} onClick={item.onClick} className="hover:text-primary transition-colors hidden sm:flex items-center gap-1">
+              <Link
+                to={item.path}
+                onClick={item.onClick}
+                className="hover:text-primary transition-colors hidden sm:flex items-center gap-1"
+              >
                 {item.label}
               </Link>
             ) : item.onClick && !isLast ? (
-              <button type="button" onClick={item.onClick} className="hover:text-primary transition-colors hidden sm:flex items-center gap-1">
+              <button
+                type="button"
+                onClick={item.onClick}
+                className="hover:text-primary transition-colors hidden sm:flex items-center gap-1"
+              >
                 {item.label}
               </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" : ""}>
+                <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 && (
@@ -40,7 +61,12 @@ export const Breadcrumbs = ({ items }: BreadcrumbsProps) => {
                 )}
               </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 hidden sm:block"
+              />
+            )}
           </React.Fragment>
         );
       })}

package/templates/layers/react/typescript/src/components/common/Pagination.tsx

@@ -14,78 +14,172 @@ export const Pagination: React.FC<PaginationProps> = ({
 }) => {
   if (totalPages <= 1) return null;
 
-  const maxVisiblePages = 5;
-  let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
-  const endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
-
-  if (endPage - startPage + 1 < maxVisiblePages) {
-    startPage = Math.max(1, endPage - maxVisiblePages + 1);
+  // Desktop pagination: 5 pages with outer bounds & ellipsis
+  const maxDesktopPages = 5;
+  let startDesktopPage = Math.max(
+    1,
+    currentPage - Math.floor(maxDesktopPages / 2),
+  );
+  let endDesktopPage = Math.min(
+    totalPages,
+    startDesktopPage + maxDesktopPages - 1,
+  );
+  if (endDesktopPage - startDesktopPage + 1 < maxDesktopPages) {
+    startDesktopPage = Math.max(1, endDesktopPage - maxDesktopPages + 1);
+  }
+  const desktopPages: number[] = [];
+  for (let i = startDesktopPage; i <= endDesktopPage; i++) {
+    desktopPages.push(i);
   }
 
-  const pages = [];
-  for (let i = startPage; i <= endPage; i++) {
-    pages.push(i);
+  // Small screen pagination: exactly 3 page circles
+  const maxMobilePages = 3;
+  let startMobilePage = Math.max(
+    1,
+    currentPage - Math.floor(maxMobilePages / 2),
+  );
+  let endMobilePage = Math.min(
+    totalPages,
+    startMobilePage + maxMobilePages - 1,
+  );
+  if (endMobilePage - startMobilePage + 1 < maxMobilePages) {
+    startMobilePage = Math.max(1, endMobilePage - maxMobilePages + 1);
+  }
+  const mobilePages: number[] = [];
+  for (let i = startMobilePage; i <= endMobilePage; i++) {
+    mobilePages.push(i);
   }
 
+  const baseBtnClass =
+    "relative inline-flex items-center justify-center min-w-8 h-8 sm:min-w-9 sm:h-9 px-1.5 sm:px-2 text-xs sm:text-sm font-medium transition-all duration-200 rounded-full bg-base-100 hover:bg-base-200 text-base-content/70 hover:text-base-content focus:z-10 focus:outline-none focus:ring-2 focus:ring-primary/50 shadow-sm";
+  const activeBtnClass =
+    "relative inline-flex items-center justify-center min-w-8 h-8 sm:min-w-9 sm:h-9 px-1.5 sm:px-2 text-xs sm:text-sm font-bold transition-all duration-200 rounded-full border border-primary bg-primary text-primary-content z-10 focus:outline-none focus:ring-2 focus:ring-primary/50 shadow-sm shadow-primary/20";
+  const disabledBtnClass =
+    "relative inline-flex items-center justify-center min-w-8 h-8 sm:min-w-9 sm:h-9 px-1.5 sm:px-2 text-xs sm:text-sm font-medium transition-all duration-200 rounded-full bg-base-100 text-base-content/30 cursor-not-allowed shadow-sm";
+  const ellipsisClass =
+    "relative inline-flex items-center justify-center min-w-8 h-8 sm:min-w-9 sm:h-9 px-1 sm:px-2 text-xs sm:text-sm font-medium text-base-content/40 cursor-default";
+
   return (
-    <div className="flex items-center justify-center gap-2 mt-10 p-2 rounded-2xl bg-base-100/50 backdrop-blur-sm border border-base-200/50 w-fit mx-auto shadow-sm">
-      <button
-        onClick={() => onPageChange(currentPage - 1)}
-        disabled={currentPage === 1}
-        className="flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-200 text-base-content/70 hover:bg-base-content/10 hover:text-base-content disabled:opacity-30 disabled:hover:bg-transparent"
-        aria-label="Previous Page"
-      >
-        <ChevronLeft className="w-5 h-5" />
-      </button>
-
-      {startPage > 1 && (
-        <>
+    <>
+      {/* Mobile / Small Screen: 3 page circles + ellipses + boundary pages */}
+      <div className="flex sm:hidden items-center justify-center gap-1">
+        <button
+          onClick={() => onPageChange(currentPage - 1)}
+          disabled={currentPage === 1}
+          className={currentPage === 1 ? disabledBtnClass : baseBtnClass}
+          aria-label="Previous Page"
+        >
+          <ChevronLeft className="w-4 h-4" />
+        </button>
+
+        {startMobilePage > 1 && (
+          <>
+            <button
+              onClick={() => onPageChange(1)}
+              className={baseBtnClass}
+            >
+              1
+            </button>
+            {startMobilePage > 2 && (
+              <span className={ellipsisClass}>...</span>
+            )}
+          </>
+        )}
+
+        {mobilePages.map((page) => (
           <button
-            onClick={() => onPageChange(1)}
-            className="flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-200 font-medium text-base-content/70 hover:bg-base-content/10 hover:text-base-content"
+            key={`mobile-${page}`}
+            onClick={() => onPageChange(page)}
+            className={currentPage === page ? activeBtnClass : baseBtnClass}
           >
-            1
+            {page}
           </button>
-          {startPage > 2 && <span className="px-1 text-base-content/40">...</span>}
-        </>
-      )}
+        ))}
 
-      {pages.map((page) => (
+        {endMobilePage < totalPages && (
+          <>
+            {endMobilePage < totalPages - 1 && (
+              <span className={ellipsisClass}>...</span>
+            )}
+            <button
+              onClick={() => onPageChange(totalPages)}
+              className={baseBtnClass}
+            >
+              {totalPages}
+            </button>
+          </>
+        )}
+
+        <button
+          onClick={() => onPageChange(currentPage + 1)}
+          disabled={currentPage === totalPages}
+          className={currentPage === totalPages ? disabledBtnClass : baseBtnClass}
+          aria-label="Next Page"
+        >
+          <ChevronRight className="w-4 h-4" />
+        </button>
+      </div>
+
+      {/* Desktop Screen: 5 page circles + ellipses + boundary pages */}
+      <div className="hidden sm:flex items-center justify-center gap-1.5">
         <button
-          key={page}
-          onClick={() => onPageChange(page)}
-          className={`flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-300 font-semibold ${
-            currentPage === page
-              ? "bg-primary text-primary-content shadow-lg shadow-primary/30 scale-105"
-              : "text-base-content/70 hover:bg-base-content/10 hover:text-base-content"
-          }`}
+          onClick={() => onPageChange(currentPage - 1)}
+          disabled={currentPage === 1}
+          className={currentPage === 1 ? disabledBtnClass : baseBtnClass}
+          aria-label="Previous Page"
         >
-          {page}
+          <ChevronLeft className="w-4 h-4" />
         </button>
-      ))}
 
-      {endPage < totalPages && (
-        <>
-          {endPage < totalPages - 1 && (
-            <span className="px-1 text-base-content/40">...</span>
-          )}
+        {startDesktopPage > 1 && (
+          <>
+            <button
+              onClick={() => onPageChange(1)}
+              className={baseBtnClass}
+            >
+              1
+            </button>
+            {startDesktopPage > 2 && (
+              <span className={ellipsisClass}>...</span>
+            )}
+          </>
+        )}
+
+        {desktopPages.map((page) => (
           <button
-            onClick={() => onPageChange(totalPages)}
-            className="flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-200 font-medium text-base-content/70 hover:bg-base-content/10 hover:text-base-content"
+            key={`desktop-${page}`}
+            onClick={() => onPageChange(page)}
+            className={currentPage === page ? activeBtnClass : baseBtnClass}
           >
-            {totalPages}
+            {page}
           </button>
-        </>
-      )}
-
-      <button
-        onClick={() => onPageChange(currentPage + 1)}
-        disabled={currentPage === totalPages}
-        className="flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-200 text-base-content/70 hover:bg-base-content/10 hover:text-base-content disabled:opacity-30 disabled:hover:bg-transparent"
-        aria-label="Next Page"
-      >
-        <ChevronRight className="w-5 h-5" />
-      </button>
-    </div>
+        ))}
+
+        {endDesktopPage < totalPages && (
+          <>
+            {endDesktopPage < totalPages - 1 && (
+              <span className={ellipsisClass}>...</span>
+            )}
+            <button
+              onClick={() => onPageChange(totalPages)}
+              className={baseBtnClass}
+            >
+              {totalPages}
+            </button>
+          </>
+        )}
+
+        <button
+          onClick={() => onPageChange(currentPage + 1)}
+          disabled={currentPage === totalPages}
+          className={currentPage === totalPages ? disabledBtnClass : baseBtnClass}
+          aria-label="Next Page"
+        >
+          <ChevronRight className="w-4 h-4" />
+        </button>
+      </div>
+    </>
   );
 };
+
+export default Pagination;