coolify-dashboard/client/src/App.jsx at 1c751baed3a3cf1eded3c8ec71ec1db2e4f2f3b6 · kalayciburak/coolify-dashboard · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import { Suspense, lazy } from "react";
import { Tooltip } from "react-tooltip";
import { Toaster } from "react-hot-toast";
import { isAuthenticated } from "./api/auth";
import { SoundProvider } from "./hooks/useSoundEffects";
import SoundToggle from "./components/SoundToggle";

const Login = lazy(() => import("./pages/Login"));
const Dashboard = lazy(() => import("./pages/Dashboard"));

const PrivateRoute = ({ children }) => {
  return isAuthenticated() ? children : <Navigate to="/login" replace />;
};

const LoadingSpinner = () => (
  <div className="min-h-screen bg-slate-900 flex items-center justify-center">
    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-500"></div>
  </div>
);

const App = () => {
  return (
    <SoundProvider>
      <BrowserRouter>
        <Suspense fallback={<LoadingSpinner />}>
          <Routes>
            <Route path="/login" element={<Login />} />
            <Route
              path="/dashboard"
              element={
                <PrivateRoute>
                  <Dashboard />
                </PrivateRoute>
              }
            />
            <Route path="/" element={<Navigate to="/dashboard" replace />} />
            <Route path="*" element={<Navigate to="/dashboard" replace />} />
          </Routes>
        </Suspense>
        <Tooltip id="backup-tooltip" />
        <Tooltip id="internal-url-tooltip" />
        <Tooltip id="external-url-tooltip" />
        <Toaster
          position="top-right"
          reverseOrder={false}
          gutter={12}
          toastOptions={{
            duration: 4000,
            style: {
              borderRadius: "0.5rem",
              padding: "1rem 1.25rem",
              fontSize: "0.95rem",
              fontWeight: "500",
              boxShadow:
                "0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08)",
              minWidth: "320px",
              maxWidth: "420px",
            },
            success: {
              style: {
                background: "linear-gradient(135deg, #10b981 0%, #059669 100%)",
                color: "#ffffff",
              },
              iconTheme: {
                primary: "#ffffff",
                secondary: "#10b981",
              },
            },
            error: {
              style: {
                background: "linear-gradient(135deg, #ef4444 0%, #dc2626 100%)",
                color: "#ffffff",
              },
              iconTheme: {
                primary: "#ffffff",
                secondary: "#ef4444",
              },
            },
            loading: {
              style: {
                background: "linear-gradient(135deg, #a855f7 0%, #9333ea 100%)",
                color: "#ffffff",
              },
              iconTheme: {
                primary: "#ffffff",
                secondary: "#a855f7",
              },
            },
          }}
        />
        <SoundToggle />
      </BrowserRouter>
    </SoundProvider>
  );
};

export default App;