@imksh/create 1.0.27 → 1.0.30

package/templates/layers/react/javascript/src/components/common/Table.jsx

@@ -0,0 +1,143 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import TableSkeleton from "../skeletons/common/TableSkeleton";
+const Table = ({
+  columns = [],
+  data = [],
+  loading = false,
+  onRowClick = null,
+  emptyMessage = "No data available",
+  currentPage = 1,
+  totalPages = 1,
+  onPageChange = null,
+}) => {
+  if (loading) {
+    return /* @__PURE__ */ jsx(TableSkeleton, {
+      rows: 5,
+      columns: columns.length || 4,
+    });
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    className:
+      "flex flex-col w-full border border-base-300 rounded-xl overflow-hidden bg-base-100 shadow",
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: "overflow-x-auto w-full",
+        children: /* @__PURE__ */ jsxs("table", {
+          className: "table table-hover w-full min-w-full",
+          children: [
+            /* @__PURE__ */ jsx("thead", {
+              className: "bg-base-200/60 border-b border-base-300",
+              children: /* @__PURE__ */ jsx("tr", {
+                children: columns.map((col, index) =>
+                  /* @__PURE__ */ jsx(
+                    "th",
+                    {
+                      className:
+                        "px-6 py-4 text-left text-xs font-bold text-base-content/80 uppercase tracking-wider",
+                      children: col.header,
+                    },
+                    col.accessor || index,
+                  ),
+                ),
+              }),
+            }),
+            /* @__PURE__ */ jsx("tbody", {
+              className: "divide-y divide-base-300 bg-base-100",
+              children:
+                data.length > 0
+                  ? data.map((row, rowIndex) =>
+                      /* @__PURE__ */ jsx(
+                        "tr",
+                        {
+                          onClick: () => onRowClick && onRowClick(row),
+                          className: `transition-colors duration-150 ${onRowClick ? "cursor-pointer hover:bg-base-200" : ""}`,
+                          children: columns.map((col, colIndex) => {
+                            const value = col.accessor
+                              ? row[col.accessor]
+                              : void 0;
+                            return /* @__PURE__ */ jsx(
+                              "td",
+                              {
+                                className:
+                                  "px-6 py-4 text-sm text-base-content/90 whitespace-nowrap align-middle",
+                                children: col.render
+                                  ? col.render(value, row, rowIndex)
+                                  : value,
+                              },
+                              col.accessor || colIndex,
+                            );
+                          }),
+                        },
+                        row.id || rowIndex,
+                      ),
+                    )
+                  : /* @__PURE__ */ jsx("tr", {
+                      children: /* @__PURE__ */ jsx("td", {
+                        colSpan: columns.length,
+                        className:
+                          "px-6 py-12 text-center text-sm text-base-content/60",
+                        children: /* @__PURE__ */ jsxs("div", {
+                          className:
+                            "flex flex-col items-center justify-center gap-2",
+                          children: [
+                            /* @__PURE__ */ jsx("span", {
+                              className: "text-2xl",
+                              children: "\u{1F4C1}",
+                            }),
+                            /* @__PURE__ */ jsx("span", {
+                              children: emptyMessage,
+                            }),
+                          ],
+                        }),
+                      }),
+                    }),
+            }),
+          ],
+        }),
+      }),
+      totalPages > 1 &&
+        onPageChange &&
+        /* @__PURE__ */ jsxs("div", {
+          className:
+            "border-t border-base-300 px-6 py-4 bg-base-200/30 flex items-center justify-between shrink-0",
+          children: [
+            /* @__PURE__ */ jsxs("div", {
+              className: "text-xs text-base-content/75 font-medium",
+              children: [
+                "Page ",
+                /* @__PURE__ */ jsx("span", {
+                  className: "font-bold",
+                  children: currentPage,
+                }),
+                " of",
+                " ",
+                /* @__PURE__ */ jsx("span", {
+                  className: "font-bold",
+                  children: totalPages,
+                }),
+              ],
+            }),
+            /* @__PURE__ */ jsxs("div", {
+              className: "flex gap-2",
+              children: [
+                /* @__PURE__ */ jsx("button", {
+                  onClick: () => onPageChange(currentPage - 1),
+                  disabled: currentPage <= 1,
+                  className: "btn btn-sm btn-outline rounded-lg text-xs",
+                  children: "Previous",
+                }),
+                /* @__PURE__ */ jsx("button", {
+                  onClick: () => onPageChange(currentPage + 1),
+                  disabled: currentPage >= totalPages,
+                  className: "btn btn-sm btn-outline rounded-lg text-xs",
+                  children: "Next",
+                }),
+              ],
+            }),
+          ],
+        }),
+    ],
+  });
+};
+var Table_default = Table;
+export { Table_default as default };

package/templates/layers/react/javascript/src/components/common/Tabs.jsx

@@ -0,0 +1,134 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { ChevronDown } from "lucide-react";
+import { motion } from "framer-motion";
+const Tabs = ({
+  tabs,
+  activeTab,
+  onChange,
+  variant = "underline",
+  className = "",
+  dropdown = false,
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  React.useEffect(() => {
+    if (!dropdown || !isOpen) return;
+    const closeMenu = () => setIsOpen(false);
+    document.addEventListener("click", closeMenu);
+    return () => document.removeEventListener("click", closeMenu);
+  }, [dropdown, isOpen]);
+  const renderDropdown = () => {
+    if (!dropdown) return null;
+    const activeItem = tabs.find((t) => t.id === activeTab);
+    return /* @__PURE__ */ jsxs("div", {
+      className: "relative md:hidden w-full max-w-xs z-[50]",
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsxs("button", {
+          onClick: () => setIsOpen(!isOpen),
+          className:
+            "btn btn-sm bg-base-200 border-base-300 border flex w-full items-center justify-between px-3 text-base-content ",
+          children: [
+            /* @__PURE__ */ jsxs("div", {
+              className: "flex items-center gap-1.5",
+              children: [
+                activeItem?.icon,
+                /* @__PURE__ */ jsx("span", {
+                  className: "font-semibold",
+                  children: activeItem?.label,
+                }),
+              ],
+            }),
+            /* @__PURE__ */ jsx(ChevronDown, {
+              size: 14,
+              className: `opacity-50 transition-transform ${isOpen ? "rotate-180" : ""}`,
+            }),
+          ],
+        }),
+        isOpen &&
+          /* @__PURE__ */ jsx("div", {
+            className:
+              "absolute top-full left-0 right-0 mt-1 bg-base-100 border border-base-200 shadow rounded-lg py-1 animate-in fade-in slide-in-from-top-2",
+            children: tabs.map((tab) =>
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => {
+                    onChange(tab.id);
+                    setIsOpen(false);
+                  },
+                  className: `w-full flex items-center gap-2 px-3 py-2 text-sm transition-colors ${activeTab === tab.id ? "bg-primary/10 text-primary font-semibold" : "hover:bg-base-200 text-base-content/80"}`,
+                  children: [tab.icon, tab.label],
+                },
+                tab.id,
+              ),
+            ),
+          }),
+      ],
+    });
+  };
+  if (variant === "box") {
+    return /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        renderDropdown(),
+        /* @__PURE__ */ jsx("div", {
+          className: `tabs tabs-boxed bg-base-200 p-1 flex-nowrap overflow-x-auto hide-scrollbar shrink-0 rounded-lg ${dropdown ? "hidden md:flex" : "flex"} ${className}`,
+          children: tabs.map((tab) =>
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => onChange(tab.id),
+                className: `tab whitespace-nowrap flex items-center rounded-lg gap-2 relative z-0 ${activeTab === tab.id ? "text-primary-content" : "text-base-content/70 hover:text-base-content"}`,
+                children: [
+                  activeTab === tab.id &&
+                    /* @__PURE__ */ jsx(motion.div, {
+                      layoutId: "activeTabBox",
+                      className: "absolute inset-0 bg-primary rounded-lg -z-10",
+                      transition: { type: "spring", duration: 0, bounce: 0.2 },
+                    }),
+                  tab.icon,
+                  tab.label,
+                ],
+              },
+              tab.id,
+            ),
+          ),
+        }),
+      ],
+    });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      renderDropdown(),
+      /* @__PURE__ */ jsx("div", {
+        className: `tabs tabs-bordered ${dropdown ? "hidden md:flex" : "flex"} ${className}`,
+        children: tabs.map((tab) =>
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => onChange(tab.id),
+              className: `tab whitespace-nowrap relative !border-transparent ${activeTab === tab.id ? "font-semibold text-primary" : "text-base-content/70 hover:text-base-content"}`,
+              children: [
+                activeTab === tab.id &&
+                  /* @__PURE__ */ jsx(motion.div, {
+                    layoutId: "activeTabUnderline",
+                    className:
+                      "absolute bottom-0 left-0 right-0 h-0.5 bg-primary",
+                    transition: { type: "spring", duration: 0.5, bounce: 0.2 },
+                  }),
+                tab.icon &&
+                  /* @__PURE__ */ jsx("span", {
+                    className: "mr-2",
+                    children: tab.icon,
+                  }),
+                tab.label,
+              ],
+            },
+            tab.id,
+          ),
+        ),
+      }),
+    ],
+  });
+};
+export { Tabs };

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

@@ -0,0 +1,119 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertCircle, Trash2, Info } from "lucide-react";
+import Modal from "../Modal";
+const ConfirmModal = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  type = "danger",
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  isLoading = false,
+}) => {
+  const getTypeStyles = () => {
+    switch (type) {
+      case "danger":
+        return {
+          icon: /* @__PURE__ */ jsx(Trash2, {
+            size: 24,
+            className: "text-error relative z-10",
+          }),
+          iconBg: "bg-error/10 border-error/20",
+          iconGlow: "bg-error/20",
+          btn: "bg-gradient-to-r from-error to-error/80 hover:from-error/90 hover:to-error text-error-content border-none shadow-[0_4px_12px_rgba(239,68,68,0.25)] hover:shadow-[0_6px_16px_rgba(239,68,68,0.4)] hover:-translate-y-0.5 transition-all duration-300",
+          border: "border-error/20",
+        };
+      case "warning":
+        return {
+          icon: /* @__PURE__ */ jsx(AlertCircle, {
+            size: 24,
+            className: "text-warning relative z-10",
+          }),
+          iconBg: "bg-warning/10 border-warning/20",
+          iconGlow: "bg-warning/20",
+          btn: "bg-gradient-to-r from-warning to-warning/80 hover:from-warning/90 hover:to-warning text-warning-content border-none shadow-[0_4px_12px_rgba(245,158,11,0.25)] hover:shadow-[0_6px_16px_rgba(245,158,11,0.4)] hover:-translate-y-0.5 transition-all duration-300",
+          border: "border-warning/20",
+        };
+      default:
+        return {
+          icon: /* @__PURE__ */ jsx(Info, {
+            size: 24,
+            className: "text-info relative z-10",
+          }),
+          iconBg: "bg-info/10 border-info/20",
+          iconGlow: "bg-info/20",
+          btn: "bg-gradient-to-r from-info to-info/80 hover:from-info/90 hover:to-info text-info-content border-none shadow-[0_4px_12px_rgba(14,165,233,0.25)] hover:shadow-[0_6px_16px_rgba(14,165,233,0.4)] hover:-translate-y-0.5 transition-all duration-300",
+          border: "border-info/20",
+        };
+    }
+  };
+  const styles = getTypeStyles();
+  return /* @__PURE__ */ jsxs(Modal, {
+    open: isOpen,
+    onClose,
+    hideHeader: true,
+    size: "sm",
+    className: `p-8 !max-w-md ${styles.border}`,
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: `absolute top-0 left-0 w-full h-1 ${styles.btn.split(" ")[0]} ${styles.btn.split(" ")[1]}`,
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "flex flex-col items-center text-center",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            className: "relative mb-5",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                className: `absolute inset-0 rounded-full blur-xl animate-pulse-glow ${styles.iconGlow}`,
+              }),
+              /* @__PURE__ */ jsx("div", {
+                className: `relative w-14 h-14 rounded-full flex items-center justify-center border ${styles.iconBg} shadow-inner`,
+                children: styles.icon,
+              }),
+            ],
+          }),
+          /* @__PURE__ */ jsx("h3", {
+            className:
+              "font-bold text-2xl mb-3 text-base-content tracking-tight",
+            children: title,
+          }),
+          /* @__PURE__ */ jsx("div", {
+            className: "text-base-content/70 mb-8 leading-relaxed text-sm px-2",
+            children: message,
+          }),
+        ],
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "flex items-center justify-center gap-4 w-full",
+        children: [
+          /* @__PURE__ */ jsx("button", {
+            type: "button",
+            className:
+              "btn btn-ghost rounded-xl px-6 flex-1 hover:-translate-y-0.5 transition-all duration-300",
+            onClick: () => {
+              if (!isLoading) onClose();
+            },
+            disabled: isLoading,
+            children: cancelText,
+          }),
+          /* @__PURE__ */ jsx("button", {
+            type: "button",
+            className: `btn rounded-xl px-6 flex-1 ${styles.btn}`,
+            onClick: onConfirm,
+            disabled: isLoading,
+            children: isLoading
+              ? /* @__PURE__ */ jsx("span", {
+                  className: "loading loading-spinner loading-sm",
+                })
+              : confirmText,
+          }),
+        ],
+      }),
+    ],
+  });
+};
+var ConfirmModal_default = ConfirmModal;
+export { ConfirmModal_default as default };

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;