@imksh/create 1.0.27 → 1.0.30

package/templates/{mern/client → layers/react/javascript}/src/components/ui/Header.jsx

@@ -10,11 +10,11 @@ import { motion, AnimatePresence } from "framer-motion";
 import { navigation } from "../../config/navigation";
 
 const Header = () => {
-  const { 
-    theme, 
-    toggleTheme, 
-    isMobileMenuOpened: isMobileMenuOpen, 
-    setMobileMenuOpened: setIsMobilemenuOpen 
+  const {
+    theme,
+    toggleTheme,
+    isMobileMenuOpened: isMobileMenuOpen,
+    setMobileMenuOpened: setIsMobilemenuOpen,
   } = useUiStore();
   const { user } = useAuthStore();
   const navigate = useNavigate();
@@ -68,11 +68,13 @@ const Header = () => {
           {/* Center: Dynamic Navigation */}
           <nav className="hidden lg:flex items-center gap-6 text-sm font-medium absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
             {navigation.map((item) => (
-              <Link 
+              <Link
                 key={item.path}
-                to={item.path} 
+                to={item.path}
                 className={`hover:text-primary transition-colors ${
-                  location === item.path ? "text-white font-bold" : "text-white/80"
+                  location === item.path
+                    ? "text-white font-bold"
+                    : "text-white/80"
                 }`}
               >
                 {item.title}
@@ -145,7 +147,9 @@ const Header = () => {
                     to={item.path}
                     onClick={() => setIsMobilemenuOpen(false)}
                     className={`block px-4 py-3 rounded-xl hover:bg-white/10 transition-colors font-semibold ${
-                      location === item.path ? "bg-white/15 text-white" : "text-white/80"
+                      location === item.path
+                        ? "bg-white/15 text-white"
+                        : "text-white/80"
                     }`}
                   >
                     {item.title}
@@ -203,8 +207,12 @@ const Header = () => {
                         alt="avatar"
                       />
                       <div className="text-left">
-                        <div className="font-bold text-sm text-white">{user.name}</div>
-                        <div className="text-xs text-white/70 truncate max-w-[180px]">{user.email}</div>
+                        <div className="font-bold text-sm text-white">
+                          {user.name}
+                        </div>
+                        <div className="text-xs text-white/70 truncate max-w-[180px]">
+                          {user.email}
+                        </div>
                       </div>
                     </div>
                     <button

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

@@ -0,0 +1,36 @@
+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,
+      }),
+    ],
+  });
+};
+var SidebarHeader_default = SidebarHeader;
+export { SidebarHeader_default as default };

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

@@ -0,0 +1,169 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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 appConfig from "../../config/appConfig";
+import { motion, AnimatePresence } from "framer-motion";
+import useWindowSize from "../../hooks/useWindowSize";
+const Sidebar = () => {
+  const { open, close, collapsed, toggleCollapsed } = useUiStore();
+  const { theme, toggleTheme } = useUiStore();
+  const { width } = useWindowSize();
+  const isMobile = width < 1024;
+  const showSidebar = !isMobile || open;
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx(AnimatePresence, {
+        children:
+          isMobile &&
+          open &&
+          /* @__PURE__ */ jsx(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,
+          }),
+      }),
+      /* @__PURE__ */ jsx(AnimatePresence, {
+        children:
+          showSidebar &&
+          /* @__PURE__ */ jsxs(motion.aside, {
+            initial: isMobile ? { x: "-100%" } : false,
+            animate: { x: 0 },
+            exit: isMobile ? { x: "-100%" } : void 0,
+            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-20" : "w-[75%] md:w-[16%] md:max-w-60"}
+            `,
+            children: [
+              /* @__PURE__ */ jsxs("div", {
+                className:
+                  "h-16 border-b border-base-300 flex items-center justify-between px-5",
+                children: [
+                  /* @__PURE__ */ jsxs("div", {
+                    className: "flex items-center gap-3",
+                    children: [
+                      appConfig.app.logo
+                        ? /* @__PURE__ */ jsx("img", {
+                            src: appConfig.app.logo,
+                            alt: "",
+                            className: "w-8 h-8 rounded-lg",
+                          })
+                        : /* @__PURE__ */ jsx("div", {
+                            className: "flex items-center",
+                            children: /* @__PURE__ */ jsx("div", {
+                              className:
+                                "bg-primary w-8 h-8 rounded-lg flex items-center justify-center text-primary-content font-bold",
+                              children: appConfig.app.name.charAt(0),
+                            }),
+                          }),
+                      /* @__PURE__ */ jsx("h1", {
+                        className: `text-xl font-black text-primary whitespace-nowrap overflow-hidden ${collapsed ? "hidden" : ""}`,
+                        children: appConfig.app.name,
+                      }),
+                    ],
+                  }),
+                  /* @__PURE__ */ jsx("button", {
+                    className: `btn btn-sm btn-circle btn-ghost md:hidden ${collapsed ? "hidden" : ""}`,
+                    onClick: close,
+                    children: /* @__PURE__ */ jsx(IoClose, { size: 20 }),
+                  }),
+                ],
+              }),
+              /* @__PURE__ */ jsx("nav", {
+                className: "flex-1 overflow-y-auto p-2.5 space-y-1",
+                "data-lenis-prevent": true,
+                children: navigation.map((item) => {
+                  const Icon = item.icon;
+                  return /* @__PURE__ */ jsxs(
+                    NavLink,
+                    {
+                      to: item.path,
+                      onClick: isMobile ? close : void 0,
+                      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 : "",
+                      children: [
+                        /* @__PURE__ */ jsx(Icon, {
+                          size: 18,
+                          className: `shrink-0 ${collapsed && "mr-auto"}`,
+                        }),
+                        !collapsed &&
+                          /* @__PURE__ */ jsx("span", {
+                            className:
+                              "font-medium transition-all duration-0 whitespace-nowrap",
+                            children: item.title,
+                          }),
+                      ],
+                    },
+                    item.path,
+                  );
+                }),
+              }),
+              /* @__PURE__ */ jsxs("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",
+                children: [
+                  !collapsed &&
+                    /* @__PURE__ */ jsx("span", {
+                      children: theme === "dark" ? "Dark" : "Light",
+                    }),
+                  /* @__PURE__ */ jsx("span", {
+                    className: "btn btn-xs btn-ghost btn-circle ",
+                    children:
+                      theme === "dark"
+                        ? /* @__PURE__ */ jsx(Sun, {
+                            size: 16,
+                            className: "shrink-0 ",
+                          })
+                        : /* @__PURE__ */ jsx(Moon, {
+                            size: 16,
+                            className: "shrink-0",
+                          }),
+                  }),
+                ],
+              }),
+              /* @__PURE__ */ jsx("div", {
+                className:
+                  "p-3 border-t border-base-300/50 shrink-0 flex flex-col gap-2",
+                children: /* @__PURE__ */ jsxs("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",
+                  children: [
+                    collapsed
+                      ? /* @__PURE__ */ jsx(ChevronRight, {
+                          size: 18,
+                          className: "shrink-0 mr-auto",
+                        })
+                      : /* @__PURE__ */ jsx(ChevronLeft, {
+                          size: 18,
+                          className: "shrink-0",
+                        }),
+                    !collapsed &&
+                      /* @__PURE__ */ jsx("span", {
+                        className: "truncate",
+                        children: "Collapse",
+                      }),
+                  ],
+                }),
+              }),
+            ],
+          }),
+      }),
+    ],
+  });
+};
+var sidebar_default = Sidebar;
+export { sidebar_default as default };

package/templates/{mern/client → layers/react/javascript}/src/config/api.js

@@ -18,5 +18,5 @@ api.interceptors.request.use(
   },
   (error) => {
     return Promise.reject(error);
-  }
+  },
 );

package/templates/{react → layers/react/javascript}/src/config/appConfig.js

@@ -41,4 +41,4 @@ const appConfig = {
   },
 };
 
-export default appConfig;
+export default appConfig;

package/templates/{react → layers/react/javascript}/src/hooks/useLenis.js

@@ -25,4 +25,4 @@ const useLenis = () => {
   }, []);
 };
 
-export default useLenis;
+export default useLenis;

package/templates/{react → layers/react/javascript}/src/hooks/usePwaInstall.js

@@ -25,7 +25,10 @@ const usePwaInstall = () => {
     }
 
     return () => {
-      window.removeEventListener("beforeinstallprompt", handleBeforeInstallPrompt);
+      window.removeEventListener(
+        "beforeinstallprompt",
+        handleBeforeInstallPrompt,
+      );
       window.removeEventListener("appinstalled", handleAppInstalled);
     };
   }, []);

package/templates/{next → layers/react/javascript}/src/hooks/useWindowSize.js

@@ -6,7 +6,6 @@ const useWindowSize = () => {
     height: window.innerHeight,
   });
 
-
   useEffect(() => {
     const handleResize = () => {
       setSize({
@@ -22,4 +21,4 @@ const useWindowSize = () => {
   return size;
 };
 
-export default useWindowSize;
+export default useWindowSize;

package/templates/{react → layers/react/javascript}/src/pages/Home.jsx

@@ -131,7 +131,7 @@ const Home = () => {
         </motion.button>
         <motion.button
           whileTap={{ scale: 0.95 }}
-          onClick={()=>toast.success("Hello World")}
+          onClick={() => toast.success("Hello World")}
           className="btn btn-outline rounded-xl px-6 py-2.5 font-semibold text-sm gap-2  flex items-center transition-all text-white border-white"
         >
           Show Toast

package/templates/{react → layers/react/javascript}/src/pages/Login.jsx

@@ -14,11 +14,17 @@ import Loading from "../components/common/Loading";
 
 const Login = () => {
   const navigate = useNavigate();
-  const { login, signup, sendOtp, loading, isCheckingAuth, error, user } = useAuthStore();
+  const { login, signup, sendOtp, loading, isCheckingAuth, error, user } =
+    useAuthStore();
 
   const [mode, setMode] = useState("login"); // "login" | "signup"
   const [showPassword, setShowPassword] = useState(false);
-  const [form, setForm] = useState({ name: "", email: "", password: "", otp: "" });
+  const [form, setForm] = useState({
+    name: "",
+    email: "",
+    password: "",
+    otp: "",
+  });
   const [otpSent, setOtpSent] = useState(false);
 
   const handleChange = (e) =>

package/templates/layers/react/javascript/src/pages/Profile.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Profile = () => {
+  return <div>Profile</div>;
+};
+
+export default Profile;

package/templates/{react → layers/react/javascript}/src/services/authService.js

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

package/templates/{next → layers/react/javascript}/src/store/useAuthStore.js

@@ -26,7 +26,13 @@ export const useAuthStore = create((set, get) => ({
   signup: async (name, email, password, otp, role = "user") => {
     set({ loading: true, error: null });
     try {
-      const { data } = await authService.signup(name, email, password, otp, role);
+      const { data } = await authService.signup(
+        name,
+        email,
+        password,
+        otp,
+        role,
+      );
       if (data.token) {
         localStorage.setItem("token", data.token);
       }

package/templates/{mern/client → layers/react/javascript}/src/store/useUiStore.js

@@ -1,54 +1,51 @@
 import { create } from "zustand";
-
-export const useUiStore = create((set, get) => ({
+const useUiStore = create((set, get) => ({
   open: false,
+  isModalOpen: false,
   collapsed: false,
   isMobileMenuOpened: false,
   headerTitle: "Dashboard",
   headerActions: null,
+  breadcrumbs: null,
+  layoutClass: "",
+  setLayoutClass: (layoutClass) => set({ layoutClass }),
   setHeaderTitle: (title) => set({ headerTitle: title }),
   setHeaderActions: (actions) => set({ headerActions: actions }),
+  setBreadcrumbs: (breadcrumbs) => set({ breadcrumbs }),
   toggleCollapsed: () => set((state) => ({ collapsed: !state.collapsed })),
-
   setMobileMenuOpened: (open) => {
     set({ isMobileMenuOpened: open });
   },
   toggleMobileMenuOpened: () => {
     set((state) => ({ isMobileMenuOpened: !state.isMobileMenuOpened }));
   },
-
   theme: localStorage.getItem("theme") || "light",
-
   setTheme: (theme) => {
     document.documentElement.setAttribute("data-theme", theme);
-
     localStorage.setItem("theme", theme);
-
     set({ theme });
   },
-
   toggleTheme: () => {
     const nextTheme = get().theme === "light" ? "dark" : "light";
-
     document.documentElement.setAttribute("data-theme", nextTheme);
-
     localStorage.setItem("theme", nextTheme);
-
     set({ theme: nextTheme });
   },
-
   toggleSidebar: () =>
     set((state) => ({
       open: !state.open,
     })),
-
   openSidebar: () =>
     set({
       open: true,
     }),
-
   close: () =>
     set({
       open: false,
     }),
+  setModalOpen: (open) =>
+    set({
+      isModalOpen: open,
+    }),
 }));
+export { useUiStore };

package/templates/{next → layers/react/javascript}/src/utils/getInitials.js

@@ -7,4 +7,4 @@ export const getInitials = (name = "") => {
     .slice(0, 2)
     .map((word) => word[0].toUpperCase())
     .join("");
-};
+};

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

@@ -0,0 +1,49 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { ChevronRight } from "lucide-react";
+
+export interface BreadcrumbItem {
+  label: React.ReactNode;
+  path?: string;
+  subtitle?: string;
+  onClick?: () => void;
+}
+
+interface BreadcrumbsProps {
+  items: BreadcrumbItem[];
+}
+
+export const Breadcrumbs = ({ items }: BreadcrumbsProps) => {
+  return (
+    <div className="flex items-center gap-1.5 text-sm font-bold text-base-content/50 flex-wrap">
+      {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">
+                {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">
+                {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" : ""}>
+                  {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" />}
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+};

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

@@ -0,0 +1,68 @@
+import React from "react";
+
+export const CircularProgress = ({
+  value,
+  label,
+  color = "text-primary",
+  size = "lg",
+}: {
+  value: number;
+  label?: string;
+  color?: string;
+  size?: "md" | "lg" | "xl";
+}) => {
+  const radius = size === "xl" ? 60 : size === "lg" ? 40 : 24;
+  const stroke = size === "xl" ? 10 : size === "lg" ? 6 : 4;
+  const normalizedRadius = radius - stroke * 2;
+  const circumference = normalizedRadius * 2 * Math.PI;
+  const strokeDashoffset = circumference - (value / 100) * circumference;
+
+  const dims = size === "xl" ? 140 : size === "lg" ? 96 : 56;
+  const textClass =
+    size === "xl" ? "text-2xl" : size === "lg" ? "text-md" : "text-[10px]";
+
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <div
+        className="relative flex items-center justify-center"
+        style={{ width: dims, height: dims }}
+      >
+        {/* Background circle */}
+        <svg
+          height={dims}
+          width={dims}
+          className="absolute transform -rotate-90"
+        >
+          <circle
+            stroke="currentColor"
+            fill="transparent"
+            strokeWidth={stroke}
+            r={normalizedRadius}
+            cx={dims / 2}
+            cy={dims / 2}
+            className="text-base-200"
+          />
+          {/* Progress circle */}
+          <circle
+            stroke="currentColor"
+            fill="transparent"
+            strokeWidth={stroke}
+            strokeDasharray={circumference + " " + circumference}
+            style={{ strokeDashoffset }}
+            strokeLinecap="round"
+            r={normalizedRadius}
+            cx={dims / 2}
+            cy={dims / 2}
+            className={`${color} transition-all duration-1000 ease-out`}
+          />
+        </svg>
+        <span className={`font-bold ${textClass}`}>{value}%</span>
+      </div>
+      {label && (
+        <span className="mt-2 text-sm font-medium text-base-content/70">
+          {label}
+        </span>
+      )}
+    </div>
+  );
+};