234 lines
8.3 KiB
TypeScript
234 lines
8.3 KiB
TypeScript
'use client'
|
||
|
||
import React from 'react'
|
||
import { useSession, signOut } from 'next-auth/react'
|
||
import Link from 'next/link'
|
||
import { useEffect, useState } from 'react'
|
||
import Cookies from 'js-cookie'
|
||
|
||
interface Messages {
|
||
common: {
|
||
logout: string
|
||
login: string
|
||
}
|
||
dashboard: {
|
||
title: string
|
||
welcome: string
|
||
loading: string
|
||
error: string
|
||
errorDescription: string
|
||
newRoute: {
|
||
title: string
|
||
description: string
|
||
}
|
||
routes: {
|
||
title: string
|
||
description: string
|
||
}
|
||
inbox: {
|
||
title: string
|
||
description: string
|
||
}
|
||
history: {
|
||
title: string
|
||
description: string
|
||
}
|
||
}
|
||
}
|
||
|
||
export default function DashboardPage() {
|
||
const { data: session, status } = useSession()
|
||
const [messages, setMessages] = useState<Messages | null>(null)
|
||
|
||
useEffect(() => {
|
||
const loadMessages = async () => {
|
||
const lang = Cookies.get('NEXT_LOCALE') || 'de'
|
||
const messages = await import(`@/messages/${lang}.json`)
|
||
setMessages(messages.default)
|
||
}
|
||
loadMessages()
|
||
}, [])
|
||
|
||
if (status === 'loading' || !messages) {
|
||
return (
|
||
<div className="min-h-screen flex items-center justify-center">
|
||
<div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-indigo-500"></div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (status === 'unauthenticated') {
|
||
return (
|
||
<div className="min-h-screen flex items-center justify-center">
|
||
<div className="text-center">
|
||
<h2 className="text-2xl font-bold mb-4">{messages.dashboard.error}</h2>
|
||
<p className="mb-4">{messages.dashboard.errorDescription}</p>
|
||
<Link
|
||
href="/auth/login"
|
||
className="text-indigo-600 hover:text-indigo-800"
|
||
>
|
||
{messages.common.login}
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-100">
|
||
<div className="py-6">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="flex justify-between items-center">
|
||
<h1 className="text-3xl font-bold text-gray-900">{messages.dashboard.title}</h1>
|
||
<div className="flex items-center space-x-4">
|
||
<span className="text-gray-600">
|
||
{messages.dashboard.welcome}, {session?.user?.name || session?.user?.email}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
|
||
<div className="py-4">
|
||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||
<Link
|
||
href="/dashboard/new-route"
|
||
className="bg-white overflow-hidden shadow rounded-lg p-6 hover:shadow-lg transition-shadow duration-200"
|
||
>
|
||
<div className="flex items-center">
|
||
<div className="flex-shrink-0 bg-indigo-500 rounded-md p-3">
|
||
<svg
|
||
className="h-6 w-6 text-white"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
stroke="currentColor"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M12 4v16m8-8H4"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<div className="ml-4">
|
||
<h2 className="text-lg font-medium text-gray-900">
|
||
{messages.dashboard.newRoute.title}
|
||
</h2>
|
||
<p className="mt-1 text-sm text-gray-500">
|
||
{messages.dashboard.newRoute.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</Link>
|
||
|
||
<Link
|
||
href="/dashboard/routes"
|
||
className="bg-white overflow-hidden shadow rounded-lg p-6 hover:shadow-lg transition-shadow duration-200"
|
||
>
|
||
<div className="flex items-center">
|
||
<div className="flex-shrink-0 bg-green-500 rounded-md p-3">
|
||
<svg
|
||
className="h-6 w-6 text-white"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
stroke="currentColor"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<div className="ml-4">
|
||
<h2 className="text-lg font-medium text-gray-900">
|
||
{messages.dashboard.routes.title}
|
||
</h2>
|
||
<p className="mt-1 text-sm text-gray-500">
|
||
{messages.dashboard.routes.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</Link>
|
||
|
||
<Link
|
||
href="/dashboard/inbox"
|
||
className="bg-white overflow-hidden shadow rounded-lg p-6 hover:shadow-lg transition-shadow duration-200"
|
||
>
|
||
<div className="flex items-center">
|
||
<div className="flex-shrink-0 bg-yellow-500 rounded-md p-3">
|
||
<svg
|
||
className="h-6 w-6 text-white"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
stroke="currentColor"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<div className="ml-4">
|
||
<h2 className="text-lg font-medium text-gray-900">
|
||
{messages.dashboard.inbox.title}
|
||
</h2>
|
||
<p className="mt-1 text-sm text-gray-500">
|
||
{messages.dashboard.inbox.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</Link>
|
||
|
||
<Link
|
||
href="/dashboard/history"
|
||
className="bg-white overflow-hidden shadow rounded-lg p-6 hover:shadow-lg transition-shadow duration-200"
|
||
>
|
||
<div className="flex items-center">
|
||
<div className="flex-shrink-0 bg-purple-500 rounded-md p-3">
|
||
<svg
|
||
className="h-6 w-6 text-white"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
stroke="currentColor"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<div className="ml-4">
|
||
<h2 className="text-lg font-medium text-gray-900">
|
||
{messages.dashboard.history.title}
|
||
</h2>
|
||
<p className="mt-1 text-sm text-gray-500">
|
||
{messages.dashboard.history.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Çıkış Yap Butonu */}
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-8">
|
||
<div className="border-t border-gray-200 pt-8">
|
||
<button
|
||
onClick={() => signOut({ callbackUrl: '/' })}
|
||
className="w-full bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700 transition-colors duration-200"
|
||
>
|
||
{messages.common.logout}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|