From 7163cdd735eaa565526071627f33349bae1b4fe2 Mon Sep 17 00:00:00 2001
From: sanjidarimi <sanjidarimi312@gmail.com>
Date: Sun, 10 May 2026 21:33:43 +0600
Subject: [PATCH] feat(admin): added dashboard comp.

---
 src/App.tsx                                   | 36 ++++----
 src/pages/Index.tsx                           |  5 +-
 .../components/dashboards/OverviewPage.tsx    | 27 ++++++
 .../admins/components/dashboards/Sidebar.tsx  | 83 +++++++++++++++++++
 .../admins/components/dashboards/Topbar.tsx   | 71 ++++++++++++++++
 src/pages/admins/layout/DashboardLayout.tsx   | 30 +++++++
 src/pages/admins/layout/MainLayout.tsx        | 15 ++++
 7 files changed, 252 insertions(+), 15 deletions(-)
 create mode 100644 src/pages/admins/components/dashboards/OverviewPage.tsx
 create mode 100644 src/pages/admins/components/dashboards/Sidebar.tsx
 create mode 100644 src/pages/admins/components/dashboards/Topbar.tsx
 create mode 100644 src/pages/admins/layout/DashboardLayout.tsx
 create mode 100644 src/pages/admins/layout/MainLayout.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 0c59713..3719e4a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,15 +3,16 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import { ThemeProvider } from "@/contexts/ThemeContext";
 import { AnimatePresence } from "framer-motion";
 import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
-import Footer from "./components/Footer";
-import Navbar from "./components/Navbar";
+import ScrollToTop from "./components/ScrollToTop";
+import DashboardLayout from "./pages/admins/layout/DashboardLayout";
+import MainLayout from "./pages/admins/layout/MainLayout";
 import Index from "./pages/Index";
 import NotFound from "./pages/NotFound";
+import { PrivacyPolicy } from "./pages/PrivacyPolicy";
 import ProjectDetails from "./pages/ProjectDetails";
 import Projects from "./pages/Projects";
 import { QueryProvider } from "./provider/QueryProvider";
-import { PrivacyPolicy } from "./pages/PrivacyPolicy";
-import ScrollToTop from "./components/ScrollToTop";
+import OverviewPage from "./pages/admins/components/dashboards/OverviewPage";
 
 function AnimatedRoutes() {
   const location = useLocation();
@@ -19,14 +20,23 @@ function AnimatedRoutes() {
   return (
     <AnimatePresence mode="wait">
       <Routes location={location} key={location.pathname}>
-        <Route path="/" element={<Index />} />
-        <Route path="/projects" element={<Projects />} />
-        <Route path="/projects/:id" element={<ProjectDetails />} />
-        {/* <Route path="/blog" element={<Blog />} />
+        {/* main layouts */}
+        <Route element={<MainLayout />}>
+          <Route path="/" element={<Index />} />
+          <Route path="/projects" element={<Projects />} />
+          <Route path="/projects/:id" element={<ProjectDetails />} />
+          {/* <Route path="/blog" element={<Blog />} />
         <Route path="/blog/:id" element={<BlogArticle />} /> */}
-        {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
+          {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
+          <Route path="/privacy" element={<PrivacyPolicy />} />
+        </Route>
+        {/* dashboard layouts */}
+        <Route path="/dashboard" element={<DashboardLayout />}>
+          <Route index element={<OverviewPage />} />
+    {/* <Route path="users" element={<Users />} />
+    <Route path="settings" element={<Settings />} /> */}
+        </Route>
         <Route path="*" element={<NotFound />} />
-        <Route path="/privacy" element={<PrivacyPolicy />} />
       </Routes>
     </AnimatePresence>
   );
@@ -36,13 +46,11 @@ const App = () => (
   <QueryProvider>
     <ThemeProvider>
       <TooltipProvider>
-    
         <Sonner />
         <BrowserRouter>
-        <ScrollToTop/>
-          <Navbar />
+          <ScrollToTop />
+
           <AnimatedRoutes />
-          <Footer />
         </BrowserRouter>
       </TooltipProvider>
     </ThemeProvider>
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index add3506..3403944 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -1,8 +1,9 @@
 import AboutSection from "@/components/AboutSection";
-import BlogSection from "@/components/BlogSection";
 import ContactSection from "@/components/ContactSection";
 import FAQSection from "@/components/FAQSection";
+import Footer from "@/components/Footer";
 import HeroSection from "@/components/HeroSection";
+import Navbar from "@/components/Navbar";
 import PageTransition from "@/components/PageTransition";
 import ProjectsSection from "@/components/ProjectsSection";
 import ServicesSection from "@/components/ServicesSection";
@@ -13,6 +14,7 @@ const Index = () => {
   return (
     <PageTransition>
       <div className="min-h-screen bg-background overflow-x-hidden">
+        <Navbar />
         <HeroSection />
         <ServicesSection />
         <ProjectsSection />
@@ -22,6 +24,7 @@ const Index = () => {
         {/* <BlogSection /> */}
         <FAQSection />
         <ContactSection />
+        <Footer />
       </div>
     </PageTransition>
   );
diff --git a/src/pages/admins/components/dashboards/OverviewPage.tsx b/src/pages/admins/components/dashboards/OverviewPage.tsx
new file mode 100644
index 0000000..3f5f885
--- /dev/null
+++ b/src/pages/admins/components/dashboards/OverviewPage.tsx
@@ -0,0 +1,27 @@
+export default function OverviewPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">Overview</h1>
+        <p className="text-muted-foreground">
+          Welcome back. Here is what's happening with your projects today.
+        </p>
+      </div>
+
+      {/* Example Content Grid */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        {[1, 2, 3, 4].map((i) => (
+          <div 
+            key={i} 
+            className="rounded-xl border border-border bg-card p-6 shadow-sm"
+          >
+            <div className="text-sm font-medium text-muted-foreground">Stat Title</div>
+            <div className="text-2xl font-bold">2,45{i}</div>
+          </div>
+        ))}
+      </div>
+
+      
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/admins/components/dashboards/Sidebar.tsx b/src/pages/admins/components/dashboards/Sidebar.tsx
new file mode 100644
index 0000000..15639c2
--- /dev/null
+++ b/src/pages/admins/components/dashboards/Sidebar.tsx
@@ -0,0 +1,83 @@
+
+import { cn } from "@/lib/utils";
+import {
+  BookOpen,
+  FolderKanban,
+  HelpCircle,
+  LayoutDashboard,
+  LogOut,
+  MessageSquareQuote,
+  User,
+  Users,
+} from "lucide-react";
+import { Link } from "react-router-dom";
+
+const navItems = [
+  { title: "Overview", icon: LayoutDashboard, href: "/" },
+  { title: "Manage Projects", icon: FolderKanban, href: "/dashboard/projects" },
+  { title: "Manage Team", icon: Users, href: "/dashboard/team" },
+  {
+    title: "Manage Client Review",
+    icon: MessageSquareQuote,
+    href: "/dashboard/reviews",
+  },
+  { title: "Manage Blogs", icon: BookOpen, href: "/dashboard/blogs" },
+  { title: "Manage FAQ", icon: HelpCircle, href: "/dashboard/faq" },
+];
+
+export default function Sidebar({ isCollapsed }: { isCollapsed: boolean }) {
+  return (
+    <aside
+      className={cn(
+        "sticky top-0 h-screen border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-all duration-300 flex flex-col",
+        isCollapsed ? "w-17" : "w-70",
+      )}
+    >
+    
+      <div className="h-16 flex items-center px-6">
+        <Link to="/" className={cn("font-bold truncate text-4xl", isCollapsed && "hidden")}>
+          TechZaa.tech
+        </Link>
+        {isCollapsed && <span className="font-bold mx-auto text-xl">TZ</span>}
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 p-3 space-y-1 overflow-y-auto">
+        {navItems.map((item) => (
+          <Link
+            key={item.title}
+            to={item.href}
+            className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground transition-colors group"
+          >
+            <item.icon className="h-5 w-5 shrink-0" />
+            {!isCollapsed && (
+              <span className="text-sm font-medium">{item.title}</span>
+            )}
+          </Link>
+        ))}
+      </nav>
+
+      {/* Footer: Signout & Profile */}
+      <div className="p-3 border-t border-sidebar-border space-y-1">
+        <button className="w-full flex items-center gap-3 px-3 py-2 rounded-md text-destructive hover:bg-destructive/10 transition-colors">
+          <LogOut className="h-5 w-5 shrink-0" />
+          {!isCollapsed && (
+            <span className="text-sm font-medium">Sign Out</span>
+          )}
+        </button>
+
+        <div className="flex items-center gap-3 px-3 py-3 mt-2 rounded-lg bg-sidebar-accent/50">
+          <div className="h-8 w-8 rounded-full bg-sidebar-primary flex items-center justify-center text-sidebar-primary-foreground">
+            <User className="h-5 w-5" />
+          </div>
+          {!isCollapsed && (
+            <div className="flex flex-col truncate">
+              <span className="text-xs font-semibold">User Name</span>
+              <span className="text-[10px] opacity-70">admin@site.com</span>
+            </div>
+          )}
+        </div>
+      </div>
+    </aside>
+  );
+}
diff --git a/src/pages/admins/components/dashboards/Topbar.tsx b/src/pages/admins/components/dashboards/Topbar.tsx
new file mode 100644
index 0000000..25daa0b
--- /dev/null
+++ b/src/pages/admins/components/dashboards/Topbar.tsx
@@ -0,0 +1,71 @@
+import { useTheme } from "@/contexts/ThemeContext";
+import { motion, AnimatePresence } from "framer-motion";
+import { Moon, PanelLeftClose, PanelLeftOpen, Sun } from "lucide-react";
+
+interface TopbarProps {
+  toggleSidebar: () => void;
+  isCollapsed: boolean;
+}
+
+export default function Topbar({ toggleSidebar, isCollapsed }: TopbarProps) {
+    const { mode, toggleMode } = useTheme();
+
+  return (
+    <header className="h-16 border-b border-border bg-background/95 backdrop-blur px-6 flex items-center justify-between sticky top-0 z-10">
+      <div className="flex items-center gap-4">
+        <button
+          onClick={toggleSidebar}
+          className="p-2 rounded-md hover:bg-accent transition-colors"
+        >
+          {isCollapsed ? (
+            <PanelLeftOpen className="h-5 w-5" />
+          ) : (
+            <PanelLeftClose className="h-5 w-5" />
+          )}
+        </button>
+      </div>
+
+      <div className="flex items-center gap-4">
+          <motion.button
+                onClick={toggleMode}
+                className="p-1.5 rounded-full neon-glow transition-all"
+                whileHover={{ scale: 1.1 }}
+                whileTap={{ scale: 0.9 }}
+                aria-label="Toggle theme mode"
+              >
+                <AnimatePresence mode="wait">
+                  {mode === "dark" ? (
+                    <motion.div
+                      key="sun"
+                      initial={{ rotate: -90, opacity: 0 }}
+                      animate={{ rotate: 0, opacity: 1 }}
+                      exit={{ rotate: 90, opacity: 0 }}
+                      transition={{ duration: 0.2 }}
+                    >
+                      <Sun className="w-5 h-5 text-primary" />
+                    </motion.div>
+                  ) : (
+                    <motion.div
+                      key="moon"
+                      initial={{ rotate: 90, opacity: 0 }}
+                      animate={{ rotate: 0, opacity: 1 }}
+                      exit={{ rotate: -90, opacity: 0 }}
+                      transition={{ duration: 0.2 }}
+                    >
+                      <Moon className="w-5 h-5 text-primary" />
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </motion.button>
+        <div className="h-9 w-9 rounded-full border border-border bg-muted overflow-hidden">
+          {/* Avatar Image would go here */}
+          <img
+            src="https://github.com/shadcn.png"
+            alt="Avatar"
+            className="h-full w-full object-cover"
+          />
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/src/pages/admins/layout/DashboardLayout.tsx b/src/pages/admins/layout/DashboardLayout.tsx
new file mode 100644
index 0000000..b4f2657
--- /dev/null
+++ b/src/pages/admins/layout/DashboardLayout.tsx
@@ -0,0 +1,30 @@
+import { useState } from "react";
+
+import { Outlet } from "react-router";
+import Sidebar from "../components/dashboards/Sidebar";
+import Topbar from "../components/dashboards/Topbar";
+
+
+export default function DashboardLayout() {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  return (
+    <div className="flex min-h-screen bg-background">
+      {/* Sidebar */}
+      <Sidebar isCollapsed={isCollapsed} />
+
+      <div className="flex flex-1 flex-col">
+        {/* Topbar */}
+        <Topbar 
+          toggleSidebar={() => setIsCollapsed(!isCollapsed)} 
+          isCollapsed={isCollapsed} 
+        />
+        
+        {/* Main Content */}
+        <main className="p-6 transition-all duration-300">
+       <Outlet/>
+        </main>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/admins/layout/MainLayout.tsx b/src/pages/admins/layout/MainLayout.tsx
new file mode 100644
index 0000000..eaadd7f
--- /dev/null
+++ b/src/pages/admins/layout/MainLayout.tsx
@@ -0,0 +1,15 @@
+import { Outlet } from "react-router-dom";
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
+
+const MainLayout = () => {
+  return (
+    <>
+      <Navbar />
+      <Outlet />
+      <Footer />
+    </>
+  );
+};
+
+export default MainLayout;
\ No newline at end of file