@imksh/create 1.0.27 → 1.0.30

package/templates/{production-fullstack/client/src/components/ui → layers/react/typescript/src/components/common}/Modal.tsx

@@ -1,16 +1,30 @@
 import { useEffect, ReactNode } from "react";
 import { createPortal } from "react-dom";
 import { IoClose } from "react-icons/io5";
+import { useUiStore } from "../../store/useUiStore";
 
 export interface ModalProps {
   open: boolean;
   onClose: () => void;
-  title: string;
+  title?: string;
   children: ReactNode;
-  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+  size?:
+    | "sm"
+    | "md"
+    | "lg"
+    | "xl"
+    | "2xl"
+    | "3xl"
+    | "4xl"
+    | "5xl"
+    | "6xl"
+    | "7xl"
+    | "full";
   closeOnBackdrop?: boolean;
   closeOnEsc?: boolean;
   showCloseButton?: boolean;
+  hideHeader?: boolean;
+  className?: string;
   footer?: ReactNode;
 }
 
@@ -32,12 +46,25 @@ const Modal = ({
   closeOnBackdrop = true,
   closeOnEsc = true,
   showCloseButton = true,
+  hideHeader = false,
+  className = "",
   footer,
 }: ModalProps) => {
+  const setModalOpen = useUiStore((state) => state.setModalOpen);
+
+  useEffect(() => {
+    if (open) {
+      setModalOpen(true);
+      return () => {
+        setModalOpen(false);
+      };
+    }
+  }, [open, setModalOpen]);
+
   useEffect(() => {
     if (!open || !closeOnEsc) return;
 
-    const handleKeyDown = (e) => {
+    const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === "Escape") {
         onClose?.();
       }
@@ -45,8 +72,9 @@ const Modal = ({
 
     document.addEventListener("keydown", handleKeyDown);
 
-    return () =>
+    return () => {
       document.removeEventListener("keydown", handleKeyDown);
+    };
   }, [open, closeOnEsc, onClose]);
 
   if (!open) return null;
@@ -63,6 +91,7 @@ const Modal = ({
       <div
         className={`
           relative
+          flex flex-col overflow-hidden max-h-[90vh]
           w-full
           ${sizes[size]}
           rounded-2xl
@@ -70,30 +99,36 @@ const Modal = ({
           shadow-2xl
           border border-base-300
           animate-in zoom-in-95 fade-in duration-200
+          ${className}
         `}
       >
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-base-300 px-6 py-4">
-          <h2 className="text-lg font-bold">{title}</h2>
+        {!hideHeader && (title || showCloseButton) && (
+          <div className="flex items-center justify-between border-b border-base-300 px-6 py-4 shrink-0">
+            {title && <h2 className="text-lg font-bold">{title}</h2>}
 
-          {showCloseButton && (
-            <button
-              className="btn btn-circle btn-sm btn-ghost"
-              onClick={onClose}
-            >
-              <IoClose size={20} />
-            </button>
-          )}
-        </div>
+            {showCloseButton && (
+              <button
+                className="btn btn-circle btn-sm btn-ghost"
+                onClick={onClose}
+              >
+                <IoClose size={20} />
+              </button>
+            )}
+          </div>
+        )}
 
         {/* Body */}
-        <div className="max-h-[70vh] overflow-y-auto p-6">
+        <div
+          className="flex-1 min-h-0 overflow-y-auto p-6"
+          data-lenis-prevent="true"
+        >
           {children}
         </div>
 
         {/* Footer */}
         {footer && (
-          <div className="border-t border-base-300 px-6 py-4">
+          <div className="border-t border-base-300 px-6 py-4 shrink-0">
             {footer}
           </div>
         )}
@@ -103,4 +138,4 @@ const Modal = ({
   );
 };
 
-export default Modal;
+export default Modal;

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

@@ -0,0 +1,45 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+interface PageTransitionProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const pageVariants = {
+  initial: {
+    opacity: 0,
+    y: 8,
+  },
+  in: {
+    opacity: 1,
+    y: 0,
+  },
+  out: {
+    opacity: 0,
+    y: -8,
+  },
+};
+
+const pageTransition = {
+  type: "tween",
+  ease: "anticipate",
+  duration: 0.3,
+};
+
+const PageTransition = ({ children, className = "" }: PageTransitionProps) => {
+  return (
+    <motion.div
+      initial="initial"
+      animate="in"
+      exit="out"
+      variants={pageVariants}
+      transition={pageTransition}
+      className={`h-full w-full ${className}`}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+export default PageTransition;

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

@@ -0,0 +1,91 @@
+import React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+}
+
+export const Pagination: React.FC<PaginationProps> = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+}) => {
+  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);
+  }
+
+  const pages = [];
+  for (let i = startPage; i <= endPage; i++) {
+    pages.push(i);
+  }
+
+  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 && (
+        <>
+          <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"
+          >
+            1
+          </button>
+          {startPage > 2 && <span className="px-1 text-base-content/40">...</span>}
+        </>
+      )}
+
+      {pages.map((page) => (
+        <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"
+          }`}
+        >
+          {page}
+        </button>
+      ))}
+
+      {endPage < totalPages && (
+        <>
+          {endPage < totalPages - 1 && (
+            <span className="px-1 text-base-content/40">...</span>
+          )}
+          <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"
+          >
+            {totalPages}
+          </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>
+  );
+};

package/templates/{mern-ts/client → layers/react/typescript}/src/components/common/Table.tsx

@@ -33,7 +33,7 @@ const Table = <T extends Record<string, any>>({
   }
 
   return (
-    <div className="flex flex-col w-full border border-base-300 rounded-xl overflow-hidden bg-base-100 shadow-sm">
+    <div className="flex flex-col w-full border border-base-300 rounded-xl overflow-hidden bg-base-100 shadow">
       <div className="overflow-x-auto w-full">
         <table className="table table-hover w-full min-w-full">
           <thead className="bg-base-200/60 border-b border-base-300">
@@ -59,7 +59,9 @@ const Table = <T extends Record<string, any>>({
                   }`}
                 >
                   {columns.map((col, colIndex) => {
-                    const value = col.accessor ? row[col.accessor as string] : undefined;
+                    const value = col.accessor
+                      ? row[col.accessor as string]
+                      : undefined;
                     return (
                       <td
                         key={(col.accessor as string) || colIndex}

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

@@ -0,0 +1,145 @@
+import React, { ReactNode } from "react";
+import { ChevronDown } from "lucide-react";
+import { motion } from "framer-motion";
+
+export interface TabItem {
+  id: string;
+  label: ReactNode;
+  icon?: ReactNode;
+}
+
+interface TabsProps {
+  tabs: TabItem[];
+  activeTab: string;
+  onChange: (id: string) => void;
+  variant?: "underline" | "box";
+  className?: string;
+  dropdown?: boolean;
+}
+
+export const Tabs = ({
+  tabs,
+  activeTab,
+  onChange,
+  variant = "underline",
+  className = "",
+  dropdown = false,
+}: TabsProps) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  // Close dropdown if user clicks outside
+  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 (
+      <div className="relative md:hidden w-full max-w-xs z-[50]" onClick={(e) => e.stopPropagation()}>
+        {/* Trigger Button */}
+        <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 "
+        >
+          <div className="flex items-center gap-1.5">
+            {activeItem?.icon}
+            <span className="font-semibold">{activeItem?.label}</span>
+          </div>
+          <ChevronDown size={14} className={`opacity-50 transition-transform ${isOpen ? "rotate-180" : ""}`} />
+        </button>
+
+        {/* Dropdown Menu */}
+        {isOpen && (
+          <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">
+            {tabs.map((tab) => (
+              <button
+                key={tab.id}
+                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"
+                }`}
+              >
+                {tab.icon}
+                {tab.label}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  if (variant === "box") {
+    return (
+      <>
+        {renderDropdown()}
+        <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}`}
+        >
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              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"
+              }`}
+            >
+              {activeTab === tab.id && (
+                <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}
+            </button>
+          ))}
+        </div>
+      </>
+    );
+  }
+
+  // default: underline
+  return (
+    <>
+      {renderDropdown()}
+      <div
+        className={`tabs tabs-bordered ${dropdown ? "hidden md:flex" : "flex"} ${className}`}
+      >
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            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"
+            }`}
+          >
+            {activeTab === tab.id && (
+              <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 && <span className="mr-2">{tab.icon}</span>}
+            {tab.label}
+          </button>
+        ))}
+      </div>
+    </>
+  );
+};

package/templates/layers/react/typescript/src/components/common/modals/ConfirmModal.tsx

@@ -0,0 +1,114 @@
+import React from "react";
+import { AlertCircle, Trash2, Info } from "lucide-react";
+import Modal from "../Modal";
+export type ConfirmModalType = "danger" | "warning" | "info";
+
+interface ConfirmModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  message: React.ReactNode;
+  type?: ConfirmModalType;
+  confirmText?: string;
+  cancelText?: string;
+  isLoading?: boolean;
+}
+
+const ConfirmModal: React.FC<ConfirmModalProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  type = "danger",
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  isLoading = false,
+}) => {
+
+
+  const getTypeStyles = () => {
+    switch (type) {
+      case "danger":
+        return {
+          icon: <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: <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: <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 (
+    <Modal
+      open={isOpen}
+      onClose={onClose}
+      hideHeader
+      size="sm"
+      className={`p-8 !max-w-md ${styles.border}`}
+    >
+      <div className={`absolute top-0 left-0 w-full h-1 ${styles.btn.split(' ')[0]} ${styles.btn.split(' ')[1]}`}></div>
+
+      <div className="flex flex-col items-center text-center">
+        {/* Icon with glowing effect */}
+        <div className="relative mb-5">
+          <div className={`absolute inset-0 rounded-full blur-xl animate-pulse-glow ${styles.iconGlow}`}></div>
+          <div className={`relative w-14 h-14 rounded-full flex items-center justify-center border ${styles.iconBg} shadow-inner`}>
+            {styles.icon}
+          </div>
+        </div>
+
+        <h3 className="font-bold text-2xl mb-3 text-base-content tracking-tight">
+          {title}
+        </h3>
+        
+        <div className="text-base-content/70 mb-8 leading-relaxed text-sm px-2">
+          {message}
+        </div>
+      </div>
+      
+      <div className="flex items-center justify-center gap-4 w-full">
+        <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}
+        >
+          {cancelText}
+        </button>
+        <button
+          type="button"
+          className={`btn rounded-xl px-6 flex-1 ${styles.btn}`}
+          onClick={onConfirm}
+          disabled={isLoading}
+        >
+          {isLoading ? <span className="loading loading-spinner loading-sm"></span> : confirmText}
+        </button>
+      </div>
+    </Modal>
+  );
+};
+
+export default ConfirmModal;

package/templates/layers/react/typescript/src/components/common/modals/DocViewerModal.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { useResumeStore } from "../../store/useResumeStore";
+import Modal from "../Modal";
+
+interface DocViewerModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  documentUrl?: string;
+}
+
+export const DocViewerModal = ({ isOpen, onClose, documentUrl }: DocViewerModalProps) => {
+  const { analysisResult } = useResumeStore();
+
+  const finalUrl = documentUrl || analysisResult?.documentUrl;
+  const textContent = analysisResult?.resumeText;
+
+  if (!isOpen || (!finalUrl && !textContent)) return null;
+
+  return (
+    <Modal
+      open={isOpen}
+      onClose={onClose}
+      title="Document Viewer"
+      size="2xl"
+    >
+      <div className="h-[75vh] w-full">
+        {finalUrl ? (
+          <iframe
+            src={finalUrl}
+            className="w-full h-full rounded-lg border border-base-300 bg-base-100"
+            title="Resume Document"
+          />
+        ) : (
+          <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">
+            {textContent}
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+};

package/templates/{mern-react-native/client → layers/react/typescript}/src/components/layout/SidebarLayout.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import { Outlet, useLocation } from "react-router-dom";
 import SidebarHeader from "../ui/SidebarHeader";
-import Sidebar from "../ui/sidebar";
+import Sidebar from "../ui/Sidebar";
 import { useUiStore } from "../../store/useUiStore";
 import appConfig from "../../config/appConfig";
 

package/templates/{mern/client/src/components/ui/sidebar.jsx → layers/react/typescript/src/components/ui/Sidebar.tsx}

@@ -50,9 +50,9 @@ const Sidebar = () => {
             {/* 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.img ? (
+                {appConfig.app.logo ? (
                   <img
-                    src={appConfig.app.img}
+                    src={appConfig.app.logo}
                     alt=""
                     className="w-8 h-8 rounded-lg"
                   />
@@ -89,7 +89,7 @@ const Sidebar = () => {
                     to={item.path}
                     onClick={isMobile ? close : undefined}
                     className={({ isActive }) =>
-                      `flex items-center gap-3 rounded-box px-4 py-3 transition-all h-12 
+                      `flex items-center gap-3 rounded-box px-4 py-3 duration-0  h-12 
                       ${
                         isActive
                           ? "bg-primary text-primary-content"
@@ -104,7 +104,7 @@ const Sidebar = () => {
                     />
 
                     {!collapsed && (
-                      <span className="font-medium transition-all duration-300">
+                      <span className="font-medium transition-all duration-0 whitespace-nowrap">
                         {item.title}
                       </span>
                     )}

package/templates/{mern-react-native/client → layers/react/typescript}/src/components/ui/SidebarHeader.tsx

@@ -1,11 +1,18 @@
 import { FiMenu } from "react-icons/fi";
 import { useUiStore } from "../../store/useUiStore";
 
-const SidebarHeader = ({ title = "Dashboard", actions = null }) => {
-  const { toggleSidebar } = useUiStore();
+import { Breadcrumbs } from "../common/Breadcrumbs";
+
+interface SidebarHeaderProps {
+  title?: string;
+  actions?: React.ReactNode;
+}
+
+const SidebarHeader = ({ title = "Dashboard", actions = null }: SidebarHeaderProps) => {
+  const { toggleSidebar, breadcrumbs } = useUiStore();
 
   return (
-    <header className="sticky top-0 z-30 h-16 bg-base-200 backdrop-blur border-b border-base-300 flex items-center justify-between px-4 lg:px-6">
+    <header className="sticky top-0 z-30 h-16 bg-base-200 backdrop-blur border-b border-base-200 flex items-center justify-between px-4 lg:px-6">
       <div className="flex items-center gap-3">
         <button
           onClick={toggleSidebar}
@@ -14,7 +21,11 @@ const SidebarHeader = ({ title = "Dashboard", actions = null }) => {
           <FiMenu size={22} />
         </button>
 
-        <h1 className="text-xl font-bold">{title}</h1>
+        {breadcrumbs && breadcrumbs.length > 0 ? (
+          <Breadcrumbs items={breadcrumbs} />
+        ) : (
+          <h1 className="text-xl font-bold">{title}</h1>
+        )}
       </div>
 
       <div className="flex items-center gap-2">