@imksh/create 1.0.24 → 1.0.26

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

@@ -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 "./features/core/pages/Home";
+import Login from "./features/auth/pages/Login";
+import Profile from "./features/core/pages/Profile";
+import Scroll from "./components/shared/Scroll";
+import Loading from "./components/ui/Loading";
+import useLenis from "./hooks/useLenis";
+import { useAuthStore } from "./features/auth/store/useAuthStore";
+import NotFound from "./components/shared/NotFound";
+import Unauthorized from "./components/shared/Unauthorized";
+import ProtectedRoute from "./components/layout/ProtectedRoute";
+import PublicLayout from "./components/layout/PublicLayout";
+import SidebarLayout from "./components/layout/SidebarLayout";
+
+const App = () => {
+  const { getMe, isCheckingAuth } = useAuthStore();
+
+  // Initialize Lenis smooth scroll
+  // useLenis();
+
+  // useEffect(() => {
+  //   getMe();
+  // }, []);
+
+  // if (isCheckingAuth) {
+  //   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={<SidebarLayout />}>
+          <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/production-fullstack/client/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/production-fullstack/client/src/assets/data/navigation.ts

@@ -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/production-fullstack/client/src/components/layout/ProtectedRoute.tsx

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

package/templates/production-fullstack/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/production-fullstack/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/index";
+
+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/production-fullstack/client/src/components/shared/Breadcrumbs.tsx

@@ -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/production-fullstack/client/src/components/shared/LottieIcon.tsx

@@ -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/production-fullstack/client/src/components/shared/NotFound.tsx

@@ -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/production-fullstack/client/src/components/shared/PwaInstallPrompt.tsx

@@ -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/production-fullstack/client/src/components/shared/SEO.tsx

@@ -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/production-fullstack/client/src/components/shared/Scroll.tsx

@@ -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/production-fullstack/client/src/components/shared/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;