@imksh/create 1.0.28 → 1.0.31

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

@@ -1,10 +1,12 @@
-import React from "react";
-import TableSkeleton from "../skeletons/common/TableSkeleton";
+"use client";
+import React, { useEffect, useRef } from "react";
+import { Pagination } from "./Pagination";
 
 export interface TableColumn<T = any> {
-  header: string;
+  header: React.ReactNode | string;
   accessor?: keyof T | string;
   render?: (value: any, row: T, index: number) => React.ReactNode;
+  headerClass?: string;
 }
 
 interface TableProps<T = any> {
@@ -16,6 +18,10 @@ 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>>({
@@ -27,43 +33,136 @@ 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-sm">
-      <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) => {
-                    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}
-                        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>
@@ -87,28 +186,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/next/typescript/src/components/common/Tabs.tsx

@@ -0,0 +1,190 @@
+"use client";
+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;
+  disabled?: boolean;
+  size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+}
+
+export const Tabs = ({
+  tabs,
+  activeTab,
+  onChange,
+  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;
+    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
+          type="button"
+          onClick={() => setIsOpen(!isOpen)}
+          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" : ""}`}
+          />
+        </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);
+                }}
+                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"
+                }`}
+              >
+                {tab.icon}
+                {tab.label}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  if (variant === "box") {
+    return (
+      <>
+        {renderDropdown()}
+        <div
+          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)}
+              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 "
+              } ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
+            >
+              {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
+            type="button"
+            key={tab.id}
+            onClick={() => onChange(tab.id)}
+            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
+                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/next/typescript/src/components/common/ToggleSwitch.tsx

@@ -1,19 +1,23 @@
 "use client";
 import React from "react";
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 
-const ToggleSwitch = ({
+interface ToggleSwitchProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  label?: React.ReactNode;
+  className?:string
+}
+
+const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
   checked,
   onChange,
   label,
-}: {
-  checked: boolean;
-  onChange: (checked: boolean) => void;
-  label: string;
+  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>
@@ -25,7 +29,7 @@ const ToggleSwitch = ({
         }`}
       >
         <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/next/typescript/src/components/layout/PublicLayout.tsx

@@ -1,13 +1,15 @@
+"use client";
+import { ReactNode } from "react";
 
+interface PublicLayoutProps {
+  children: ReactNode;
+}
 
-import Header from "../ui/Header";
-
-const PublicLayout = ({ children }: { children: React.ReactNode }) => {
+const PublicLayout = ({ children }: PublicLayoutProps) => {
   return (
-    <>
-      <Header />
+    <div className="min-h-screen bg-base-100 text-base-content">
       {children}
-    </>
+    </div>
   );
 };
 

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

@@ -1,21 +1,15 @@
 "use client";
-import { useEffect } from "react";
-import { usePathname } from "next/navigation";
+import { ReactNode } from "react";
 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";
 
-const SidebarLayout = ({ children }: { children: React.ReactNode }) => {
-  const { headerTitle, headerActions, setHeaderTitle, setHeaderActions } =
-    useUiStore();
-  const pathname = usePathname();
+interface SidebarLayoutProps {
+  children: ReactNode;
+}
 
-  // Reset header title and actions whenever the route shifts
-  useEffect(() => {
-    setHeaderTitle(appConfig.app.name);
-    setHeaderActions(null);
-  }, [pathname, setHeaderTitle, setHeaderActions]);
+const SidebarLayout = ({ children }: SidebarLayoutProps) => {
+  const { headerTitle, headerActions } = useUiStore();
 
   return (
     <div className="flex h-screen overflow-hidden">
@@ -24,10 +18,7 @@ const SidebarLayout = ({ children }: { children: React.ReactNode }) => {
       <div className="flex flex-1 flex-col overflow-hidden">
         <SidebarHeader title={headerTitle} actions={headerActions} />
 
-        <main
-          className="flex-1 h-full overflow-y-auto px-2 py-6 md:p-6 max-w-7xl"
-          data-lenis-prevent
-        >
+        <main className="flex-1 h-full overflow-y-auto" data-lenis-prevent>
           {children}
         </main>
       </div>

package/templates/layers/next/typescript/src/components/modals/ConfirmModal.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { useEffect } from "react";
 import { createPortal } from "react-dom";
 import {