Update Next.js configuration for S3 support and enhance admin dashboard functionality - Added S3 hostname to next.config.js for image uploads - Updated package.json and package-lock.json with AWS SDK dependencies - Improved admin layout with S3 status component and enhanced dashboard statistics loading logic - Refactored news loading in NewsBlock component to handle errors gracefully.

This commit is contained in:
albivkt
2025-07-13 23:36:38 +03:00
parent c0e91bba1d
commit 162d96e9aa
21 changed files with 3675 additions and 137 deletions

View File

@ -4,6 +4,7 @@ import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import { Building, FileText, Settings, LogOut, Menu, X } from 'lucide-react';
import S3Status from './components/S3Status';
interface AdminLayoutProps {
children: React.ReactNode;
@ -69,17 +70,17 @@ export default function AdminLayout({ children }: AdminLayoutProps) {
)}
{/* Sidebar */}
<div className={`fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transform transition-transform duration-300 ease-in-out lg:translate-x-0 ${
<div className={`fixed inset-y-0 left-0 z-50 w-64 bg-gradient-to-b from-gray-900 to-gray-800 shadow-xl transform transition-transform duration-300 ease-in-out lg:translate-x-0 ${
isSidebarOpen ? 'translate-x-0' : '-translate-x-full'
}`}>
<div className="flex items-center justify-between h-16 px-6 border-b">
<div className="flex items-center justify-between h-16 px-6 border-b border-gray-700">
<Link href="/admin" className="flex items-center space-x-2">
<Building className="h-8 w-8 text-blue-600" />
<span className="text-xl font-bold text-gray-900">Admin Panel</span>
<Building className="h-8 w-8 text-blue-400" />
<span className="text-xl font-bold text-white">CKE Admin</span>
</Link>
<button
onClick={() => setIsSidebarOpen(false)}
className="lg:hidden p-2 rounded-md hover:bg-gray-100"
className="lg:hidden p-2 rounded-md hover:bg-gray-700 text-gray-300 hover:text-white"
>
<X className="h-5 w-5" />
</button>
@ -92,10 +93,10 @@ export default function AdminLayout({ children }: AdminLayoutProps) {
<Link
key={item.name}
href={item.href}
className={`flex items-center px-6 py-3 text-sm font-medium transition-colors ${
className={`flex items-center px-6 py-3 text-sm font-medium transition-all duration-200 ${
isActive
? 'bg-blue-50 text-blue-700 border-r-2 border-blue-600'
: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
? 'bg-blue-600 text-white border-r-4 border-blue-400 shadow-lg'
: 'text-gray-300 hover:bg-gray-700 hover:text-white'
}`}
onClick={() => setIsSidebarOpen(false)}
>
@ -106,10 +107,13 @@ export default function AdminLayout({ children }: AdminLayoutProps) {
})}
</nav>
<div className="absolute bottom-0 w-full p-6 border-t">
<div className="absolute bottom-0 w-full p-6 border-t border-gray-700 space-y-4">
<div className="bg-gray-800 rounded-lg p-3">
<S3Status />
</div>
<button
onClick={handleLogout}
className="flex items-center w-full px-3 py-2 text-sm font-medium text-red-600 hover:bg-red-50 rounded-md transition-colors"
className="flex items-center w-full px-3 py-2 text-sm font-medium text-red-400 hover:bg-red-900 hover:bg-opacity-20 rounded-md transition-colors"
>
<LogOut className="mr-3 h-5 w-5" />
Выйти
@ -120,17 +124,22 @@ export default function AdminLayout({ children }: AdminLayoutProps) {
{/* Main content */}
<div className="lg:ml-64">
{/* Top bar */}
<div className="bg-white shadow-sm border-b">
<div className="bg-white shadow-sm border-b border-gray-200">
<div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
<button
onClick={() => setIsSidebarOpen(true)}
className="lg:hidden p-2 rounded-md hover:bg-gray-100"
className="lg:hidden p-2 rounded-md hover:bg-gray-100 text-gray-600"
>
<Menu className="h-5 w-5" />
</button>
<div className="flex items-center space-x-4">
<span className="text-sm text-gray-500">Добро пожаловать, admin</span>
<div className="flex items-center space-x-2">
<div className="w-8 h-8 bg-gradient-to-r from-blue-500 to-blue-600 rounded-full flex items-center justify-center">
<span className="text-white text-sm font-bold">A</span>
</div>
<span className="text-sm text-gray-700 font-medium">Добро пожаловать, admin</span>
</div>
</div>
</div>
</div>
@ -166,11 +175,15 @@ function LoginForm({ onLogin }: { onLogin: (username: string, password: string)
};
return (
<div className="min-h-screen bg-gray-100 flex items-center justify-center">
<div className="max-w-md w-full bg-white rounded-lg shadow-md p-8">
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
<div className="max-w-md w-full bg-white rounded-xl shadow-xl p-8 border border-gray-100">
<div className="text-center mb-8">
<Building className="h-12 w-12 text-blue-600 mx-auto mb-4" />
<h1 className="text-2xl font-bold text-gray-900">Административная панель</h1>
<div className="w-16 h-16 bg-gradient-to-r from-blue-600 to-blue-700 rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg">
<Building className="h-8 w-8 text-white" />
</div>
<h1 className="text-2xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent">
CKE Admin Panel
</h1>
<p className="text-gray-600 mt-2">Войдите в систему управления</p>
</div>