@imksh/create 1.0.30 → 1.0.32

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

@@ -0,0 +1,167 @@
+import React from "react";
+
+const COLOR_STYLES = {
+  blue: {
+    icon: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
+    activeBorder:
+      "border-blue-500/50 shadow-sm ring-1 ring-blue-500/20 bg-gradient-to-br from-base-100 to-blue-500/[0.03]",
+  },
+  emerald: {
+    icon: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
+    activeBorder:
+      "border-emerald-500/50 shadow-sm ring-1 ring-emerald-500/20 bg-gradient-to-br from-base-100 to-emerald-500/[0.03]",
+  },
+  amber: {
+    icon: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
+    activeBorder:
+      "border-amber-500/50 shadow-sm ring-1 ring-amber-500/20 bg-gradient-to-br from-base-100 to-amber-500/[0.03]",
+  },
+  purple: {
+    icon: "bg-purple-500/10 text-purple-600 dark:text-purple-400",
+    activeBorder:
+      "border-purple-500/50 shadow-sm ring-1 ring-purple-500/20 bg-gradient-to-br from-base-100 to-purple-500/[0.03]",
+  },
+  primary: {
+    icon: "bg-primary/10 text-primary",
+    activeBorder:
+      "border-primary/50 shadow-sm ring-1 ring-primary/20 bg-gradient-to-br from-base-100 to-primary/[0.03]",
+  },
+  secondary: {
+    icon: "bg-secondary/10 text-secondary",
+    activeBorder:
+      "border-secondary/50 shadow-sm ring-1 ring-secondary/20 bg-gradient-to-br from-base-100 to-secondary/[0.03]",
+  },
+  success: {
+    icon: "bg-success/10 text-success",
+    activeBorder:
+      "border-success/50 shadow-sm ring-1 ring-success/20 bg-gradient-to-br from-base-100 to-success/[0.03]",
+  },
+  warning: {
+    icon: "bg-warning/10 text-warning",
+    activeBorder:
+      "border-warning/50 shadow-sm ring-1 ring-warning/20 bg-gradient-to-br from-base-100 to-warning/[0.03]",
+  },
+  info: {
+    icon: "bg-info/10 text-info",
+    activeBorder:
+      "border-info/50 shadow-sm ring-1 ring-info/20 bg-gradient-to-br from-base-100 to-info/[0.03]",
+  },
+  error: {
+    icon: "bg-error/10 text-error",
+    activeBorder:
+      "border-error/50 shadow-sm ring-1 ring-error/20 bg-gradient-to-br from-base-100 to-error/[0.03]",
+  },
+};
+
+export const StatsCard = ({
+  title,
+  value,
+  subValue,
+  trend,
+  icon,
+  color = "primary",
+  percentage,
+  badge,
+  description,
+  active = false,
+  loading = false,
+  onClick,
+  className = "",
+}) => {
+  const styles = COLOR_STYLES[color] || COLOR_STYLES.primary;
+
+  // Support both new `subValue` prop and deprecated `percentage` prop
+  const displaySubValue =
+    subValue !== undefined
+      ? subValue
+      : percentage !== undefined && percentage !== null
+        ? typeof percentage === "number"
+          ? `${percentage}%`
+          : percentage
+        : null;
+
+  const renderBadge = () => {
+    if (!badge) return null;
+    if (React.isValidElement(badge)) return badge;
+    const b = badge;
+    return (
+      <span
+        className={`badge badge-xs font-medium ${b.variant ? `badge-${b.variant}` : "badge-ghost"}`}
+      >
+        {b.label}
+      </span>
+    );
+  };
+
+  const renderTrend = () => {
+    if (!trend) return null;
+    if (React.isValidElement(trend)) return trend;
+    const t = trend;
+    const isPos = t.isPositive ?? true;
+    return (
+      <span
+        className={`inline-flex items-center gap-0.5 text-xs font-semibold ${
+          isPos ? "text-success" : "text-error"
+        }`}
+      >
+        <span>{isPos ? "↑" : "↓"}</span>
+        <span>{t.value}</span>
+        {t.label && (
+          <span className="opacity-70 font-normal ml-0.5">{t.label}</span>
+        )}
+      </span>
+    );
+  };
+
+  return (
+    <div
+      onClick={onClick}
+      className={`card bg-base-100 border transition-all duration-200 p-4 rounded-2xl ${
+        onClick ? "cursor-pointer hover:shadow-sm active:scale-[0.99]" : ""
+      } ${
+        active ? styles.activeBorder : "border-base-200 hover:border-base-300"
+      } ${className}`}
+    >
+      {/* Top row: Title and Icon */}
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-xs font-semibold uppercase tracking-wider text-base-content/60 truncate">
+          {title}
+        </span>
+        {icon && (
+          <div
+            className={`w-9 h-9 rounded-xl flex items-center justify-center shrink-0 ${styles.icon}`}
+          >
+            {icon}
+          </div>
+        )}
+      </div>
+
+      {/* Middle row: Value and optional SubValue/Trend */}
+      <div className="mt-2 flex items-baseline gap-2 flex-wrap">
+        <span className="text-2xl md:text-3xl font-bold tracking-tight text-base-content">
+          {loading ? (
+            <span className="loading loading-spinner loading-sm"></span>
+          ) : (
+            value
+          )}
+        </span>
+        {displaySubValue !== null && !loading && (
+          <span className="text-xs font-semibold opacity-80">
+            {displaySubValue}
+          </span>
+        )}
+        {!loading && renderTrend()}
+      </div>
+
+      {/* Bottom row: Badge and description */}
+      {(badge || description) && (
+        <div className="mt-2 flex items-center gap-1.5 text-xs text-base-content/60 min-w-0">
+          {renderBadge()}
+          {description && <span className="truncate">{description}</span>}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default StatsCard;

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

@@ -1,5 +1,6 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import TableSkeleton from "../skeletons/common/TableSkeleton";
+import React, { useEffect, useRef } from "react";
+import { Pagination } from "./Pagination";
+
 const Table = ({
   columns = [],
   data = [],
@@ -9,135 +10,250 @@ const Table = ({
   currentPage = 1,
   totalPages = 1,
   onPageChange = null,
+  wrapperClassName = "",
+  renderCard,
+  pagination = false,
+  header,
 }) => {
-  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",
-                }),
-              ],
-            }),
-          ],
-        }),
-    ],
-  });
+  const observerTarget = useRef(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 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 || index}
+                  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-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-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] : undefined;
+                    return (
+                      <td
+                        key={col.accessor || colIndex}
+                        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>
+                    );
+                  })}
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td
+                  colSpan={columns.length}
+                  className="px-6 py-12 text-center text-sm text-base-content/60"
+                >
+                  <div className="flex flex-col items-center justify-center gap-2">
+                    <span className="text-2xl">📁</span>
+                    <span>{emptyMessage}</span>
+                  </div>
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {/* 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">
+            Showing <span className="font-bold">{data.length}</span> items
+          </div>
+          <div className="flex gap-2">
+            {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>
+  );
 };
-var Table_default = Table;
-export { Table_default as default };
+
+export default Table;