@imksh/create 1.0.25 → 1.0.26

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

@@ -0,0 +1,34 @@
+import { FiMenu } from "react-icons/fi";
+import { useUiStore } from "../../store/useUiStore";
+import type { ReactNode } from "react";
+
+const SidebarHeader = ({
+  title = "Dashboard",
+  actions = null,
+}: {
+  title?: string;
+  actions?: ReactNode;
+}) => {
+  const { toggleSidebar } = useUiStore();
+
+  return (
+    <header className="sticky top-0 z-30 h-16 bg-base-200 backdrop-blur border-b border-base-300 flex items-center justify-between px-4 lg:px-6">
+      <div className="flex items-center gap-3">
+        <button
+          onClick={toggleSidebar}
+          className="btn btn-square border-none bg-base-200 shadow-none text-base-content lg:hidden"
+        >
+          <FiMenu size={22} />
+        </button>
+
+        <h1 className="text-xl font-bold">{title}</h1>
+      </div>
+
+      <div className="flex items-center gap-2">
+        {actions}
+      </div>
+    </header>
+  );
+};
+
+export default SidebarHeader;

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

@@ -0,0 +1,118 @@
+import React from "react";
+import TableSkeleton from "../shared/skeletons/common/TableSkeleton";
+
+export interface TableColumn<T = any> {
+  header: string;
+  accessor?: keyof T | string;
+  render?: (value: any, row: T, index: number) => React.ReactNode;
+}
+
+interface TableProps<T = any> {
+  columns: TableColumn<T>[];
+  data: T[];
+  loading?: boolean;
+  onRowClick?: ((row: T) => void) | null;
+  emptyMessage?: React.ReactNode;
+  currentPage?: number;
+  totalPages?: number;
+  onPageChange?: ((page: number) => void) | null;
+}
+
+const Table = <T extends Record<string, any>>({
+  columns = [],
+  data = [],
+  loading = false,
+  onRowClick = null,
+  emptyMessage = "No data available",
+  currentPage = 1,
+  totalPages = 1,
+  onPageChange = null,
+}: TableProps<T>) => {
+  if (loading) {
+    return <TableSkeleton rows={5} columns={columns.length || 4} />;
+  }
+
+  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">
+            <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"
+                >
+                  {col.header}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-base-300 bg-base-100">
+            {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" : ""
+                  }`}
+                >
+                  {columns.map((col, colIndex) => {
+                    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"
+                      >
+                        {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>
+      {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">
+          <div className="text-xs text-base-content/75 font-medium">
+            Page <span className="font-bold">{currentPage}</span> of{" "}
+            <span className="font-bold">{totalPages}</span>
+          </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>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Table;

package/templates/production-fullstack/client/src/components/ui/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/production-fullstack/client/src/components/ui/sidebar.tsx

@@ -0,0 +1,152 @@
+import { NavLink } from "react-router-dom";
+import { IoClose } from "react-icons/io5";
+import { useUiStore } from "../../store/useUiStore";
+import { navigation } from "../../constants/navigation";
+import { ChevronLeft, ChevronRight, Moon, Sun } from "lucide-react";
+import appConfig from "../../config/index";
+import { motion, AnimatePresence } from "framer-motion";
+import useWindowSize from "../../hooks/useWindowSize";
+
+const Sidebar = () => {
+  const { open, close, collapsed, toggleCollapsed } = useUiStore();
+  const { theme, toggleTheme } = useUiStore();
+  const { width } = useWindowSize();
+  const isMobile = width < 1024; // lg breakpoint
+
+  const showSidebar = !isMobile || open;
+
+  return (
+    <>
+      {/* Overlay with AnimatePresence */}
+      <AnimatePresence>
+        {isMobile && open && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="fixed inset-0 bg-base-100/40 z-40 lg:hidden"
+            onClick={close}
+          />
+        )}
+      </AnimatePresence>
+
+      {/* Sidebar with AnimatePresence */}
+      <AnimatePresence>
+        {showSidebar && (
+          <motion.aside
+            initial={isMobile ? { x: "-100%" } : false}
+            animate={{ x: 0 }}
+            exit={isMobile ? { x: "-100%" } : undefined}
+            transition={{ type: "tween", duration: 0.25, ease: "easeInOut" }}
+            className={`
+              fixed lg:static top-0 left-0 z-50
+              h-screen bg-base-200 border-r border-base-300
+              flex flex-col overflow-hidden
+              transition-[width] duration-300
+              ${collapsed ? "w-20" : "w-[75%] md:w-[16%] md:max-w-60"}
+            `}
+          >
+            {/* Header */}
+            <div className="h-16 border-b border-base-300 flex items-center justify-between px-5">
+              <div className="flex items-center gap-3">
+                {appConfig.app.img ? (
+                  <img
+                    src={appConfig.app.img}
+                    alt=""
+                    className="w-8 h-8 rounded-lg"
+                  />
+                ) : (
+                  <div className="flex items-center">
+                    <div className="bg-primary w-8 h-8 rounded-lg flex items-center justify-center text-primary-content font-bold">
+                      {appConfig.app.name.charAt(0)}
+                    </div>
+                  </div>
+                )}
+                <h1
+                  className={`text-xl font-black text-primary whitespace-nowrap overflow-hidden ${collapsed ? "hidden" : ""}`}
+                >
+                  {appConfig.app.name}
+                </h1>
+              </div>
+
+              <button
+                className={`btn btn-sm btn-circle btn-ghost md:hidden ${collapsed ? "hidden" : ""}`}
+                onClick={close}
+              >
+                <IoClose size={20} />
+              </button>
+            </div>
+
+            {/* Navigation */}
+            <nav className="flex-1 overflow-y-auto p-2.5 space-y-1" data-lenis-prevent>
+              {navigation.map((item) => {
+                const Icon = item.icon;
+
+                return (
+                  <NavLink
+                    key={item.path}
+                    to={item.path}
+                    onClick={isMobile ? close : undefined}
+                    className={({ isActive }) =>
+                      `flex items-center gap-3 rounded-box px-4 py-3 transition-all h-12 
+                      ${
+                        isActive
+                          ? "bg-primary text-primary-content"
+                          : "hover:bg-base-300"
+                      } ${collapsed ? "justify-center px-0" : ""}`
+                    }
+                    title={collapsed ? item.title : ""}
+                  >
+                    <Icon
+                      size={18}
+                      className={`shrink-0 ${collapsed && "mr-auto"}`}
+                    />
+
+                    {!collapsed && (
+                      <span className="font-medium transition-all duration-300">
+                        {item.title}
+                      </span>
+                    )}
+                  </NavLink>
+                );
+              })}
+            </nav>
+
+            {/* Footer with Collapse Button */}
+            <button
+              onClick={toggleTheme}
+              className={`w-full flex items-center gap-3 px-3 py-2.5 md:px-4 text-sm font-semibold transition-all duration-150 text-base-content/60 hover:text-base-content hover:bg-base-300/60 justify-between rounded-none ${collapsed ? "justify-center" : ""}`}
+              title="Toggle Theme"
+            >
+              {!collapsed && <span>{theme === "dark" ? "Dark" : "Light"}</span>}
+              <span className="btn btn-xs btn-ghost btn-circle ">
+                {theme === "dark" ? (
+                  <Sun size={16} className="shrink-0 " />
+                ) : (
+                  <Moon size={16} className="shrink-0" />
+                )}
+              </span>
+            </button>
+            <div className="p-3 border-t border-base-300/50 shrink-0 flex flex-col gap-2">
+              <button
+                onClick={toggleCollapsed}
+                className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-semibold transition-all duration-150 text-base-content/60 hover:text-base-content hover:bg-base-300/60 ${collapsed ? "justify-center" : ""}`}
+                title={collapsed ? "Expand Sidebar" : "Collapse Sidebar"}
+              >
+                {collapsed ? (
+                  <ChevronRight size={18} className="shrink-0 mr-auto" />
+                ) : (
+                  <ChevronLeft size={18} className="shrink-0" />
+                )}
+                {!collapsed && <span className="truncate">Collapse</span>}
+              </button>
+            </div>
+          </motion.aside>
+        )}
+      </AnimatePresence>
+    </>
+  );
+};
+
+export default Sidebar;

package/templates/production-fullstack/client/src/config/index.ts

@@ -0,0 +1,44 @@
+const appConfig = {
+  app: {
+    name: "React App",
+    logo: "./logo.png",
+    shortName: "React",
+    description: "A React application built with @imksh/create",
+    version: "1.0.0",
+    author: "Karan Sharma",
+  },
+
+  api: {
+    baseURL: import.meta.env.VITE_API_URL,
+    timeout: 30000,
+  },
+
+  routes: {
+    home: "/",
+    login: "/login",
+    profile: "/profile",
+  },
+
+  pagination: {
+    pageSize: 10,
+  },
+
+  github: {
+    repository: "",
+  },
+
+  social: {
+    website: "",
+    linkedin: "",
+    github: "",
+    twitter: "",
+  },
+
+  features: {
+    darkMode: true,
+    notifications: true,
+    sidebar: true,
+  },
+};
+
+export default appConfig;

package/templates/production-fullstack/client/src/constants/navigation.ts

@@ -0,0 +1,14 @@
+import { FaHome, FaUser, FaCog, FaBook } from "react-icons/fa";
+
+export const navigation = [
+  {
+    title: "Home",
+    path: "/",
+    icon: FaHome,
+  },
+  {
+    title: "Profile",
+    path: "/profile",
+    icon: FaUser,
+  },
+];

package/templates/production-fullstack/client/src/features/auth/api/authService.ts

@@ -0,0 +1,19 @@
+import { api } from "../../../lib/axios";
+
+export const authService = {
+  sendOtp: (email: string) =>
+    api.post("/auth/send-otp", { email }),
+
+  signup: (name: string, email: string, password: string, otp: string, role = "user") =>
+    api.post("/auth/signup", { name, email, password, otp, role }),
+
+  login: (email: string, password: string) =>
+    api.post("/auth/login", { email, password }),
+
+  getMe: () => api.get("/auth/me"),
+
+  updateMe: (data: any) => api.put("/auth/me", data),
+
+  logout: () =>
+    api.post("/auth/logout"),
+};

package/templates/production-fullstack/client/src/features/auth/pages/Login.tsx

@@ -0,0 +1,233 @@
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import {
+  Mail,
+  Lock,
+  User,
+  Eye,
+  EyeOff,
+  ArrowLeft,
+  GraduationCap,
+} from "lucide-react";
+import { useAuthStore } from "../store/useAuthStore";
+import Loading from "../../../components/ui/Loading";
+
+const Login = () => {
+  const navigate = useNavigate();
+  const { login, signup, sendOtp, loading, isCheckingAuth, error, user } = useAuthStore();
+
+  const [mode, setMode] = useState("login"); // "login" | "signup"
+  const [showPassword, setShowPassword] = useState(false);
+  const [form, setForm] = useState({ name: "", email: "", password: "", otp: "" });
+  const [otpSent, setOtpSent] = useState(false);
+
+  const handleChange = (e) =>
+    setForm((prev) => ({ ...prev, [e.target.name]: e.target.value }));
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    let ok;
+    if (mode === "login") {
+      ok = await login(form.email, form.password);
+      if (ok) navigate("/");
+    } else {
+      if (!otpSent) {
+        ok = await sendOtp(form.email);
+        if (ok) setOtpSent(true);
+      } else {
+        ok = await signup(form.name, form.email, form.password, form.otp);
+        if (ok) navigate("/");
+      }
+    }
+  };
+
+  if (isCheckingAuth || user) {
+    return <Loading />;
+  }
+
+  return (
+    <div className="min-h-dvh w-screen bg-base-100 text-base-content flex items-center justify-center p-4 font-sans">
+      <div className="relative w-full max-w-md">
+        {/* Card */}
+        <div className="bg-base-200/80 backdrop-blur-md border border-base-300 rounded-3xl p-8 shadow-2xl">
+          {/* Logo & title */}
+          <div className="flex flex-col items-center gap-2 mb-8">
+            <div className="w-12 h-12 rounded-2xl bg-primary/15 border border-primary/20 flex items-center justify-center text-2xl shadow-inner text-primary font-bold">
+              <GraduationCap size={24} />
+            </div>
+            <h1 className="text-2xl font-black tracking-tight">
+              {mode === "login" ? "Welcome back" : "Create account"}
+            </h1>
+            <p className="text-xs text-base-content/50 text-center">
+              {mode === "login"
+                ? "Sign in to continue your learning journey"
+                : "Join LMS and start learning the MERN stack"}
+            </p>
+          </div>
+
+          {/* Tab switcher */}
+          <div className="tabs tabs-box bg-base-300/50 p-1 rounded-2xl w-full flex mb-6 border border-base-300">
+            <button
+              type="button"
+              onClick={() => {
+                setMode("login");
+                setOtpSent(false);
+              }}
+              className={`tab flex-1 rounded-xl text-sm font-bold transition-all ${
+                mode === "login"
+                  ? "tab-active bg-primary text-primary-content!"
+                  : ""
+              }`}
+            >
+              Sign In
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setMode("signup");
+                setOtpSent(false);
+              }}
+              className={`tab flex-1 rounded-xl text-sm font-bold transition-all ${
+                mode === "signup"
+                  ? "tab-active bg-primary text-primary-content!"
+                  : ""
+              }`}
+            >
+              Sign Up
+            </button>
+          </div>
+
+          {/* Error */}
+          {error && (
+            <div className="alert alert-error alert-soft rounded-2xl text-xs mb-4 p-3 border border-error/20">
+              ⚠️ {error}
+            </div>
+          )}
+
+          {/* Form */}
+          <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+            {/* Name — signup only */}
+            {mode === "signup" && (
+              <label className="input input-bordered rounded-2xl flex items-center gap-2 bg-base-100 border-base-300 focus-within:border-primary transition-colors">
+                <User size={16} className="text-base-content/40 shrink-0" />
+                <input
+                  name="name"
+                  type="text"
+                  placeholder="Full name"
+                  value={form.name}
+                  onChange={handleChange}
+                  required
+                  className="grow text-sm bg-transparent outline-none placeholder:text-base-content/30"
+                />
+              </label>
+            )}
+
+            {/* Email */}
+            <label className="input input-bordered rounded-2xl flex items-center gap-2 bg-base-100 border-base-300 focus-within:border-primary transition-colors">
+              <Mail size={16} className="text-base-content/40 shrink-0" />
+              <input
+                name="email"
+                type="email"
+                placeholder="Email address"
+                value={form.email}
+                onChange={handleChange}
+                required
+                className="grow text-sm bg-transparent outline-none placeholder:text-base-content/30"
+              />
+            </label>
+
+            {/* Password */}
+            <label className="input input-bordered rounded-2xl flex items-center gap-2 bg-base-100 border-base-300 focus-within:border-primary transition-colors">
+              <Lock size={16} className="text-base-content/40 shrink-0" />
+              <input
+                name="password"
+                type={showPassword ? "text" : "password"}
+                placeholder="Password"
+                value={form.password}
+                onChange={handleChange}
+                required
+                minLength={6}
+                className="grow text-sm bg-transparent outline-none placeholder:text-base-content/30"
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword((p) => !p)}
+                className="text-base-content/40 hover:text-base-content transition-colors"
+              >
+                {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+              </button>
+            </label>
+
+            {/* OTP Input - only visible when OTP is sent during signup */}
+            {mode === "signup" && otpSent && (
+              <label className="input input-bordered rounded-2xl flex items-center gap-2 bg-base-100 border-base-300 focus-within:border-primary transition-colors">
+                <Lock size={16} className="text-base-content/40 shrink-0" />
+                <input
+                  name="otp"
+                  type="text"
+                  placeholder="Enter OTP"
+                  value={form.otp}
+                  onChange={handleChange}
+                  required
+                  className="grow text-sm bg-transparent outline-none placeholder:text-base-content/30"
+                />
+              </label>
+            )}
+
+            {/* Submit */}
+            <button
+              type="submit"
+              disabled={loading}
+              className="btn btn-primary rounded-2xl font-bold mt-2 w-full shadow-lg hover:scale-[1.01] active:scale-[0.99] transition-transform"
+            >
+              {loading ? (
+                <span className="loading loading-spinner loading-sm" />
+              ) : mode === "login" ? (
+                "Sign In →"
+              ) : otpSent ? (
+                "Verify & Create Account →"
+              ) : (
+                "Send OTP →"
+              )}
+            </button>
+          </form>
+
+          {/* Footer note */}
+          <p className="text-center text-xs text-base-content/40 mt-6">
+            {mode === "login" ? (
+              <>
+                New here?{" "}
+                <button
+                  type="button"
+                  onClick={() => {
+                    setMode("signup");
+                    setOtpSent(false);
+                  }}
+                  className="text-primary font-bold hover:underline"
+                >
+                  Create an account
+                </button>
+              </>
+            ) : (
+              <>
+                Already have an account?{" "}
+                <button
+                  type="button"
+                  onClick={() => {
+                    setMode("login");
+                    setOtpSent(false);
+                  }}
+                  className="text-primary font-bold hover:underline"
+                >
+                  Sign in
+                </button>
+              </>
+            )}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Login;