Added routing, jwt handling and Dashboard.jsx

src/pages/Dashboard.jsx

@@ -0,0 +1,96 @@
+import React, {useEffect, useState} from 'react';
+import {useNavigate} from 'react-router-dom';
+import {useTranslation} from 'react-i18next';
+
+const Dashboard = () => {
+    const {t} = useTranslation();
+    const navigate = useNavigate();
+    const [userData, setUserData] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        const fetchUserData = async () => {
+            const token = localStorage.getItem('tbp_jwt');
+
+            if (!token) {
+                navigate('/login');
+                return;
+            }
+
+            try {
+                const response = await fetch(`${import.meta.env.VITE_API_URL}/api/users/me?v=1`, {
+                    method: 'GET',
+                    headers: {
+                        'Authorization': `Bearer ${token}`,
+                        'Content-Type': 'application/json'
+                    }
+                });
+
+                if (response.ok) {
+                    const data = await response.json();
+                    setUserData(data);
+                } else if (response.status === 401) {
+                    localStorage.removeItem('tbp_jwt');
+                    navigate('/login');
+                } else {
+                    setError(t('INFO.ERROR.LOAD_PROFILE'));
+                }
+            } catch (err) {
+                console.error('Dashboard fetch error:', err);
+                setError(t('INFO.ERROR.NETWORK_FAILURE'));
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        fetchUserData();
+    }, [navigate]);
+
+    if (isLoading) {
+        return (
+            <div className="flex min-h-screen items-center justify-center bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-white">
+                {t('DASHBOARD.LOADING')}
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="flex min-h-screen items-center justify-center bg-slate-50 dark:bg-slate-900 text-red-500">
+                {error}
+            </div>
+        );
+    }
+
+    return (
+        <div className="min-h-screen bg-slate-50 dark:bg-slate-900 p-8">
+            <div className="max-w-4xl mx-auto space-y-8">
+
+                <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm p-8 border border-slate-200 dark:border-slate-700">
+                    <h1 className="text-3xl font-bold text-slate-900 dark:text-white mb-2">
+                        {t('DASHBOARD.HELLO')} {userData?.email.split('@')[0]} 👋
+                    </h1>
+                    <p className="text-lg text-slate-600 dark:text-slate-300">
+                        {userData?.dashboardMessage}
+                    </p>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    <div className="bg-white dark:bg-slate-800 h-40 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 flex items-center justify-center">
+                        <span className="text-slate-400 dark:text-slate-500">Tile 1 (Coming soon)</span>
+                    </div>
+                    <div className="bg-white dark:bg-slate-800 h-40 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 flex items-center justify-center">
+                        <span className="text-slate-400 dark:text-slate-500">Tile 2 (Coming soon)</span>
+                    </div>
+                    <div className="bg-white dark:bg-slate-800 h-40 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 flex items-center justify-center">
+                        <span className="text-slate-400 dark:text-slate-500">Settings (Coming soon)</span>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    );
+};
+
+export default Dashboard;