@imksh/create 1.0.0

package/templates/react/public/manifest.json

@@ -0,0 +1,24 @@
+{
+  "name": "React App",
+  "short_name": "React",
+  "description": "A React application built with @imksh/create",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#1d232a",
+  "theme_color": "#2563eb",
+  "orientation": "any",
+  "icons": [
+    {
+      "src": "/favicon.ico",
+      "sizes": "192x192",
+      "type": "image/x-icon",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/favicon.svg",
+      "sizes": "512x512",
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
+    }
+  ]
+}

package/templates/react/public/sw.js

@@ -0,0 +1,56 @@
+const CACHE_NAME = "React App";
+const ASSETS = ["/", "/index.html", "/logo.png", "/manifest.json"];
+
+// Install Event
+self.addEventListener("install", (e) => {
+  e.waitUntil(
+    caches
+      .open(CACHE_NAME)
+      .then((cache) => {
+        return cache.addAll(ASSETS);
+      })
+      .then(() => self.skipWaiting()),
+  );
+});
+
+// Activate Event
+self.addEventListener("activate", (e) => {
+  e.waitUntil(
+    caches
+      .keys()
+      .then((keys) => {
+        return Promise.all(
+          keys.map((key) => {
+            if (key !== CACHE_NAME) {
+              return caches.delete(key);
+            }
+          }),
+        );
+      })
+      .then(() => self.clients.claim()),
+  );
+});
+
+// Fetch Event (Network First, fallback to cache)
+self.addEventListener("fetch", (e) => {
+  // Only handle GET requests and skip chrome-extension/dev-tools queries
+  if (
+    e.request.method !== "GET" ||
+    !e.request.url.startsWith(self.location.origin)
+  ) {
+    return;
+  }
+
+  e.respondWith(
+    fetch(e.request)
+      .then((res) => {
+        // Cache clone of successful network response
+        const resClone = res.clone();
+        caches.open(CACHE_NAME).then((cache) => {
+          cache.put(e.request, resClone);
+        });
+        return res;
+      })
+      .catch(() => caches.match(e.request)),
+  );
+});

package/templates/react/src/App.jsx

@@ -0,0 +1,68 @@
+import React, { useEffect } from "react";
+import { Routes, Route } from "react-router-dom";
+import { Toaster } from "react-hot-toast";
+import Home from "./pages/Home";
+import Login from "./pages/Login";
+import Profile from "./pages/Profile";
+import Scroll from "./components/common/Scroll";
+import Loading from "./components/common/Loading";
+import useLenis from "./hooks/useLenis";
+import { useAuthStore } from "./store/useAuthStore";
+import NotFound from "./components/common/NotFound";
+import Unauthorized from "./components/common/Unauthorized";
+import ProtectedRoute from "./components/layout/ProtectedRoute";
+import PublicLayout from "./components/layout/PublicLayout";
+import SidebarLayout from "./components/layout/SidebarLayout";
+
+const App = () => {
+  const { getMe, loading } = useAuthStore();
+
+  // Initialize Lenis smooth scroll
+  // useLenis();
+
+  // useEffect(() => {
+  //   getMe();
+  // }, []);
+
+  // if (loading) {
+  //   return (
+  //     <div className="flex h-screen items-center justify-center bg-base-100">
+  //       <Loading />
+  //     </div>
+  //   );
+  // }
+
+  return (
+    <div className="min-h-screen bg-base-100 text-base-content">
+      <Toaster position="top-right" />
+      <Scroll />
+      <Routes>
+        <Route path="/" element={<Home />} />
+
+        {/* <Route element={<PublicLayout />}>
+          <Route path="/" element={<Home />} />
+        </Route> */}
+
+        {/* Auth Page Routes */}
+        <Route path="/login" element={<Login />} />
+        <Route path="/unauthorized" element={<Unauthorized />} />
+
+        {/* Protected Routes wrapped in ProtectedRoute and SidebarLayout */}
+        <Route
+          element={
+            <ProtectedRoute>
+              <SidebarLayout />
+            </ProtectedRoute>
+          }
+        >
+          <Route path="/profile" element={<Profile />} />
+        </Route>
+
+        {/* Fallback Route */}
+        <Route path="/*" element={<NotFound />} />
+      </Routes>
+    </div>
+  );
+};
+
+export default App;

package/templates/react/src/assets/animations/loading.json

@@ -0,0 +1 @@
+{"v":"4.6.8","fr":29.9700012207031,"ip":0,"op":40.0000016292334,"w":256,"h":256,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 3","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":20,"s":[208.6,127.969,0],"e":[208.6,88,0],"to":[0,-6.66145849227905,0],"ti":[0,-0.00520833348855,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":30,"s":[208.6,88,0],"e":[208.6,128,0],"to":[0,0.00520833348855,0],"ti":[0,-6.66666650772095,0]},{"t":40.0000016292334}]},"a":{"a":0,"k":[-70,-0.5,0]},"s":{"a":0,"k":[75,75,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[33.75,34.5]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":0,"k":[0.9843137,0.5490196,0,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-70.125,-0.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":300.00001221925,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 2","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":15,"s":[168.6,128,0],"e":[168.6,88,0],"to":[0,-6.66666650772095,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":25,"s":[168.6,88,0],"e":[168.6,128,0],"to":[0,0,0],"ti":[0,-6.66666650772095,0]},{"t":35.0000014255792}]},"a":{"a":0,"k":[-70,-0.5,0]},"s":{"a":0,"k":[75,75,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[33.75,34.5]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":0,"k":[0.9921569,0.8470588,0.2078431,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-70.125,-0.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":300.00001221925,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 1","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":10,"s":[128.594,127.969,0],"e":[128.594,88,0],"to":[0,-6.66145849227905,0],"ti":[0,-0.00520833348855,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":20,"s":[128.594,88,0],"e":[128.594,128,0],"to":[0,0.00520833348855,0],"ti":[0,-6.66666650772095,0]},{"t":30.0000012219251}]},"a":{"a":0,"k":[-70,-0.5,0]},"s":{"a":0,"k":[75,75,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[33.75,34.5]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":0,"k":[0.2627451,0.627451,0.2784314,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-70.125,-0.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":300.00001221925,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 4","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":5,"s":[88.6,127.969,0],"e":[88.6,88,0],"to":[0,-6.66145849227905,0],"ti":[0,-0.00520833348855,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":15,"s":[88.6,88,0],"e":[88.6,128,0],"to":[0,0.00520833348855,0],"ti":[0,-6.66666650772095,0]},{"t":25.0000010182709}]},"a":{"a":0,"k":[-70,-0.5,0]},"s":{"a":0,"k":[75,75,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[33.75,34.5]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":0,"k":[0.1176471,0.5333334,0.8980392,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-70.125,-0.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":300.00001221925,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":5,"ty":4,"nm":"Shape Layer 5","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":0,"s":[48.6,127.969,0],"e":[48.6,88,0],"to":[0,-6.66145849227905,0],"ti":[0,-0.00520833348855,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":10,"s":[48.6,88,0],"e":[48.6,128,0],"to":[0,0.00520833348855,0],"ti":[0,-6.66666650772095,0]},{"t":20.0000008146167}]},"a":{"a":0,"k":[-70,-0.5,0]},"s":{"a":0,"k":[75,75,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[33.75,34.5]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":0,"k":[0.8980392,0.2235294,0.2078431,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-70.125,-0.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":300.00001221925,"st":0,"bm":0,"sr":1}]}

package/templates/react/src/assets/data/navigation.js

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

package/templates/react/src/components/common/Breadcrumbs.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { ChevronRight } from "lucide-react";
+
+export const Breadcrumbs = ({ items }) => {
+  return (
+    <div className="flex items-center gap-1.5 text-sm font-bold text-base-content/50 flex-wrap">
+      {items.map((item, idx) => {
+        const isLast = idx === items.length - 1;
+        return (
+          <React.Fragment key={idx}>
+            {item.path && !isLast ? (
+              <Link to={item.path} className="hover:text-primary transition-colors">
+                {item.label}
+              </Link>
+            ) : (
+              <span className={isLast ? "text-base font-black text-base-content tracking-tight" : ""}>
+                {item.label}
+              </span>
+            )}
+            {!isLast && <ChevronRight size={14} className="text-base-content/30 shrink-0" />}
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+};

package/templates/react/src/components/common/Loading.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import LottieAnimation from "./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/react/src/components/common/LottieIcon.jsx

@@ -0,0 +1,36 @@
+import { memo, useEffect, useRef } from "react";
+import { useInView } from "framer-motion";
+import lottie from "lottie-web";
+
+const LottieIcon = memo(
+  ({ animation, className = "", loop = true, autoplay = true }) => {
+    const containerRef = useRef(null);
+
+    const isInView = useInView(containerRef, {
+      once: true,
+      margin: "100px",
+    });
+
+    useEffect(() => {
+      if (!isInView || !containerRef.current) return;
+
+      const instance = lottie.loadAnimation({
+        container: containerRef.current,
+        renderer: "svg",
+        loop,
+        autoplay,
+        animationData: animation,
+      });
+
+      return () => {
+        instance.destroy();
+      };
+    }, [animation, autoplay, loop, isInView]);
+
+    return <div ref={containerRef} className={className} />;
+  },
+);
+
+LottieIcon.displayName = "LottieIcon";
+
+export default LottieIcon;

package/templates/react/src/components/common/NotFound.jsx

@@ -0,0 +1,78 @@
+import { motion } from "framer-motion";
+import { Link } from "react-router-dom";
+import { FaArrowLeft, FaHouse } from "react-icons/fa6";
+
+const NotFound = () => {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-base-100 px-6">
+      <div className="max-w-lg text-center">
+        <motion.h1
+          initial={{ opacity: 0, scale: 0.6 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{
+            duration: 0.5,
+            type: "spring",
+            stiffness: 120,
+          }}
+          className="text-8xl md:text-9xl font-black text-primary"
+        >
+          404
+        </motion.h1>
+
+        <motion.h2
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.15 }}
+          className="mt-6 text-3xl font-bold"
+        >
+          Page Not Found
+        </motion.h2>
+
+        <motion.p
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 0.7 }}
+          transition={{ delay: 0.3 }}
+          className="mt-3 text-base-content/70"
+        >
+          Sorry, the page you're looking for doesn't exist or has been moved.
+        </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="/" className="btn btn-primary gap-2">
+            <FaHouse />
+            Home
+          </Link>
+
+          <button
+            onClick={() => window.history.back()}
+            className="btn btn-ghost gap-2"
+          >
+            <FaArrowLeft />
+            Go Back
+          </button>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{
+            opacity: [0.2, 0.6, 0.2],
+          }}
+          transition={{
+            repeat: Infinity,
+            duration: 2,
+          }}
+          className="mt-16 text-8xl font-black text-base-300 select-none"
+        >
+          ?
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+export default NotFound;

package/templates/react/src/components/common/PwaInstallPrompt.jsx

@@ -0,0 +1,72 @@
+import { useEffect, useState } from "react";
+import usePwaInstall from "../hooks/usePwaInstall";
+
+const DISMISS_KEY = "gradify_pwa_dismissed_at";
+const DISMISS_TTL_MS = 7 * 24 * 60 * 60 * 1000;
+
+const wasDismissedRecently = () => {
+  const raw = localStorage.getItem(DISMISS_KEY);
+  if (!raw) return false;
+  const dismissedAt = Number(raw);
+  if (!Number.isFinite(dismissedAt)) return false;
+  return Date.now() - dismissedAt < DISMISS_TTL_MS;
+};
+
+const PwaInstallPrompt = () => {
+  const { canInstall, isInstalled, promptInstall } = usePwaInstall();
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return undefined;
+    if (!canInstall || wasDismissedRecently() || isInstalled) {
+      setVisible(false);
+      return undefined;
+    }
+
+    setVisible(true);
+    return undefined;
+  }, [canInstall, isInstalled]);
+
+  const handleInstall = async () => {
+    const result = await promptInstall();
+    if (result?.outcome === "accepted") {
+      setVisible(false);
+      return;
+    }
+    localStorage.setItem(DISMISS_KEY, String(Date.now()));
+    setVisible(false);
+  };
+
+  const handleDismiss = () => {
+    localStorage.setItem(DISMISS_KEY, String(Date.now()));
+    setVisible(false);
+  };
+
+  if (!visible) return null;
+
+  return (
+    <div className="fixed bottom-5 right-5 z-50 w-[min(92vw,360px)] rounded-2xl border border-(--border-color) bg-(--card-bg) p-4 shadow-lg">
+      <p className="text-sm text-(--text-secondary)">
+        Install Gradify for faster access and offline-ready learning.
+      </p>
+      <div className="mt-3 flex items-center gap-2">
+        <button
+          type="button"
+          onClick={handleInstall}
+          className="rounded-xl bg-(--color-primary) px-4 py-2 text-sm font-semibold text-white hover:opacity-90"
+        >
+          Install App
+        </button>
+        <button
+          type="button"
+          onClick={handleDismiss}
+          className="rounded-xl border border-(--border-color) px-3 py-2 text-sm text-(--text-secondary) hover:bg-(--bg-muted)"
+        >
+          Not now
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default PwaInstallPrompt;

package/templates/react/src/components/common/SEO.jsx

@@ -0,0 +1,67 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+const SEO = ({
+  title,
+  description,
+  keywords,
+  canonical,
+  noIndex = false,
+}) => {
+  const location = useLocation();
+
+  useEffect(() => {
+    // TITLE
+    if (title) {
+      document.title = title;
+    }
+
+    // DESCRIPTION
+    if (description) {
+      let meta = document.querySelector("meta[name='description']");
+      if (!meta) {
+        meta = document.createElement("meta");
+        meta.name = "description";
+        document.head.appendChild(meta);
+      }
+      meta.content = description;
+    }
+
+    // KEYWORDS (optional)
+    if (keywords) {
+      let meta = document.querySelector("meta[name='keywords']");
+      if (!meta) {
+        meta = document.createElement("meta");
+        meta.name = "keywords";
+        document.head.appendChild(meta);
+      }
+      meta.content = keywords;
+    }
+
+    // CANONICAL
+    let link = document.querySelector("link[rel='canonical']");
+    if (!link) {
+      link = document.createElement("link");
+      link.rel = "canonical";
+      document.head.appendChild(link);
+    }
+
+    link.href =
+      canonical ||
+      `https://shreebaglamukhi.com${location.pathname}`;
+
+    // ROBOTS
+    let robots = document.querySelector("meta[name='robots']");
+    if (!robots) {
+      robots = document.createElement("meta");
+      robots.name = "robots";
+      document.head.appendChild(robots);
+    }
+
+    robots.content = noIndex ? "noindex,nofollow" : "index,follow";
+  }, [title, description, keywords, canonical, noIndex, location.pathname]);
+
+  return null;
+};
+
+export default SEO;

package/templates/react/src/components/common/Scroll.jsx

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from "react";
+import { useLocation, useNavigationType } from "react-router-dom";
+
+export default function ScrollRestoration() {
+  const { pathname, key } = useLocation();
+  const navigationType = useNavigationType();
+  const positions = useRef(new Map());
+
+  useEffect(() => {
+    const main = document.querySelector("main");
+    if (!main) return;
+
+    if (navigationType === "POP") {
+      main.scrollTop = positions.current.get(key) ?? 0;
+    } else {
+      main.scrollTop = 0;
+    }
+
+    return () => {
+      positions.current.set(key, main.scrollTop);
+    };
+  }, [key, pathname, navigationType]);
+
+  return null;
+}

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

@@ -0,0 +1,110 @@
+import React from "react";
+import TableSkeleton from "../skeletons/common/TableSkeleton";
+
+const Table = ({
+  columns = [],
+  data = [],
+  loading = false,
+  onRowClick = null,
+  emptyMessage = "No data available",
+  currentPage = 1,
+  totalPages = 1,
+  onPageChange = null,
+}) => {
+  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">
+      {/* Table Container */}
+      <div className="overflow-x-auto w-full">
+        <table className="table table-hover w-full min-w-full">
+          {/* Header */}
+          <thead className="bg-base-200/60 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-bold text-base-content/80 uppercase tracking-wider"
+                >
+                  {col.header}
+                </th>
+              ))}
+            </tr>
+          </thead>
+
+          {/* Body */}
+          <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] : undefined;
+                    return (
+                      <td
+                        key={col.accessor || 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>
+
+      {/* Pagination Footer */}
+      {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">
+          {/* Info text */}
+          <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>
+
+          {/* Page controls */}
+          <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;