@imksh/create 1.0.0

package/templates/mern-ts/client/src/components/common/ToggleSwitch.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { motion } from "motion/react";
+
+const ToggleSwitch = ({ checked, onChange, label }) => {
+  return (
+    <div
+      className="flex items-center gap-3 cursor-pointer select-none w-fit group"
+      onClick={() => onChange(!checked)}
+    >
+      <span className="text-sm font-bold">{label}</span>
+      <div
+        className={`w-12 h-6 flex items-center rounded-full p-1 transition-all duration-300 shadow-inner border ${
+          checked
+            ? "bg-gradient-to-r from-emerald-400 to-cyan-500 border-transparent shadow-emerald-500/20"
+            : "bg-base-300 border-base-300/50"
+        }`}
+      >
+        <motion.div
+          className={`w-4 h-4 rounded-full shadow-sm ${
+            checked ? "bg-white" : "bg-base-content/40"
+          }`}
+          layout
+          initial={false}
+          animate={{
+            x: checked ? 24 : 0,
+          }}
+          transition={{
+            type: "spring",
+            stiffness: 500,
+            damping: 30,
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ToggleSwitch;

package/templates/mern-ts/client/src/components/common/Unauthorized.tsx

@@ -0,0 +1,76 @@
+import { motion } from "framer-motion";
+import { Link } from "react-router-dom";
+import { FaArrowLeft, FaLock } from "react-icons/fa6";
+
+const Unauthorized = () => {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-base-100 px-6">
+      <div className="max-w-lg text-center">
+        <motion.div
+          initial={{ scale: 0 }}
+          animate={{ scale: 1 }}
+          transition={{
+            type: "spring",
+            stiffness: 180,
+            damping: 12,
+          }}
+          className="mx-auto mb-6 w-24 h-24 rounded-full bg-warning/15 flex items-center justify-center"
+        >
+          <FaLock className="text-5xl text-warning" />
+        </motion.div>
+
+        <motion.h1
+          initial={{ opacity: 0, y: -15 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="text-7xl font-black text-warning"
+        >
+          401
+        </motion.h1>
+
+        <motion.h2
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.15 }}
+          className="mt-4 text-3xl font-bold"
+        >
+          Unauthorized
+        </motion.h2>
+
+        <motion.p
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 0.7 }}
+          transition={{ delay: 0.3 }}
+          className="mt-3 text-base-content/70"
+        >
+          You don't have permission to access this page. Please sign in with an
+          authorized account.
+        </motion.p>
+
+        <motion.div
+          initial={{ opacity: 0, y: 25 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.45 }}
+          className="mt-8 flex flex-wrap justify-center gap-3"
+        >
+          <Link to="/login" className="btn btn-warning">
+            Sign In
+          </Link>
+
+          <Link to="/" className="btn btn-outline">
+            Home
+          </Link>
+
+          <button
+            onClick={() => window.history.back()}
+            className="btn btn-ghost gap-2"
+          >
+            <FaArrowLeft />
+            Go Back
+          </button>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+export default Unauthorized;

package/templates/mern-ts/client/src/components/layout/ProtectedRoute.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Navigate } from "react-router-dom";
+import { useAuthStore } from "../../store/useAuthStore";
+import Loading from "../common/Loading";
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+  role?: string;
+}
+
+const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children, role }) => {
+  const { user, isCheckingAuth } = useAuthStore();
+
+  if (isCheckingAuth) return <Loading />;
+
+  if (!user) return <Navigate to="/login" />;
+
+  if (role && user.role !== role) return <Navigate to="/" />;
+
+  return children;
+};
+
+export default ProtectedRoute;

package/templates/mern-ts/client/src/components/layout/PublicLayout.tsx

@@ -0,0 +1,13 @@
+import { Outlet } from "react-router-dom";
+import Header from "../ui/Header";
+
+const PublicLayout = () => {
+  return (
+    <>
+      <Header />
+      <Outlet />
+    </>
+  );
+};
+
+export default PublicLayout;

package/templates/mern-ts/client/src/components/layout/SidebarLayout.tsx

@@ -0,0 +1,37 @@
+import { useEffect } from "react";
+import { Outlet, useLocation } from "react-router-dom";
+import SidebarHeader from "../ui/SidebarHeader";
+import Sidebar from "../ui/sidebar";
+import { useUiStore } from "../../store/useUiStore";
+import appConfig from "../../config/appConfig";
+
+const SidebarLayout = () => {
+  const { headerTitle, headerActions, setHeaderTitle, setHeaderActions } =
+    useUiStore();
+  const { pathname } = useLocation();
+
+  // Reset header title and actions whenever the route shifts
+  useEffect(() => {
+    setHeaderTitle(appConfig.app.name);
+    setHeaderActions(null);
+  }, [pathname, setHeaderTitle, setHeaderActions]);
+
+  return (
+    <div className="flex h-screen overflow-hidden">
+      <Sidebar />
+
+      <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
+        >
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+};
+
+export default SidebarLayout;

package/templates/mern-ts/client/src/components/modals/ConfirmModal.tsx

@@ -0,0 +1,135 @@
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+import {
+  FaTriangleExclamation,
+  FaCircleInfo,
+  FaCircleCheck,
+  FaCircleXmark,
+} from "react-icons/fa6";
+
+const variants = {
+  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",
+  },
+};
+
+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,
+}) => {
+  useEffect(() => {
+    if (!open || !closeOnEsc) return;
+
+    const handleKeyDown = (e) => {
+      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] || variants.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/mern-ts/client/src/components/modals/Modal.tsx

@@ -0,0 +1,94 @@
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+import { IoClose } from "react-icons/io5";
+
+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,
+}) => {
+  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;

package/templates/mern-ts/client/src/components/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/mern-ts/client/src/components/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/mern-ts/client/src/components/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/mern-ts/client/src/components/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/mern-ts/client/src/components/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/mern-ts/client/src/components/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/mern-ts/client/src/components/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;