@imksh/create 1.0.30 → 1.0.32

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

@@ -1,13 +1,14 @@
-import React from "react";
-import TableSkeleton from "../skeletons/common/TableSkeleton";
+import React, { useEffect, useRef } from "react";
+import { Pagination } from "./Pagination";
 
-export interface TableColumn<T = any> {
-  header: string;
+export interface TableColumn<T = Record<string, unknown>> {
+  header: React.ReactNode | string;
   accessor?: keyof T | string;
-  render?: (value: any, row: T, index: number) => React.ReactNode;
+  render?: (value: unknown, row: T, index: number) => React.ReactNode;
+  headerClass?: string;
 }
 
-interface TableProps<T = any> {
+interface TableProps<T = Record<string, unknown>> {
   columns: TableColumn<T>[];
   data: T[];
   loading?: boolean;
@@ -16,9 +17,13 @@ interface TableProps<T = any> {
   currentPage?: number;
   totalPages?: number;
   onPageChange?: ((page: number) => void) | null;
+  wrapperClassName?: string;
+  renderCard?: (row: T, index: number) => React.ReactNode;
+  pagination?: boolean; // if true, uses load more/infinite scroll on mobile
+  header?: React.ReactNode; // custom header content to render above the table
 }
 
-const Table = <T extends Record<string, any>>({
+const Table = <T extends Record<string, unknown>>({
   columns = [],
   data = [],
   loading = false,
@@ -27,35 +32,126 @@ const Table = <T extends Record<string, any>>({
   currentPage = 1,
   totalPages = 1,
   onPageChange = null,
+  wrapperClassName = "",
+  renderCard,
+  pagination = false,
+  header,
 }: TableProps<T>) => {
-  if (loading) {
-    return <TableSkeleton rows={5} columns={columns.length || 4} />;
-  }
+  const observerTarget = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!pagination || !onPageChange || currentPage >= totalPages) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          onPageChange(currentPage + 1);
+        }
+      },
+      { threshold: 0.1 },
+    );
+
+    if (observerTarget.current) {
+      observer.observe(observerTarget.current);
+    }
+
+    return () => observer.disconnect();
+  }, [pagination, onPageChange, currentPage, totalPages]);
 
   return (
-    <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">
+    <div
+      className={`flex flex-col w-full h-full md:border md:border-base-300 rounded-xl overflow-hidden bg-base-100  ${wrapperClassName}`}
+    >
+      {/* Optional Custom Header Area */}
+      {header && (
+        <div className="shrink-0 bg-base-100 border-b border-base-300">
+          {header}
+        </div>
+      )}
+
+      {/* Desktop Table View (hidden on mobile if renderCard provided) */}
+      <div
+        className={`overflow-auto w-full flex-1 ${renderCard ? "hidden md:block" : "block"}`}
+      >
+        <table className="table table-hover w-full min-w-full relative border-collapse">
+          <thead className="bg-base-200 backdrop-blur sticky top-0 z-10 border-b border-base-300">
             <tr>
               {columns.map((col, index) => (
                 <th
                   key={(col.accessor as string) || index}
-                  className="px-6 py-4 text-left text-xs font-bold text-base-content/80 uppercase tracking-wider"
+                  className={`px-6 py-4 text-left text-xs font-semibold text-base-content/70 uppercase tracking-wider bg-transparent border-none ${col.headerClass || ""}`}
                 >
                   {col.header}
                 </th>
               ))}
             </tr>
           </thead>
-          <tbody className="divide-y divide-base-300 bg-base-100">
-            {data.length > 0 ? (
+          <tbody className="divide-y divide-base-200/60 bg-base-100">
+            {loading ? (
+              Array.from({ length: 5 }).map((_, rowIndex) => (
+                <tr key={`skeleton-${rowIndex}`} className="animate-pulse">
+                  {columns.map((col, colIndex) => {
+                    const isRight = col.headerClass?.includes("text-right");
+                    const isFirst = colIndex === 0;
+                    const isLast = colIndex === columns.length - 1;
+                    const headerText =
+                      typeof col.header === "string"
+                        ? col.header.toLowerCase()
+                        : "";
+
+                    return (
+                      <td
+                        key={colIndex}
+                        className={`px-6 py-4 whitespace-nowrap align-middle border-none ${col.headerClass || ""}`}
+                      >
+                        {isRight ||
+                        (isLast && headerText.includes("action")) ? (
+                          <div className="flex justify-end items-center gap-2">
+                            <div className="w-7 h-7 rounded-lg bg-base-300/80"></div>
+                            <div className="w-7 h-7 rounded-lg bg-base-300/80"></div>
+                          </div>
+                        ) : headerText.includes("assigned") ? (
+                          <div className="h-6 w-28 rounded-md bg-base-200 border border-base-300/80"></div>
+                        ) : isFirst ? (
+                          <div className="space-y-1.5">
+                            <div
+                              className="h-4 bg-base-300/80 rounded"
+                              style={{
+                                width: `${65 + (rowIndex % 3) * 15}%`,
+                                maxWidth: "140px",
+                              }}
+                            ></div>
+                            <div
+                              className="h-3 bg-base-200 rounded"
+                              style={{
+                                width: `${40 + (rowIndex % 2) * 15}%`,
+                                maxWidth: "90px",
+                              }}
+                            ></div>
+                          </div>
+                        ) : (
+                          <div
+                            className={`h-4 bg-base-300/70 rounded ${isRight ? "ml-auto" : ""}`}
+                            style={{
+                              width: `${50 + ((rowIndex + colIndex) % 4) * 12}%`,
+                              maxWidth: "160px",
+                            }}
+                          ></div>
+                        )}
+                      </td>
+                    );
+                  })}
+                </tr>
+              ))
+            ) : data.length > 0 ? (
               data.map((row, rowIndex) => (
                 <tr
                   key={row.id || rowIndex}
                   onClick={() => onRowClick && onRowClick(row)}
-                  className={`transition-colors duration-150 ${
-                    onRowClick ? "cursor-pointer hover:bg-base-200" : ""
+                  className={`transition-all duration-200 group ${
+                    onRowClick
+                      ? "cursor-pointer hover:bg-base-200/30"
+                      : "hover:bg-base-200/10"
                   }`}
                 >
                   {columns.map((col, colIndex) => {
@@ -65,7 +161,7 @@ const Table = <T extends Record<string, any>>({
                     return (
                       <td
                         key={(col.accessor as string) || colIndex}
-                        className="px-6 py-4 text-sm text-base-content/90 whitespace-nowrap align-middle"
+                        className="px-6 py-4 text-[13px] text-base-content/80 whitespace-nowrap align-middle border-none"
                       >
                         {col.render ? col.render(value, row, rowIndex) : value}
                       </td>
@@ -89,28 +185,95 @@ const Table = <T extends Record<string, any>>({
           </tbody>
         </table>
       </div>
-      {totalPages > 1 && onPageChange && (
-        <div className="border-t border-base-300 px-6 py-4 bg-base-200/30 flex items-center justify-between shrink-0">
+
+      {/* Mobile Card View (only visible if renderCard provided) */}
+      {renderCard && (
+        <div className="md:hidden flex flex-col divide-y divide-base-200 overflow-y-auto flex-1">
+          {loading ? (
+            Array.from({ length: 4 }).map((_, i) => (
+              <div
+                key={`card-skeleton-${i}`}
+                className="p-4 flex flex-col gap-3 animate-pulse"
+              >
+                <div className="flex justify-between items-start">
+                  <div className="space-y-1.5 flex-1">
+                    <div className="h-4.5 bg-base-300/80 rounded w-36"></div>
+                    <div className="h-3 bg-base-200 rounded w-24"></div>
+                  </div>
+                  <div className="flex gap-2">
+                    <div className="w-7 h-7 rounded-lg bg-base-300/80"></div>
+                    <div className="w-7 h-7 rounded-lg bg-base-300/80"></div>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <div className="h-3.5 bg-base-200 rounded w-48"></div>
+                  <div className="h-3.5 bg-base-200 rounded w-32"></div>
+                </div>
+                <div className="flex items-center justify-between pt-2 border-t border-base-200">
+                  <div className="h-3 bg-base-200 rounded w-20"></div>
+                  <div className="h-6 bg-base-300/80 rounded-lg w-28"></div>
+                </div>
+              </div>
+            ))
+          ) : data.length > 0 ? (
+            <>
+              {data.map((row, index) => (
+                <div
+                  key={row.id || index}
+                  onClick={() => onRowClick && onRowClick(row)}
+                  className={onRowClick ? "cursor-pointer" : ""}
+                >
+                  {renderCard(row, index)}
+                </div>
+              ))}
+              {pagination && currentPage < totalPages && (
+                <div ref={observerTarget} className="p-6 flex justify-center">
+                  <span className="loading loading-spinner loading-sm text-primary"></span>
+                </div>
+              )}
+            </>
+          ) : (
+            <div className="p-12 text-center text-sm text-base-content/60 flex flex-col items-center gap-2">
+              <span className="text-2xl">📁</span>
+              <span>{emptyMessage}</span>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Desktop Pagination / Load More Footer */}
+      {pagination && onPageChange && totalPages > 1 && (
+        <div
+          className={`border-t border-base-300 px-6 py-4 bg-base-200/30 flex items-center shrink-0 ${renderCard ? "hidden md:flex justify-between" : "justify-between"}`}
+        >
           <div className="text-xs text-base-content/75 font-medium">
-            Page <span className="font-bold">{currentPage}</span> of{" "}
-            <span className="font-bold">{totalPages}</span>
+            Showing <span className="font-bold">{data.length}</span> items
           </div>
           <div className="flex gap-2">
-            <button
-              onClick={() => onPageChange(currentPage - 1)}
-              disabled={currentPage <= 1}
-              className="btn btn-sm btn-outline rounded-lg text-xs"
-            >
-              Previous
-            </button>
-            <button
-              onClick={() => onPageChange(currentPage + 1)}
-              disabled={currentPage >= totalPages}
-              className="btn btn-sm btn-outline rounded-lg text-xs"
-            >
-              Next
-            </button>
+            {currentPage < totalPages && (
+              <button
+                onClick={() => onPageChange(currentPage + 1)}
+                className="btn btn-sm btn-outline btn-primary rounded-lg text-xs"
+              >
+                Load More
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Standard Pagination (if pagination prop is not true) */}
+      {!pagination && onPageChange && totalPages > 0 && (
+        <div className="border-t border-base-300 px-3 sm:px-6 py-2.5 sm:py-4 bg-base-200/30 flex items-center justify-between shrink-0 mt-auto gap-2">
+          <div className="text-xs text-base-content/75 font-medium whitespace-nowrap">
+            Page <span className="font-bold">{currentPage}</span> of{" "}
+            <span className="font-bold">{totalPages}</span>
           </div>
+          <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={onPageChange}
+          />
         </div>
       )}
     </div>

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

@@ -15,18 +15,49 @@ interface TabsProps {
   variant?: "underline" | "box";
   className?: string;
   dropdown?: boolean;
+  disabled?: boolean;
+  size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
 }
 
 export const Tabs = ({
   tabs,
   activeTab,
   onChange,
-  variant = "underline",
-  className = "",
+  variant = "box",
+  className = "bg-base-200 w-fit",
   dropdown = false,
+  disabled = false,
+  size = "base",
 }: TabsProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
 
+  const getTabSizeClass = () => {
+    switch (size) {
+      case "xs": return "text-xs px-2.5 h-7 min-h-7";
+      case "sm": return "text-sm px-3 h-8 min-h-8";
+      case "base": return "text-base px-4 h-10 min-h-10";
+      case "lg": return "text-lg px-6 h-12 min-h-12";
+      case "xl": return "text-xl px-6 h-14 min-h-14";
+      case "2xl": return "text-2xl px-8 h-16 min-h-16";
+      default: return "text-base px-4 h-10 min-h-10";
+    }
+  };
+
+  const getBtnSizeClass = () => {
+    switch (size) {
+      case "xs": return "btn-xs text-xs";
+      case "sm": return "btn-sm text-sm";
+      case "base": return "text-base";
+      case "lg": return "btn-lg text-lg";
+      case "xl": return "btn-lg text-xl";
+      case "2xl": return "btn-lg text-2xl";
+      default: return "text-base";
+    }
+  };
+
+  const tabSizeClass = getTabSizeClass();
+  const btnSizeClass = getBtnSizeClass();
+
   // Close dropdown if user clicks outside
   React.useEffect(() => {
     if (!dropdown || !isOpen) return;
@@ -39,17 +70,25 @@ export const Tabs = ({
     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()}>
+      <div
+        className="relative md:hidden w-full max-w-xs z-[50]"
+        onClick={(e) => e.stopPropagation()}
+      >
         {/* Trigger Button */}
         <button
+          type="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 "
+          disabled={disabled}
+          className={`btn ${btnSizeClass} bg-base-200 border-base-300 border flex w-full items-center justify-between px-3 text-base-content ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
         >
           <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" : ""}`} />
+          <ChevronDown
+            size={14}
+            className={`opacity-50 transition-transform ${isOpen ? "rotate-180" : ""}`}
+          />
         </button>
 
         {/* Dropdown Menu */}
@@ -62,7 +101,8 @@ export const Tabs = ({
                   onChange(tab.id);
                   setIsOpen(false);
                 }}
-                className={`w-full flex items-center gap-2 px-3 py-2 text-sm transition-colors ${
+                type="button"
+                className={`w-full flex items-center gap-2 px-3 py-2 transition-colors ${size === "base" ? "text-sm" : `text-${size}`} ${
                   activeTab === tab.id
                     ? "bg-primary/10 text-primary font-semibold"
                     : "hover:bg-base-200 text-base-content/80"
@@ -83,17 +123,19 @@ export const Tabs = ({
       <>
         {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}`}
+          className={`tabs tabs-boxed  p-1 flex-nowrap overflow-x-auto hide-scrollbar shrink-0 rounded-lg ${dropdown ? "hidden md:flex" : "flex"} ${className}`}
         >
           {tabs.map((tab) => (
             <button
+              type="button"
               key={tab.id}
               onClick={() => onChange(tab.id)}
-              className={`tab whitespace-nowrap flex items-center rounded-lg gap-2 relative z-0 ${
+              disabled={disabled}
+              className={`tab ${tabSizeClass} 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"
-              }`}
+                  : "text-base-content/70 hover:text-base-content "
+              } ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
             >
               {activeTab === tab.id && (
                 <motion.div
@@ -120,13 +162,15 @@ export const Tabs = ({
       >
         {tabs.map((tab) => (
           <button
+            type="button"
             key={tab.id}
             onClick={() => onChange(tab.id)}
-            className={`tab whitespace-nowrap relative !border-transparent ${
+            disabled={disabled}
+            className={`tab ${tabSizeClass} whitespace-nowrap relative !border-transparent ${
               activeTab === tab.id
                 ? "font-semibold text-primary"
                 : "text-base-content/70 hover:text-base-content"
-            }`}
+            } ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
           >
             {activeTab === tab.id && (
               <motion.div

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

@@ -1,10 +1,22 @@
 import React from "react";
 import { motion } from "motion/react";
 
-const ToggleSwitch = ({ checked, onChange, label }) => {
+interface ToggleSwitchProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  label?: React.ReactNode;
+  className?:string
+}
+
+const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
+  checked,
+  onChange,
+  label,
+  className
+}) => {
   return (
     <div
-      className="flex items-center gap-3 cursor-pointer select-none w-fit group"
+      className={`flex items-center gap-3 cursor-pointer select-none w-fit group ${className}`}
       onClick={() => onChange(!checked)}
     >
       <span className="text-sm font-bold">{label}</span>
@@ -16,7 +28,7 @@ const ToggleSwitch = ({ checked, onChange, label }) => {
         }`}
       >
         <motion.div
-          className={`w-4 h-4 rounded-full shadow-sm ${
+          className={`w-4 h-4 rounded-full shadow ${
             checked ? "bg-white" : "bg-base-content/40"
           }`}
           layout

package/templates/layers/react/typescript/src/components/layout/SidebarLayout.tsx

@@ -10,11 +10,8 @@ const SidebarLayout = () => {
     useUiStore();
   const { pathname } = useLocation();
 
-  // Reset header title and actions whenever the route shifts
-  useEffect(() => {
-    setHeaderTitle(appConfig.app.name);
-    setHeaderActions(null);
-  }, [pathname, setHeaderTitle, setHeaderActions]);
+  // Layout no longer resets title on every route change.
+  // Individual pages are responsible for setting their own title via useUiStore.
 
   return (
     <div className="flex h-screen overflow-hidden">
@@ -24,7 +21,7 @@ const SidebarLayout = () => {
         <SidebarHeader title={headerTitle} actions={headerActions} />
 
         <main
-          className="flex-1 h-full overflow-y-auto px-2 py-6 md:p-6 max-w-7xl"
+          className="flex-1 h-full overflow-y-auto "
           data-lenis-prevent
         >
           <Outlet />

package/templates/layers/react/typescript/src/components/modals/Modal.tsx

@@ -0,0 +1,151 @@
+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;
+  children: ReactNode;
+  size?:
+    | "sm"
+    | "md"
+    | "lg"
+    | "xl"
+    | "2xl"
+    | "3xl"
+    | "4xl"
+    | "5xl"
+    | "6xl"
+    | "7xl"
+    | "full";
+  closeOnBackdrop?: boolean;
+  closeOnEsc?: boolean;
+  showCloseButton?: boolean;
+  hideHeader?: boolean;
+  className?: string;
+  bodyClass?: string;
+  footer?: ReactNode;
+  height?: string | number;
+}
+
+const sizes = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  "2xl": "max-w-2xl",
+  "3xl": "max-w-3xl",
+  "4xl": "max-w-4xl",
+  "5xl": "max-w-5xl",
+  "6xl": "max-w-6xl",
+  "7xl": "max-w-7xl",
+  full: "max-w-7xl",
+};
+
+const Modal = ({
+  open,
+  onClose,
+  title,
+  children,
+  size = "4xl",
+  closeOnBackdrop = true,
+  closeOnEsc = true,
+  showCloseButton = true,
+  hideHeader = false,
+  className = "",
+  bodyClass = "p-2 sm:p-4",
+  footer,
+  height,
+}: 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: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose?.();
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, closeOnEsc, onClose]);
+
+  if (!open) return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+        onClick={closeOnBackdrop ? onClose : undefined}
+      />
+
+      {/* Modal */}
+      <div
+        className={`
+          relative
+          flex flex-col overflow-hidden max-h-[90vh]
+          w-full
+          ${sizes[size]}
+          rounded-2xl
+          bg-base-100
+          shadow-md
+          border border-base-300
+          animate-in zoom-in-95 fade-in duration-200
+          ${className}
+        `}
+        style={height ? { height } : undefined}
+      >
+        {/* Header */}
+        {!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-error btn-soft text-error/70 hover:text-error hover:bg-error/20 hover:shadow-sm hover:rotate-180 transition-transform duration-200"
+                onClick={onClose}
+              >
+                <IoClose size={20} className="" />
+              </button>
+            )}
+          </div>
+        )}
+
+        {/* Body */}
+        <div
+          className={`flex-1 min-h-0 overflow-y-auto ${bodyClass}`}
+          data-lenis-prevent="true"
+        >
+          {children}
+        </div>
+
+        {/* Footer */}
+        {footer && (
+          <div className="border-t border-base-300 px-6 py-4 shrink-0">
+            {footer}
+          </div>
+        )}
+      </div>
+    </div>,
+    document.body,
+  );
+};
+
+export default Modal;