@imksh/create 1.0.24 → 1.0.26

package/templates/production-fullstack/client/src/components/shared/skeletons/common/CardSkeleton.tsx

@@ -0,0 +1,23 @@
+import Skeleton from "./Skeleton";
+
+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" />
+
+        <Skeleton className="h-4 w-full" />
+
+        <Skeleton className="h-4 w-5/6" />
+
+        <Skeleton className="h-10 w-28" />
+
+      </div>
+    </div>
+  );
+};
+
+export default CardSkeleton;

package/templates/production-fullstack/client/src/components/shared/skeletons/common/DashboardSkeleton.tsx

@@ -0,0 +1,19 @@
+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} />
+        ))}
+      </div>
+
+      <CardSkeleton />
+
+    </div>
+  );
+};
+
+export default DashboardSkeleton;

package/templates/production-fullstack/client/src/components/shared/skeletons/common/ListSkeleton.tsx

@@ -0,0 +1,24 @@
+import Skeleton from "./Skeleton";
+
+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"
+        >
+          <Skeleton className="w-12 h-12 rounded-full" />
+
+          <div className="flex-1 space-y-2">
+            <Skeleton className="h-5 w-1/3" />
+
+            <Skeleton className="h-4 w-2/3" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ListSkeleton;

package/templates/production-fullstack/client/src/components/shared/skeletons/common/PageSkeleton.tsx

@@ -0,0 +1,26 @@
+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"
+          />
+        ))}
+
+      </div>
+
+    </div>
+  );
+};
+
+export default PageSkeleton;

package/templates/production-fullstack/client/src/components/shared/skeletons/common/ProfileSkeleton.tsx

@@ -0,0 +1,23 @@
+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;

package/templates/production-fullstack/client/src/components/shared/skeletons/common/Skeleton.tsx

@@ -0,0 +1,18 @@
+const Skeleton = ({
+  className = "",
+  rounded = "rounded-lg",
+  animate = true,
+}) => {
+  return (
+    <div
+      className={`
+        bg-base-300
+        ${rounded}
+        ${animate ? "animate-pulse" : ""}
+        ${className}
+      `}
+    />
+  );
+};
+
+export default Skeleton;

package/templates/production-fullstack/client/src/components/shared/skeletons/common/TableSkeleton.tsx

@@ -0,0 +1,33 @@
+import Skeleton from "./Skeleton";
+
+const TableSkeleton = ({ rows = 6, columns = 5 }) => {
+  return (
+    <div className="overflow-x-auto border border-base-300 rounded-xl">
+      <table className="table">
+        <thead>
+          <tr>
+            {Array.from({ length: columns }).map((_, i) => (
+              <th key={i}>
+                <Skeleton className="h-4 w-20" />
+              </th>
+            ))}
+          </tr>
+        </thead>
+
+        <tbody>
+          {Array.from({ length: rows }).map((_, row) => (
+            <tr key={row}>
+              {Array.from({ length: columns }).map((_, col) => (
+                <td key={col}>
+                  <Skeleton className="h-4 w-full" />
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default TableSkeleton;

package/templates/production-fullstack/client/src/components/ui/ConfirmModal.tsx

@@ -0,0 +1,152 @@
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+import {
+  FaTriangleExclamation,
+  FaCircleInfo,
+  FaCircleCheck,
+  FaCircleXmark,
+} from "react-icons/fa6";
+
+const variants: Record<
+  "warning" | "error" | "success" | "info",
+  { icon: any; iconBg: string; iconColor: string; button: string }
+> = {
+  warning: {
+    icon: FaTriangleExclamation,
+    iconBg: "bg-warning/15",
+    iconColor: "text-warning",
+    button: "btn-warning",
+  },
+  error: {
+    icon: FaCircleXmark,
+    iconBg: "bg-error/15",
+    iconColor: "text-error",
+    button: "btn-error",
+  },
+  success: {
+    icon: FaCircleCheck,
+    iconBg: "bg-success/15",
+    iconColor: "text-success",
+    button: "btn-success",
+  },
+  info: {
+    icon: FaCircleInfo,
+    iconBg: "bg-info/15",
+    iconColor: "text-info",
+    button: "btn-info",
+  },
+};
+
+export interface ConfirmModalProps {
+  open: boolean;
+  variant?: "warning" | "error" | "success" | "info";
+  title?: string;
+  message?: string;
+  confirmText?: string;
+  cancelText?: string;
+  loading?: boolean;
+  closeOnBackdrop?: boolean;
+  closeOnEsc?: boolean;
+  onConfirm: () => void | Promise<void>;
+  onCancel: () => void;
+}
+
+const ConfirmModal = ({
+  open,
+  variant = "warning",
+  title = "Confirm Action",
+  message = "Are you sure you want to continue?",
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  loading = false,
+  closeOnBackdrop = true,
+  closeOnEsc = true,
+  onConfirm,
+  onCancel,
+}: ConfirmModalProps) => {
+  useEffect(() => {
+    if (!open || !closeOnEsc) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onCancel?.();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [open, closeOnEsc, onCancel]);
+
+  if (!open) return null;
+
+  const style = variants[variant || "warning"];
+  const Icon = style.icon;
+
+  return createPortal(
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center">
+      {/* Backdrop */}
+
+      <div
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        onClick={closeOnBackdrop ? onCancel : undefined}
+      />
+
+      {/* Modal */}
+
+      <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}`}
+            >
+              <Icon className={`text-2xl ${style.iconColor}`} />
+            </div>
+
+            <div className="flex-1">
+
+              <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}
+              onClick={onCancel}
+            >
+              {cancelText}
+            </button>
+
+            <button
+              className={`btn ${style.button}`}
+              disabled={loading}
+              onClick={onConfirm}
+            >
+              {loading && (
+                <span className="loading loading-spinner loading-xs" />
+              )}
+
+              {confirmText}
+            </button>
+
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+};
+
+export default ConfirmModal;

package/templates/production-fullstack/client/src/components/ui/Header.tsx

@@ -0,0 +1,230 @@
+import React, { useEffect, useRef } from "react";
+import { Link, useNavigate, useLocation } from "react-router-dom";
+import { FiMenu, FiBookOpen } from "react-icons/fi";
+import { Moon, Sun, X, Globe } from "lucide-react";
+import { useUiStore } from "../../store/useUiStore";
+import appConfig from "../../config/index";
+import { useAuthStore } from "../../features/auth/store/useAuthStore";
+import { getInitials } from "../../utils/getInitials";
+import { motion, AnimatePresence } from "framer-motion";
+import { navigation } from "../../constants/navigation";
+
+const Header = () => {
+  const { 
+    theme, 
+    toggleTheme, 
+    isMobileMenuOpened: isMobileMenuOpen, 
+    setMobileMenuOpened: setIsMobilemenuOpen 
+  } = useUiStore();
+  const { user } = useAuthStore();
+  const navigate = useNavigate();
+  const location = useLocation().pathname;
+  const headerRef = useRef(null);
+
+  // Close mobile menu on scroll
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsMobilemenuOpen(false);
+    };
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [setIsMobilemenuOpen]);
+
+  // Close mobile menu on click outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (headerRef.current && !headerRef.current.contains(event.target)) {
+        setIsMobilemenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [setIsMobilemenuOpen]);
+
+  return (
+    <header ref={headerRef} className="sticky top-0 z-40 p-4">
+      <div className="max-w-7xl mx-auto relative">
+        {/* Main Navbar Bar */}
+        <div className="bg-primary text-primary-content rounded-full shadow-lg px-5 py-2.5 flex items-center justify-between relative">
+          {/* Left */}
+          <div className="flex items-center gap-3">
+            <Link to="/" className="flex items-center gap-2">
+              {appConfig.app.logo ? (
+                <img src={appConfig.logo} alt="logo" className="h-10 w-10" />
+              ) : (
+                <div className="flex items-center">
+                  <div className="w-8 h-8 rounded-full bg-base-100/25 flex items-center justify-center text-primary-content shadow-inner">
+                    <FiBookOpen size={16} />
+                  </div>
+                </div>
+              )}
+
+              <span className="font-bold text-lg hidden sm:block">
+                {appConfig.app.name}
+              </span>
+            </Link>
+          </div>
+
+          {/* Center: Dynamic Navigation */}
+          <nav className="hidden lg:flex items-center gap-6 text-sm font-medium absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+            {navigation.map((item) => (
+              <Link 
+                key={item.path}
+                to={item.path} 
+                className={`hover:text-primary transition-colors ${
+                  location === item.path ? "text-white font-bold" : "text-white/80"
+                }`}
+              >
+                {item.title}
+              </Link>
+            ))}
+          </nav>
+
+          {/* Right */}
+          <div className="flex items-center gap-2">
+            {/* Desktop Theme Switcher */}
+            <button
+              onClick={toggleTheme}
+              className="hidden md:flex btn btn-outline btn-soft border-none btn-circle btn-xs"
+              title="Toggle Theme"
+            >
+              {theme === "dark" ? (
+                <Sun size={16} className="text-primary-content" />
+              ) : (
+                <Moon size={16} className="text-primary-content" />
+              )}
+            </button>
+
+            {/* Desktop Auth */}
+            {user ? (
+              <button
+                onClick={() => navigate("/profile")}
+                className="hidden md:flex btn btn-sm btn-circle overflow-hidden shadow-none hover:ring-1 hover:ring-offset-2 hover:ring-base-300 cursor-pointer btn-primary"
+              >
+                <img
+                  src={`https://placehold.co/600x400?text=${getInitials(user?.name) || "KS"}`}
+                  alt="avatar"
+                  className="w-full h-full object-cover object-center"
+                />
+              </button>
+            ) : (
+              <button
+                onClick={() => navigate("/login")}
+                className="hidden md:flex btn btn-primary btn-sm rounded-full px-4"
+              >
+                Login
+              </button>
+            )}
+
+            {/* Mobile Dropdown Menu Button */}
+            <button
+              onClick={() => setIsMobilemenuOpen(!isMobileMenuOpen)}
+              className="lg:hidden btn btn-outline btn-soft border-none btn-circle btn-xs text-primary-content transition-transform duration-200"
+              title="Toggle Menu"
+            >
+              {isMobileMenuOpen ? <X size={18} /> : <FiMenu size={18} />}
+            </button>
+          </div>
+        </div>
+
+        {/* Mobile Dropdown Menu style from user's request */}
+        <AnimatePresence>
+          {isMobileMenuOpen && (
+            <motion.div
+              initial={{ opacity: 0, y: -40 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -40 }}
+              transition={{ duration: 0.3 }}
+              className="lg:hidden mt-3 bg-primary backdrop-blur-lg rounded-2xl shadow-xl border border-white/20 overflow-hidden text-primary-content absolute w-full"
+            >
+              <div className="p-4 space-y-2">
+                {/* Dynamic Navigation Links */}
+                {navigation.map((item) => (
+                  <Link
+                    key={item.path}
+                    to={item.path}
+                    onClick={() => setIsMobilemenuOpen(false)}
+                    className={`block px-4 py-3 rounded-xl hover:bg-white/10 transition-colors font-semibold ${
+                      location === item.path ? "bg-white/15 text-white" : "text-white/80"
+                    }`}
+                  >
+                    {item.title}
+                  </Link>
+                ))}
+
+                {/* Theme Toggle */}
+                <button
+                  onClick={toggleTheme}
+                  className="w-full px-4 py-3 rounded-xl hover:bg-white/10 transition-colors flex items-center gap-3 font-semibold text-white/90"
+                >
+                  <span className="p-2 rounded-lg bg-white/10">
+                    {theme === "dark" ? <Sun size={16} /> : <Moon size={16} />}
+                  </span>
+                  <span>{theme === "dark" ? "Light Mode" : "Dark Mode"}</span>
+                </button>
+
+                {/* Language (Mock Selector matching user design layout) */}
+                <button className="w-full px-4 py-3 rounded-xl hover:bg-white/10 transition-colors flex items-center gap-3 font-semibold text-white/90">
+                  <span className="p-2 rounded-lg bg-white/10">
+                    <Globe size={16} />
+                  </span>
+                  <span>English</span>
+                </button>
+
+                {/* Auth Buttons */}
+                {!user ? (
+                  <div className="pt-4 mt-4 border-t border-white/10 space-y-2">
+                    <button
+                      onClick={() => {
+                        navigate("/login");
+                        setIsMobilemenuOpen(false);
+                      }}
+                      className="w-full px-4 py-3 bg-white/10 border border-white/20 text-white font-semibold rounded-xl hover:bg-white/20 transition-all"
+                    >
+                      Login
+                    </button>
+
+                    <button
+                      onClick={() => {
+                        navigate("/login");
+                        setIsMobilemenuOpen(false);
+                      }}
+                      className="w-full px-4 py-3 bg-white text-primary font-semibold rounded-xl hover:bg-white/90 transition-all"
+                    >
+                      Register
+                    </button>
+                  </div>
+                ) : (
+                  <div className="pt-4 mt-4 border-t border-white/10 space-y-2">
+                    <div className="flex items-center gap-3 bg-white/10 p-3 rounded-xl border border-white/15">
+                      <img
+                        src={`https://placehold.co/100x100?text=${getInitials(user.name)}`}
+                        className="w-10 h-10 rounded-full border border-white/20 shrink-0"
+                        alt="avatar"
+                      />
+                      <div className="text-left">
+                        <div className="font-bold text-sm text-white">{user.name}</div>
+                        <div className="text-xs text-white/70 truncate max-w-[180px]">{user.email}</div>
+                      </div>
+                    </div>
+                    <button
+                      onClick={() => {
+                        setIsMobilemenuOpen(false);
+                        navigate("/profile");
+                      }}
+                      className="w-full px-4 py-3 bg-white text-primary font-semibold rounded-xl hover:bg-white/90 transition-all"
+                    >
+                      Profile
+                    </button>
+                  </div>
+                )}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

package/templates/production-fullstack/client/src/components/ui/Loading.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import LottieAnimation from "../shared/LottieIcon";
+import loader from "../../assets/animations/loading.json";
+
+const Loading = ({
+  className = "w-60 h-60",
+  bgClass = "bg-base-100",
+  animationData = loader,
+}) => {
+  return (
+    <div
+      className={`absolute inset-0 flex items-center justify-center z-50 ${bgClass} max-h-dvh`}
+    >
+      <LottieAnimation animation={animationData} className={className} />
+    </div>
+  );
+};
+
+export default Loading;

package/templates/production-fullstack/client/src/components/ui/Modal.tsx

@@ -0,0 +1,106 @@
+import { useEffect, ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { IoClose } from "react-icons/io5";
+
+export interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  children: ReactNode;
+  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+  closeOnBackdrop?: boolean;
+  closeOnEsc?: boolean;
+  showCloseButton?: boolean;
+  footer?: ReactNode;
+}
+
+const sizes = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-2xl",
+  "2xl": "max-w-4xl",
+  full: "max-w-7xl",
+};
+
+const Modal = ({
+  open,
+  onClose,
+  title,
+  children,
+  size = "md",
+  closeOnBackdrop = true,
+  closeOnEsc = true,
+  showCloseButton = true,
+  footer,
+}: ModalProps) => {
+  useEffect(() => {
+    if (!open || !closeOnEsc) return;
+
+    const handleKeyDown = (e) => {
+      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
+          w-full
+          ${sizes[size]}
+          rounded-2xl
+          bg-base-100
+          shadow-2xl
+          border border-base-300
+          animate-in zoom-in-95 fade-in duration-200
+        `}
+      >
+        {/* 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>
+
+          {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">
+          {children}
+        </div>
+
+        {/* Footer */}
+        {footer && (
+          <div className="border-t border-base-300 px-6 py-4">
+            {footer}
+          </div>
+        )}
+      </div>
+    </div>,
+    document.body,
+  );
+};
+
+export default Modal;