From 4ea8888da959fa86aac3d1191e62710558395c61 Mon Sep 17 00:00:00 2001
From: hanif salafi <hanifsalafi456@gmail.com>
Date: Tue, 23 Sep 2025 18:36:36 +0700
Subject: [PATCH] feat: update template ui

---
 app/(admin)/admin/dashboard/page.tsx          |   8 +-
 components/layout/admin-layout.tsx            |  93 +++---
 components/layout/modern-header.tsx           | 136 +++++++++
 components/layout/modern-sidebar.tsx          | 266 ++++++++++++++++++
 .../main/dashboard/dashboard-container.tsx    |  64 +++--
 5 files changed, 481 insertions(+), 86 deletions(-)
 create mode 100644 components/layout/modern-header.tsx
 create mode 100644 components/layout/modern-sidebar.tsx

diff --git a/app/(admin)/admin/dashboard/page.tsx b/app/(admin)/admin/dashboard/page.tsx
index 3c31f0b..61f32a6 100644
--- a/app/(admin)/admin/dashboard/page.tsx
+++ b/app/(admin)/admin/dashboard/page.tsx
@@ -13,7 +13,7 @@ export default function AdminPage() {
 
   if (!mounted) {
     return (
-      <div className="h-full overflow-auto bg-gradient-to-br from-slate-50/50 via-white to-slate-50/50 flex items-center justify-center">
+      <div className="h-full overflow-auto bg-gray-50 flex items-center justify-center">
         <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-500"></div>
       </div>
     );
@@ -21,14 +21,12 @@ export default function AdminPage() {
 
   return (
     <motion.div
-      className="h-full overflow-auto bg-gradient-to-br from-slate-50/50 via-white to-slate-50/50"
+      className="h-full overflow-auto bg-gray-50"
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ duration: 0.3 }}
     >
-      <div className="p-6">
-        <DashboardContainer />
-      </div>
+      <DashboardContainer />
     </motion.div>
   );
 }
diff --git a/components/layout/admin-layout.tsx b/components/layout/admin-layout.tsx
index 537bcdb..fd45da0 100644
--- a/components/layout/admin-layout.tsx
+++ b/components/layout/admin-layout.tsx
@@ -3,30 +3,40 @@
 import { useEffect, useState } from "react";
 import React, { ReactNode } from "react";
 import { ThemeProvider } from "./theme-context";
-import { Breadcrumbs } from "./breadcrumbs";
-import { BurgerButtonIcon } from "../icons";
-
 import { motion, AnimatePresence } from "framer-motion";
 import { SidebarProvider } from "./sidebar-context";
-import { RetractingSidebar } from "../landing-page/retracting-sidedar";
+import { ModernSidebar } from "./modern-sidebar";
+import { ModernHeader } from "./modern-header";
 
 export const AdminLayout = ({ children }: { children: ReactNode }) => {
-  const [isOpen, setIsOpen] = useState(true);
+  const [sidebarOpen, setSidebarOpen] = useState(true);
   const [hasMounted, setHasMounted] = useState(false);
 
-  const updateSidebarData = (newData: boolean) => {
-    setIsOpen(newData);
+  const toggleSidebar = () => {
+    setSidebarOpen(!sidebarOpen);
   };
 
   // Hooks
   useEffect(() => {
     setHasMounted(true);
+    // Auto-collapse sidebar on mobile
+    const handleResize = () => {
+      if (window.innerWidth < 1024) {
+        setSidebarOpen(false);
+      } else {
+        setSidebarOpen(true);
+      }
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
   }, []);
 
   // Render loading state until mounted
   if (!hasMounted) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-50 flex items-center justify-center">
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
         <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-500"></div>
       </div>
     );
@@ -35,52 +45,33 @@ export const AdminLayout = ({ children }: { children: ReactNode }) => {
   return (
     <ThemeProvider>
       <SidebarProvider>
-        <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-50 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900">
+        <div className="min-h-screen bg-gray-50">
           <div className="flex h-screen overflow-hidden">
-            <RetractingSidebar
-              sidebarData={isOpen}
-              updateSidebarData={updateSidebarData}
-            />
+            {/* Modern Sidebar */}
+            <ModernSidebar isOpen={sidebarOpen} onToggle={toggleSidebar} />
 
-            <AnimatePresence mode="wait">
-              <motion.div
-                key="main-content"
-                className="flex-1 flex flex-col overflow-hidden"
-                initial={{ opacity: 0, x: 20 }}
-                animate={{ opacity: 1, x: 0 }}
-                transition={{ duration: 0.3 }}
+            {/* Main Content Area */}
+            <div 
+              className={`flex-1 flex flex-col overflow-hidden transition-all duration-300 ml-0`}
+            >
+              {/* Modern Header */}
+              <ModernHeader 
+                onMenuToggle={toggleSidebar} 
+                sidebarOpen={sidebarOpen}
+              />
+
+              {/* Main Content */}
+              <motion.main
+                className="flex-1 overflow-auto bg-gray-50"
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.1, duration: 0.3 }}
               >
-                {/* Header */}
-                <motion.header
-                  className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-b border-slate-200/60 dark:border-slate-700/60 shadow-sm"
-                  initial={{ y: -20, opacity: 0 }}
-                  animate={{ y: 0, opacity: 1 }}
-                  transition={{ delay: 0.2, duration: 0.3 }}
-                >
-                  <div className="flex items-center justify-between px-6 py-4">
-                    <div className="flex items-center space-x-4">
-                      <button
-                        className="md:hidden p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors duration-200"
-                        onClick={() => updateSidebarData(true)}
-                      >
-                        <BurgerButtonIcon />
-                      </button>
-                      <Breadcrumbs />
-                    </div>
-                  </div>
-                </motion.header>
-
-                {/* Main Content */}
-                <motion.main
-                  className="flex-1 overflow-auto"
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: 0.3, duration: 0.3 }}
-                >
-                  <div className="h-full">{children}</div>
-                </motion.main>
-              </motion.div>
-            </AnimatePresence>
+                <div className="p-6">
+                  {children}
+                </div>
+              </motion.main>
+            </div>
           </div>
         </div>
       </SidebarProvider>
diff --git a/components/layout/modern-header.tsx b/components/layout/modern-header.tsx
new file mode 100644
index 0000000..a1566db
--- /dev/null
+++ b/components/layout/modern-header.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import React, { useState, useEffect, useRef } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  Search,
+  Bell,
+  User,
+  Settings,
+  LogOut,
+  ChevronDown,
+  Menu,
+} from "lucide-react";
+
+interface ModernHeaderProps {
+  onMenuToggle: () => void;
+  sidebarOpen: boolean;
+}
+
+export const ModernHeader: React.FC<ModernHeaderProps> = ({
+  onMenuToggle,
+  sidebarOpen,
+}) => {
+  const [showUserDropdown, setShowUserDropdown] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setShowUserDropdown(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <header className="bg-gray-50 border-b border-gray-200 px-4 lg:px-6 py-4">
+      <div className="flex items-center justify-between">
+        {/* Left Section */}
+        <div className="flex items-center space-x-4">
+          {/* Mobile Menu Button */}
+          <button
+            onClick={onMenuToggle}
+            className="lg:hidden p-2 rounded-lg hover:bg-gray-200 transition-colors"
+          >
+            <Menu className="w-5 h-5 text-gray-600" />
+          </button>
+
+          {/* Search Bar */}
+          <div className="hidden md:flex px-6">
+            <div className="relative w-64 lg:w-80">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
+              <input
+                type="text"
+                placeholder="Search..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full pl-10 pr-4 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Right Section */}
+        <div className="flex items-center space-x-2 lg:space-x-4">
+          {/* Notifications */}
+          <button className="relative p-2 rounded-lg hover:bg-gray-200 transition-colors">
+            <Bell className="w-5 h-5 text-gray-600" />
+            {/* Notification Badge */}
+            <span className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full flex items-center justify-center">
+              <span className="text-xs text-white font-medium">3</span>
+            </span>
+          </button>
+
+          {/* User Avatar & Dropdown */}
+          <div className="relative" ref={dropdownRef}>
+            <button
+              onClick={() => setShowUserDropdown(!showUserDropdown)}
+              className="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-200 transition-colors"
+            >
+              <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
+                <User className="w-4 h-4 text-white" />
+              </div>
+              <div className="hidden md:block text-left">
+                <p className="text-sm font-medium text-gray-900">Admin User</p>
+                <p className="text-xs text-gray-500">admin@netidhub.com</p>
+              </div>
+              <ChevronDown className="w-4 h-4 text-gray-500" />
+            </button>
+
+            {/* Dropdown Menu */}
+            <AnimatePresence>
+              {showUserDropdown && (
+                <motion.div
+                  initial={{ opacity: 0, y: -10, scale: 0.95 }}
+                  animate={{ opacity: 1, y: 0, scale: 1 }}
+                  exit={{ opacity: 0, y: -10, scale: 0.95 }}
+                  transition={{ duration: 0.2 }}
+                  className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-50"
+                >
+                  <div className="px-4 py-2 border-b border-gray-100">
+                    <p className="text-sm font-medium text-gray-900">Admin User</p>
+                    <p className="text-xs text-gray-500">admin@netidhub.com</p>
+                  </div>
+                  
+                  <button className="w-full flex items-center space-x-3 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors">
+                    <User className="w-4 h-4" />
+                    <span>Profile</span>
+                  </button>
+                  
+                  <button className="w-full flex items-center space-x-3 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors">
+                    <Settings className="w-4 h-4" />
+                    <span>Settings</span>
+                  </button>
+                  
+                  <div className="border-t border-gray-100 my-1"></div>
+                  
+                  <button className="w-full flex items-center space-x-3 px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors">
+                    <LogOut className="w-4 h-4" />
+                    <span>Logout</span>
+                  </button>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/components/layout/modern-sidebar.tsx b/components/layout/modern-sidebar.tsx
new file mode 100644
index 0000000..68ad996
--- /dev/null
+++ b/components/layout/modern-sidebar.tsx
@@ -0,0 +1,266 @@
+"use client";
+
+import React, { useState } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  LayoutDashboard,
+  Image,
+  Video,
+  FileText,
+  Music,
+  ChevronRight,
+  ChevronDown,
+  Menu,
+  X,
+} from "lucide-react";
+
+interface SidebarItem {
+  title: string;
+  icon: React.ComponentType<{ className?: string }>;
+  link?: string;
+  children?: SidebarItem[];
+}
+
+const sidebarItems: SidebarItem[] = [
+  {
+    title: "Dashboard",
+    icon: LayoutDashboard,
+    link: "/admin/dashboard",
+  },
+  {
+    title: "Content Management",
+    icon: FileText,
+    children: [
+      {
+        title: "Foto",
+        icon: Image,
+        link: "/admin/content/image",
+      },
+      {
+        title: "Audio Visual",
+        icon: Video,
+        link: "/admin/content/audio-visual",
+      },
+      {
+        title: "Teks",
+        icon: FileText,
+        link: "/admin/content/document",
+      },
+      {
+        title: "Audio",
+        icon: Music,
+        link: "/admin/content/audio",
+      },
+    ],
+  },
+];
+
+interface ModernSidebarProps {
+  isOpen: boolean;
+  onToggle: () => void;
+}
+
+export const ModernSidebar: React.FC<ModernSidebarProps> = ({
+  isOpen,
+  onToggle,
+}) => {
+  const pathname = usePathname();
+  const [expandedItems, setExpandedItems] = useState<string[]>([]);
+
+  const toggleExpanded = (title: string) => {
+    setExpandedItems((prev) =>
+      prev.includes(title)
+        ? prev.filter((item) => item !== title)
+        : [...prev, title]
+    );
+  };
+
+  const SidebarItemComponent: React.FC<{
+    item: SidebarItem;
+    level?: number;
+  }> = ({ item, level = 0 }) => {
+    const isExpanded = expandedItems.includes(item.title);
+    const hasChildren = item.children && item.children.length > 0;
+    const isActive = pathname === item.link;
+
+    if (hasChildren) {
+      return (
+        <div>
+          {/* Parent Menu */}
+          <button
+            onClick={() => toggleExpanded(item.title)}
+            className={`w-full flex items-center justify-between px-3 py-2.5 rounded-lg transition-all duration-200 hover:bg-gray-100 ${
+              level > 0 ? "ml-4" : ""
+            } ${!isOpen ? "bg-gray-50 border border-gray-200" : ""}`}
+          >
+            <div className="flex items-center space-x-3">
+              <item.icon className={`w-5 h-5 ${!isOpen ? "text-gray-800" : "text-gray-600"}`} />
+              {isOpen && (
+                <span className="text-sm font-medium text-gray-700">
+                  {item.title}
+                </span>
+              )}
+            </div>
+            {isOpen && (
+              <motion.div
+                animate={{ rotate: isExpanded ? 90 : 0 }}
+                transition={{ duration: 0.2 }}
+              >
+                <ChevronRight className="w-4 h-4 text-gray-500" />
+              </motion.div>
+            )}
+          </button>
+
+          {/* Expanded Submenu (when sidebar is open) */}
+          <AnimatePresence>
+            {isOpen && isExpanded && (
+              <motion.div
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: "auto", opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                transition={{ duration: 0.2 }}
+                className="overflow-hidden"
+              >
+                <div className="ml-4 mt-1 space-y-1">
+                  {item.children?.map((child) => (
+                    <SidebarItemComponent
+                      key={child.title}
+                      item={child}
+                      level={level + 1}
+                    />
+                  ))}
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+          {/* Collapsed Submenu Icons (when sidebar is collapsed) */}
+          {!isOpen && (
+            <div className="mt-1 space-y-1 ml-2">
+              {item.children?.map((child) => (
+                <Link href={child.link || "#"} key={child.title}>
+                  <div
+                    className={`flex items-center justify-center px-2 py-2 rounded-lg transition-all duration-200 hover:bg-gray-100 ${
+                      pathname === child.link ? "bg-gray-100" : ""
+                    }`}
+                    title={child.title}
+                  >
+                    <child.icon className="w-4 h-4 text-gray-500" />
+                  </div>
+                </Link>
+              ))}
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    return (
+      <Link href={item.link || "#"}>
+        <div
+          className={`flex items-center space-x-3 px-3 py-2.5 rounded-lg transition-all duration-200 hover:bg-gray-100 ${
+            isActive ? "bg-gray-100 text-gray-900" : "text-gray-700"
+          } ${level > 0 ? "ml-4" : ""}`}
+        >
+          <item.icon className="w-5 h-5" />
+          {isOpen && (
+            <span className="text-sm font-medium">{item.title}</span>
+          )}
+        </div>
+      </Link>
+    );
+  };
+
+  return (
+    <>
+      {/* Mobile Overlay */}
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden"
+            onClick={onToggle}
+          />
+        )}
+      </AnimatePresence>
+
+      {/* Sidebar */}
+      <motion.aside
+        initial={false}
+        animate={{
+          width: isOpen ? 280 : 80,
+        }}
+        transition={{ duration: 0.3, ease: "easeInOut" }}
+        className="fixed left-0 top-0 h-full bg-white border-r border-gray-200 z-50 flex flex-col lg:relative lg:z-auto"
+      >
+        {/* Header */}
+        <div className="flex items-center justify-center p-4 border-b border-gray-200">
+          <motion.div
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ delay: 0.1 }}
+            className="flex items-center space-x-3"
+          >
+            <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+              <span className="text-white font-bold text-sm">N</span>
+            </div>
+            {isOpen && (
+              <motion.div
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.2 }}
+              >
+                <h1 className="text-lg font-semibold text-gray-900">
+                  Netidhub
+                </h1>
+                <p className="text-xs text-gray-500">Admin Panel</p>
+              </motion.div>
+            )}
+          </motion.div>
+        </div>
+
+        {/* Navigation */}
+        <nav className="flex-1 p-4 space-y-2 overflow-y-auto">
+          {sidebarItems.map((item) => (
+            <SidebarItemComponent key={item.title} item={item} />
+          ))}
+        </nav>
+
+      </motion.aside>
+
+      {/* Floating Toggle Button - Expand */}
+      <AnimatePresence>
+        {!isOpen && (
+          <motion.button
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.8 }}
+            onClick={onToggle}
+            className="fixed top-6 left-[88px] z-50 p-2 bg-white rounded-lg shadow-lg border border-gray-200 hover:shadow-xl transition-all duration-200 hover:bg-gray-50"
+          >
+            <Menu className="w-4 h-4 text-gray-600" />
+          </motion.button>
+        )}
+      </AnimatePresence>
+
+      {/* Floating Toggle Button - Collapse */}
+      <AnimatePresence>
+        {isOpen && (
+          <motion.button
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.8 }}
+            onClick={onToggle}
+            className="fixed top-6 left-[280px] z-50 p-2 bg-white rounded-lg shadow-lg border border-gray-200 hover:shadow-xl transition-all duration-200 hover:bg-gray-50"
+          >
+            <X className="w-4 h-4 text-gray-600" />
+          </motion.button>
+        )}
+      </AnimatePresence>
+    </>
+  );
+};
diff --git a/components/main/dashboard/dashboard-container.tsx b/components/main/dashboard/dashboard-container.tsx
index 4f2e0e1..61d8d44 100644
--- a/components/main/dashboard/dashboard-container.tsx
+++ b/components/main/dashboard/dashboard-container.tsx
@@ -125,18 +125,19 @@ export default function DashboardContainer() {
   return (
     <div className="space-y-8">
       {/* Stats Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4">
         {/* User Profile Card */}
         <motion.div
-          className="col-span-1 md:col-span-2 bg-white rounded-2xl shadow-lg border border-slate-200/60 p-6 hover:shadow-xl transition-all duration-300"
+          className="col-span-1 md:col-span-2 bg-white rounded-2xl shadow-md border border-gray-200 p-4 hover:shadow-lg transition-all duration-300"
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ delay: 0.1 }}
         >
           <div className="flex justify-between items-start">
             <div className="space-y-2">
-              <p className="text-slate-600">{username}</p>
-              <div className="flex space-x-6 pt-2"></div>
+              <p className="text-gray-600 font-medium">Welcome back,</p>
+              <p className="text-xl font-semibold text-gray-900">{username}</p>
+              <p className="text-sm text-gray-500">Admin Dashboard</p>
             </div>
             <div className="p-3 bg-gradient-to-br from-blue-50 to-purple-50 rounded-xl">
               <DashboardUserIcon size={60} />
@@ -146,7 +147,7 @@ export default function DashboardContainer() {
 
         {/* Total Posts */}
         <motion.div
-          className="bg-white rounded-2xl shadow-lg border border-slate-200/60 p-6 hover:shadow-xl transition-all duration-300"
+          className="bg-white rounded-2xl shadow-md border border-gray-200 p-4 hover:shadow-lg transition-all duration-300"
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ delay: 0.2 }}
@@ -156,17 +157,17 @@ export default function DashboardContainer() {
               <DashboardSpeecIcon />
             </div>
             <div>
-              <p className="text-3xl font-bold text-slate-800">
-                {summary?.totalAll}
+              <p className="text-3xl font-bold text-gray-900">
+                {summary?.totalAll || 0}
               </p>
-              <p className="text-sm text-slate-500">Total Posts</p>
+              <p className="text-sm text-gray-500">Total Posts</p>
             </div>
           </div>
         </motion.div>
 
         {/* Total Views */}
         <motion.div
-          className="bg-white rounded-2xl shadow-lg border border-slate-200/60 p-6 hover:shadow-xl transition-all duration-300"
+          className="bg-white rounded-2xl shadow-md border border-gray-200 p-4 hover:shadow-lg transition-all duration-300"
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ delay: 0.3 }}
@@ -176,17 +177,17 @@ export default function DashboardContainer() {
               <DashboardConnectIcon />
             </div>
             <div>
-              <p className="text-3xl font-bold text-slate-800">
-                {summary?.totalViews}
+              <p className="text-3xl font-bold text-gray-900">
+                {summary?.totalViews || 0}
               </p>
-              <p className="text-sm text-slate-500">Total Views</p>
+              <p className="text-sm text-gray-500">Total Views</p>
             </div>
           </div>
         </motion.div>
 
         {/* Total Shares */}
         <motion.div
-          className="bg-white rounded-2xl shadow-lg border border-slate-200/60 p-6 hover:shadow-xl transition-all duration-300"
+          className="bg-white rounded-2xl shadow-md border border-gray-200 p-4 hover:shadow-lg transition-all duration-300"
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ delay: 0.4 }}
@@ -196,17 +197,17 @@ export default function DashboardContainer() {
               <DashboardShareIcon />
             </div>
             <div>
-              <p className="text-3xl font-bold text-slate-800">
-                {summary?.totalShares}
+              <p className="text-3xl font-bold text-gray-900">
+                {summary?.totalShares || 0}
               </p>
-              <p className="text-sm text-slate-500">Total Shares</p>
+              <p className="text-sm text-gray-500">Total Shares</p>
             </div>
           </div>
         </motion.div>
 
         {/* Total Comments */}
         <motion.div
-          className="bg-white rounded-2xl shadow-lg border border-slate-200/60 p-6 hover:shadow-xl transition-all duration-300"
+          className="bg-white rounded-2xl shadow-md border border-gray-200 p-4 hover:shadow-lg transition-all duration-300"
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ delay: 0.5 }}
@@ -216,26 +217,26 @@ export default function DashboardContainer() {
               <DashboardCommentIcon size={40} />
             </div>
             <div>
-              <p className="text-3xl font-bold text-slate-800">
-                {summary?.totalComments}
+              <p className="text-3xl font-bold text-gray-900">
+                {summary?.totalComments || 0}
               </p>
-              <p className="text-sm text-slate-500">Total Comments</p>
+              <p className="text-sm text-gray-500">Total Comments</p>
             </div>
           </div>
         </motion.div>
       </div>
 
       {/* Content Section */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
         {/* Analytics Chart */}
         <motion.div
-          className="bg-white rounded-2xl shadow-lg border border-slate-200/60 p-6"
+          className="bg-white rounded-2xl shadow-md border border-gray-200 p-4"
           initial={{ opacity: 0, x: -20 }}
           animate={{ opacity: 1, x: 0 }}
           transition={{ delay: 0.6 }}
         >
           <div className="flex justify-between items-center mb-6">
-            <h3 className="text-lg font-semibold text-slate-800">
+            <h3 className="text-lg font-semibold text-gray-900">
               Analytics Overview
             </h3>
             <div className="flex space-x-4">
@@ -250,25 +251,28 @@ export default function DashboardContainer() {
                       handleChange(option.value, checked as boolean)
                     }
                   />
-                  <span className="text-sm text-slate-600">{option.label}</span>
+                  <span className="text-sm text-gray-600">{option.label}</span>
                 </label>
               ))}
             </div>
           </div>
+          <div className="h-64 flex items-center justify-center bg-gray-50 rounded-lg">
+            <p className="text-gray-500">Chart will be displayed here</p>
+          </div>
         </motion.div>
 
         {/* Recent Articles */}
         <motion.div
-          className="bg-white rounded-2xl shadow-lg border border-slate-200/60 p-6"
+          className="bg-white rounded-2xl shadow-md border border-gray-200 p-4"
           initial={{ opacity: 0, x: 20 }}
           animate={{ opacity: 1, x: 0 }}
           transition={{ delay: 0.7 }}
         >
           <div className="flex justify-between items-center mb-6">
-            <h3 className="text-lg font-semibold text-slate-800">
+            <h3 className="text-lg font-semibold text-gray-900">
               Recent Content
             </h3>
-            <Link href="/admin/article/create">
+            <Link href="/admin/content/image/create">
               <Button className="bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white shadow-lg">
                 Create Content
               </Button>
@@ -279,7 +283,7 @@ export default function DashboardContainer() {
             {article?.map((list: any) => (
               <motion.div
                 key={list?.id}
-                className="flex space-x-4 p-4 rounded-xl hover:bg-slate-50 transition-colors duration-200"
+                className="flex space-x-4 p-4 rounded-xl hover:bg-gray-50 transition-colors duration-200"
                 whileHover={{ scale: 1.02 }}
                 transition={{ type: "spring", stiffness: 300 }}
               >
@@ -291,10 +295,10 @@ export default function DashboardContainer() {
                   className="h-20 w-20 object-cover rounded-lg shadow-sm flex-shrink-0"
                 />
                 <div className="flex-1 min-w-0">
-                  <h4 className="font-medium text-slate-800 line-clamp-2 mb-1">
+                  <h4 className="font-medium text-gray-900 line-clamp-2 mb-1">
                     {list?.title}
                   </h4>
-                  <p className="text-sm text-slate-500">
+                  <p className="text-sm text-gray-500">
                     {convertDateFormat(list?.createdAt)}
                   </p>
                 </div>