[ Mini Kiebo ]

Server: Windows NT AKFAR_SERVER 10.0 build 26200 (Windows 10) AMD64 Path: D:/xampp/htdocs/dummyweb/app/frontend/src/pages/ [ Home ]
File: AdminDashboard.jsx
Now let me create the admin dashboard and content management pages:
Action: file_editor create /app/frontend/src/pages/AdminDashboard.jsx --file-text "import React from 'react';
import AdminLayout from '../components/AdminLayout';
import ProtectedRoute from '../components/ProtectedRoute';
import { Card, CardHeader, CardContent } from '../components/ui/card';
import { Button } from '../components/ui/button';
import { 
  Users, 
  BookOpen, 
  Newspaper, 
  Eye,
  TrendingUp,
  FileText,
  Image as ImageIcon
} from 'lucide-react';
import { Link } from 'react-router-dom';
import mockData from '../mockData';

const AdminDashboard = () => {
  const stats = [
    {
      title: 'Total Programs',
      value: mockData.programs.length,
      icon: BookOpen,
      color: 'from-emerald-500 to-teal-400',
      link: '/admin/programs'
    },
    {
      title: 'Total News',
      value: mockData.news.length,
      icon: Newspaper,
      color: 'from-blue-500 to-cyan-400',
      link: '/admin/news'
    },
    {
      title: 'Total Staff',
      value: mockData.staff.length,
      icon: Users,
      color: 'from-purple-500 to-pink-400',
      link: '/admin/staff'
    },
    {
      title: 'Gallery Images',
      value: mockData.gallery.length,
      icon: ImageIcon,
      color: 'from-orange-500 to-red-400',
      link: '/admin/gallery'
    },
  ];

  const quickActions = [
    { title: 'Edit Hero Section', icon: FileText, link: '/admin/hero', color: 'emerald' },
    { title: 'Manage Programs', icon: BookOpen, link: '/admin/programs', color: 'blue' },
    { title: 'Add News', icon: Newspaper, link: '/admin/news', color: 'purple' },
    { title: 'Update Contact', icon: Eye, link: '/admin/contact', color: 'orange' },
  ];

  const recentNews = mockData.news.slice(0, 3);

  return (
    <ProtectedRoute>
      <AdminLayout>
        <div className=\"space-y-6\">
          {/* Header */}
          <div>
            <h1 className=\"text-3xl font-bold text-gray-900\">Dashboard</h1>
            <p className=\"text-gray-600 mt-1\">Selamat datang di Admin Panel Akademi Farmasi Bandung</p>
          </div>

          {/* Stats Grid */}
          <div className=\"grid sm:grid-cols-2 lg:grid-cols-4 gap-6\">
            {stats.map((stat, index) => {
              const Icon = stat.icon;
              return (
                <Link key={index} to={stat.link}>
                  <Card className=\"hover:shadow-lg transition-shadow cursor-pointer border-0\">
                    <CardContent className=\"p-6\">
                      <div className=\"flex items-center justify-between\">
                        <div>
                          <p className=\"text-sm text-gray-600 mb-1\">{stat.title}</p>
                          <p className=\"text-3xl font-bold text-gray-900\">{stat.value}</p>
                        </div>
                        <div className={`w-14 h-14 rounded-xl bg-gradient-to-br ${stat.color} flex items-center justify-center shadow-lg`}>
                          <Icon className=\"h-7 w-7 text-white\" />
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </Link>
              );
            })}
          </div>

          <div className=\"grid lg:grid-cols-2 gap-6\">
            {/* Quick Actions */}
            <Card className=\"border-0 shadow-lg\">
              <CardHeader>
                <h2 className=\"text-xl font-bold text-gray-900\">Quick Actions</h2>
                <p className=\"text-sm text-gray-600\">Akses cepat ke fitur utama</p>
              </CardHeader>
              <CardContent>
                <div className=\"grid grid-cols-2 gap-4\">
                  {quickActions.map((action, index) => {
                    const Icon = action.icon;
                    return (
                      <Link key={index} to={action.link}>
                        <Button
                          variant=\"outline\"
                          className=\"w-full h-auto py-6 flex flex-col items-center gap-2 hover:border-emerald-600 hover:text-emerald-600 transition-all\"
                        >
                          <Icon className=\"h-6 w-6\" />
                          <span className=\"text-sm font-medium text-center\">{action.title}</span>
                        </Button>
                      </Link>
                    );
                  })}
                </div>
              </CardContent>
            </Card>

            {/* Recent News */}
            <Card className=\"border-0 shadow-lg\">
              <CardHeader>
                <div className=\"flex items-center justify-between\">
                  <div>
                    <h2 className=\"text-xl font-bold text-gray-900\">Recent News</h2>
                    <p className=\"text-sm text-gray-600\">Berita terbaru yang dipublikasikan</p>
                  </div>
                  <Link to=\"/admin/news\">
                    <Button size=\"sm\" variant=\"ghost\" className=\"text-emerald-600 hover:text-emerald-700\">
                      View All
                    </Button>
                  </Link>
                </div>
              </CardHeader>
              <CardContent>
                <div className=\"space-y-4\">
                  {recentNews.map((news) => (
                    <div key={news.id} className=\"flex gap-3 pb-4 border-b last:border-0\">
                      <img
                        src={news.image}
                        alt={news.title_id}
                        className=\"w-16 h-16 rounded-lg object-cover flex-shrink-0\"
                      />
                      <div className=\"flex-1 min-w-0\">
                        <h3 className=\"font-semibold text-sm text-gray-900 line-clamp-1\">
                          {news.title_id}
                        </h3>
                        <p className=\"text-xs text-gray-600 line-clamp-2 mt-1\">
                          {news.excerpt_id}
                        </p>
                        <p className=\"text-xs text-gray-500 mt-1\">{news.date}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Website Status */}
          <Card className=\"border-0 shadow-lg\">
            <CardHeader>
              <h2 className=\"text-xl font-bold text-gray-900\">Website Status</h2>
              <p className=\"text-sm text-gray-600\">Status konten website saat ini</p>
            </CardHeader>
            <CardContent>
              <div className=\"grid sm:grid-cols-2 lg:grid-cols-4 gap-6\">
                <div className=\"text-center\">
                  <div className=\"inline-flex items-center justify-center w-12 h-12 bg-emerald-100 rounded-full mb-3\">
                    <TrendingUp className=\"h-6 w-6 text-emerald-600\" />
                  </div>
                  <p className=\"text-2xl font-bold text-gray-900\">
                    {mockData.statistics.students.value.toLocaleString()}
                  </p>
                  <p className=\"text-sm text-gray-600 mt-1\">Mahasiswa Aktif</p>
                </div>
                <div className=\"text-center\">
                  <div className=\"inline-flex items-center justify-center w-12 h-12 bg-blue-100 rounded-full mb-3\">
                    <Users className=\"h-6 w-6 text-blue-600\" />
                  </div>
                  <p className=\"text-2xl font-bold text-gray-900\">
                    {mockData.statistics.alumni.value.toLocaleString()}
                  </p>
                  <p className=\"text-sm text-gray-600 mt-1\">Alumni</p>
                </div>
                <div className=\"text-center\">
                  <div className=\"inline-flex items-center justify-center w-12 h-12 bg-purple-100 rounded-full mb-3\">
                    <Users className=\"h-6 w-6 text-purple-600\" />
                  </div>
                  <p className=\"text-2xl font-bold text-gray-900\">
                    {mockData.statistics.staff.value}
                  </p>
                  <p className=\"text-sm text-gray-600 mt-1\">Dosen & Staff</p>
                </div>
                <div className=\"text-center\">
                  <div className=\"inline-flex items-center justify-center w-12 h-12 bg-orange-100 rounded-full mb-3\">
                    <BookOpen className=\"h-6 w-6 text-orange-600\" />
                  </div>
                  <p className=\"text-2xl font-bold text-gray-900\">
                    {mockData.statistics.partners.value}
                  </p>
                  <p className=\"text-sm text-gray-600 mt-1\">Mitra Industri</p>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Preview Website Button */}
          <Card className=\"border-0 shadow-lg bg-gradient-to-r from-emerald-600 to-teal-500\">
            <CardContent className=\"p-8 text-center\">
              <h3 className=\"text-2xl font-bold text-white mb-2\">
                Lihat Website Anda
              </h3>
              <p className=\"text-emerald-50 mb-6\">
                Preview website public yang telah Anda kelola
              </p>
              <Button
                asChild
                size=\"lg\"
                className=\"bg-white text-emerald-700 hover:bg-emerald-50\"
              >
                <Link to=\"/\" target=\"_blank\">
                  <Eye className=\"mr-2 h-5 w-5\" />
                  Preview Website
                </Link>
              </Button>
            </CardContent>
          </Card>
        </div>
      </AdminLayout>
    </ProtectedRoute>
  );
};

export default AdminDashboard;
"
Observation: Create successful: /app/frontend/src/pages/AdminDashboard.jsx