@imksh/create 1.0.26 → 1.0.28

package/templates/layers/react/javascript/src/components/common/modals/DocViewerModal.jsx

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { useResumeStore } from "../../store/useResumeStore";
+import Modal from "../Modal";
+const DocViewerModal = ({ isOpen, onClose, documentUrl }) => {
+  const { analysisResult } = useResumeStore();
+  const finalUrl = documentUrl || analysisResult?.documentUrl;
+  const textContent = analysisResult?.resumeText;
+  if (!isOpen || (!finalUrl && !textContent)) return null;
+  return /* @__PURE__ */ jsx(Modal, {
+    open: isOpen,
+    onClose,
+    title: "Document Viewer",
+    size: "2xl",
+    children: /* @__PURE__ */ jsx("div", {
+      className: "h-[75vh] w-full",
+      children: finalUrl
+        ? /* @__PURE__ */ jsx("iframe", {
+            src: finalUrl,
+            className:
+              "w-full h-full rounded-lg border border-base-300 bg-base-100",
+            title: "Resume Document",
+          })
+        : /* @__PURE__ */ jsx("div", {
+            className:
+              "bg-base-100 p-6 rounded-lg border border-base-300 whitespace-pre-wrap font-mono text-sm shadow-inner h-full overflow-y-auto",
+            children: textContent,
+          }),
+    }),
+  });
+};
+export { DocViewerModal };

package/templates/{next → layers/react/javascript}/src/components/modals/ConfirmModal.jsx

@@ -79,9 +79,7 @@ const ConfirmModal = ({
 
       <div className="relative w-full max-w-md mx-4 rounded-2xl bg-base-100 shadow-2xl animate-in fade-in zoom-in duration-200">
         <div className="p-6">
-
           <div className="flex gap-4">
-
             <div
               className={`w-14 h-14 rounded-full flex items-center justify-center shrink-0 ${style.iconBg}`}
             >
@@ -89,21 +87,15 @@ const ConfirmModal = ({
             </div>
 
             <div className="flex-1">
-
-              <h2 className="text-xl font-bold">
-                {title}
-              </h2>
+              <h2 className="text-xl font-bold">{title}</h2>
 
               <p className="mt-2 text-sm text-base-content/70 leading-relaxed">
                 {message}
               </p>
-
             </div>
-
           </div>
 
           <div className="mt-8 flex justify-end gap-3">
-
             <button
               className="btn btn-ghost"
               disabled={loading}
@@ -123,7 +115,6 @@ const ConfirmModal = ({
 
               {confirmText}
             </button>
-
           </div>
         </div>
       </div>
@@ -132,4 +123,4 @@ const ConfirmModal = ({
   );
 };
 
-export default ConfirmModal;
+export default ConfirmModal;

package/templates/{next → layers/react/javascript}/src/components/modals/Modal.jsx

@@ -33,8 +33,7 @@ const Modal = ({
 
     document.addEventListener("keydown", handleKeyDown);
 
-    return () =>
-      document.removeEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
   }, [open, closeOnEsc, onClose]);
 
   if (!open) return null;
@@ -75,15 +74,11 @@ const Modal = ({
         </div>
 
         {/* Body */}
-        <div className="max-h-[70vh] overflow-y-auto p-6">
-          {children}
-        </div>
+        <div className="max-h-[70vh] overflow-y-auto p-6">{children}</div>
 
         {/* Footer */}
         {footer && (
-          <div className="border-t border-base-300 px-6 py-4">
-            {footer}
-          </div>
+          <div className="border-t border-base-300 px-6 py-4">{footer}</div>
         )}
       </div>
     </div>,
@@ -91,4 +86,4 @@ const Modal = ({
   );
 };
 
-export default Modal;
+export default Modal;

package/templates/{next → layers/react/javascript}/src/components/skeletons/common/CardSkeleton.jsx

@@ -4,7 +4,6 @@ const CardSkeleton = () => {
   return (
     <div className="card bg-base-100 shadow border border-base-300">
       <div className="card-body space-y-4">
-
         <Skeleton className="h-40 w-full rounded-xl" />
 
         <Skeleton className="h-6 w-2/3" />
@@ -14,10 +13,9 @@ const CardSkeleton = () => {
         <Skeleton className="h-4 w-5/6" />
 
         <Skeleton className="h-10 w-28" />
-
       </div>
     </div>
   );
 };
 
-export default CardSkeleton;
+export default CardSkeleton;

package/templates/{next → layers/react/javascript}/src/components/skeletons/common/DashboardSkeleton.jsx

@@ -3,7 +3,6 @@ import CardSkeleton from "./CardSkeleton";
 const DashboardSkeleton = () => {
   return (
     <div className="space-y-8">
-
       <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
         {[...Array(4)].map((_, i) => (
           <CardSkeleton key={i} />
@@ -11,9 +10,8 @@ const DashboardSkeleton = () => {
       </div>
 
       <CardSkeleton />
-
     </div>
   );
 };
 
-export default DashboardSkeleton;
+export default DashboardSkeleton;

package/templates/{next → layers/react/javascript}/src/components/skeletons/common/ListSkeleton.jsx

@@ -4,10 +4,7 @@ const ListSkeleton = ({ items = 6 }) => {
   return (
     <div className="space-y-4">
       {Array.from({ length: items }).map((_, i) => (
-        <div
-          key={i}
-          className="flex items-center gap-4"
-        >
+        <div key={i} className="flex items-center gap-4">
           <Skeleton className="w-12 h-12 rounded-full" />
 
           <div className="flex-1 space-y-2">
@@ -21,4 +18,4 @@ const ListSkeleton = ({ items = 6 }) => {
   );
 };
 
-export default ListSkeleton;
+export default ListSkeleton;

package/templates/{next → layers/react/javascript}/src/components/skeletons/common/PageSkeleton.jsx

@@ -3,24 +3,17 @@ import Skeleton from "./Skeleton";
 const PageSkeleton = () => {
   return (
     <div className="space-y-8">
-
       <Skeleton className="h-10 w-56" />
 
       <Skeleton className="h-64 w-full rounded-2xl" />
 
       <div className="grid md:grid-cols-3 gap-6">
-
         {[1, 2, 3].map((i) => (
-          <Skeleton
-            key={i}
-            className="h-40 rounded-xl"
-          />
+          <Skeleton key={i} className="h-40 rounded-xl" />
         ))}
-
       </div>
-
     </div>
   );
 };
 
-export default PageSkeleton;
+export default PageSkeleton;

package/templates/{next → layers/react/javascript}/src/components/skeletons/common/ProfileSkeleton.jsx

@@ -3,21 +3,17 @@ import Skeleton from "./Skeleton";
 const ProfileSkeleton = () => {
   return (
     <div className="flex gap-6 items-center">
-
       <Skeleton className="w-24 h-24 rounded-full" />
 
       <div className="flex-1 space-y-3">
-
         <Skeleton className="h-6 w-48" />
 
         <Skeleton className="h-4 w-64" />
 
         <Skeleton className="h-10 w-32" />
-
       </div>
-
     </div>
   );
 };
 
-export default ProfileSkeleton;
+export default ProfileSkeleton;

package/templates/{next → layers/react/javascript}/src/components/skeletons/common/Skeleton.jsx

@@ -15,4 +15,4 @@ const Skeleton = ({
   );
 };
 
-export default Skeleton;
+export default Skeleton;

package/templates/{next → layers/react/javascript}/src/components/skeletons/common/TableSkeleton.jsx

@@ -30,4 +30,4 @@ const TableSkeleton = ({ rows = 6, columns = 5 }) => {
   );
 };
 
-export default TableSkeleton;
+export default TableSkeleton;

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);
       }