tsk-3: Dashboard (#7)

Closes #3

Reviewed-on: phoenix/textsender#7
Co-authored-by: phoenix <kundeng00@pm.me>
Co-committed-by: phoenix <kundeng00@pm.me>

package-lock.json

@@ -8,8 +8,8 @@
       "name": "textsender",
       "version": "0.0.0",
       "dependencies": {
-        "react": "^19.1.0",
-        "react-dom": "^19.1.0",
+        "react": "^19.2.3",
+        "react-dom": "^19.2.3",
         "react-router-dom": "^7.10.1"
       },
       "devDependencies": {
@@ -870,9 +870,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.39.1",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.1.tgz",
-      "integrity": "sha512-S26Stp4zCy88tH94QbBv3XCuzRQiZ9yXofEILmglYTh/Ug/a9/umqvgFtYBAo3Lp0nsI/5/qH1CCrbdK3AP1Tw==",
+      "version": "9.39.2",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.2.tgz",
+      "integrity": "sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1766,9 +1766,9 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.39.1",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.1.tgz",
-      "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
+      "version": "9.39.2",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz",
+      "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
       "peer": true,
@@ -1779,7 +1779,7 @@
         "@eslint/config-helpers": "^0.4.2",
         "@eslint/core": "^0.17.0",
         "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "9.39.1",
+        "@eslint/js": "9.39.2",
         "@eslint/plugin-kit": "^0.4.1",
         "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
@@ -1840,9 +1840,9 @@
       }
     },
     "node_modules/eslint-plugin-react-refresh": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.24.tgz",
-      "integrity": "sha512-nLHIW7TEq3aLrEYWpVaJ1dRgFR+wLDPN8e8FpYAql/bMV2oBEfC37K0gLEGgv9fy66juNShSMV8OkTqzltcG/w==",
+      "version": "0.4.25",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.25.tgz",
+      "integrity": "sha512-dRUD2LOdEqI4zXHqbQ442blQAzdSuShAaiSq5Vtyy6LT08YUf0oOjBDo4VPx0dCPgiPWh1WB4dtbLOd0kOlDPQ==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {

package.json

@@ -12,8 +12,8 @@
     "format:check": "npx prettier --check ."
   },
   "dependencies": {
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "react-router-dom": "^7.10.1"
   },
   "devDependencies": {

src/App.jsx

@@ -4,8 +4,9 @@ import {
   Route,
   Navigate,
 } from 'react-router-dom';
-import Register from './components/Register';
+import Dashboard from './components/Dashboard';
 import Login from './components/Login';
+import Register from './components/Register';
 import './App.css';
 
 function App() {
@@ -13,8 +14,9 @@ function App() {
     <Router>
       <Routes>
         <Route path="/" element={<Navigate to="/register" replace />} />
-        <Route path="/register" element={<Register />} />
+        <Route path="/dashboard" element={<Dashboard />} />
         <Route path="/login" element={<Login />} />
+        <Route path="/register" element={<Register />} />
         {/* Add other routes as needed */}
         <Route
           path="/login"

src/components/Dashboard.css

@@ -0,0 +1,213 @@
+.dashboard-container {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    sans-serif;
+}
+
+/* Navbar Styles */
+.dashboard-nav {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  padding: 16px 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+}
+
+.nav-logo .logo-text {
+  color: #333;
+  font-size: 24px;
+  font-weight: 600;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.nav-links {
+  display: flex;
+  gap: 20px;
+}
+
+.nav-link {
+  background: none;
+  border: none;
+  color: #555;
+  font-size: 16px;
+  font-weight: 500;
+  padding: 8px 16px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.nav-link:hover {
+  color: #667eea;
+  background-color: rgba(102, 126, 234, 0.1);
+}
+
+.nav-link.active {
+  color: #667eea;
+  background-color: rgba(102, 126, 234, 0.15);
+  font-weight: 600;
+}
+
+/* Main Content */
+.dashboard-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  min-height: calc(100vh - 72px); /* Subtract navbar height */
+}
+
+.dashboard-card {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  padding: 40px;
+  width: 100%;
+  max-width: 800px;
+  box-sizing: border-box;
+}
+
+.dashboard-title {
+  color: #333;
+  font-size: 32px;
+  font-weight: 600;
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+/* Button Grid */
+.button-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 30px;
+  margin-bottom: 40px;
+}
+
+.dashboard-btn {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border: none;
+  border-radius: 12px;
+  padding: 30px 20px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
+}
+
+.dashboard-btn:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
+}
+
+.dashboard-btn:active {
+  transform: translateY(-2px);
+}
+
+.dashboard-btn.secondary {
+  background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
+  box-shadow: 0 10px 30px rgba(76, 175, 80, 0.2);
+}
+
+.dashboard-btn.secondary:hover {
+  box-shadow: 0 15px 40px rgba(76, 175, 80, 0.4);
+}
+
+.dashboard-btn.tertiary {
+  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
+  box-shadow: 0 10px 30px rgba(255, 152, 0, 0.2);
+}
+
+.dashboard-btn.tertiary:hover {
+  box-shadow: 0 15px 40px rgba(255, 152, 0, 0.4);
+}
+
+.btn-text {
+  color: white;
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.btn-hint {
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 14px;
+  font-weight: 400;
+  text-align: center;
+}
+
+/* View Content */
+.view-content {
+  background: #f8f9fa;
+  border-radius: 8px;
+  padding: 30px;
+  margin-top: 20px;
+}
+
+.view-text {
+  color: #555;
+  font-size: 16px;
+  line-height: 1.6;
+  margin: 0;
+  text-align: center;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .dashboard-nav {
+    padding: 16px 20px;
+    flex-direction: column;
+    gap: 15px;
+  }
+
+  .nav-links {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .dashboard-card {
+    padding: 30px 20px;
+  }
+
+  .dashboard-title {
+    font-size: 28px;
+  }
+
+  .button-grid {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+}
+
+@media (max-width: 480px) {
+  .nav-links {
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .nav-link {
+    width: 100%;
+    text-align: center;
+  }
+
+  .dashboard-btn {
+    padding: 25px 15px;
+  }
+
+  .btn-text {
+    font-size: 18px;
+  }
+}

src/components/Dashboard.jsx

@@ -0,0 +1,100 @@
+import { useState } from 'react';
+import './Dashboard.css';
+
+const Dashboard = () => {
+  const [activeView, setActiveView] = useState('dashboard');
+
+  const handleButtonClick = (buttonNumber) => {
+    console.log(`Button ${buttonNumber} clicked`);
+    // Add your logic here for each button
+  };
+
+  const handleNavClick = (view) => {
+    setActiveView(view);
+  };
+
+  return (
+    <div className="dashboard-container">
+      {/* Navbar */}
+      <nav className="dashboard-nav">
+        <div className="nav-logo">
+          <span className="logo-text">Dashboard</span>
+        </div>
+        <div className="nav-links">
+          <button
+            className={`nav-link ${activeView === 'dashboard' ? 'active' : ''}`}
+            onClick={() => handleNavClick('dashboard')}
+          >
+            Dashboard
+          </button>
+          <button
+            className={`nav-link ${activeView === 'settings' ? 'active' : ''}`}
+            onClick={() => handleNavClick('settings')}
+          >
+            Settings
+          </button>
+          <button
+            className={`nav-link ${activeView === 'profile' ? 'active' : ''}`}
+            onClick={() => handleNavClick('profile')}
+          >
+            Profile
+          </button>
+        </div>
+      </nav>
+
+      {/* Main Content */}
+      <div className="dashboard-content">
+        <div className="dashboard-card">
+          <h1 className="dashboard-title">Dashboard</h1>
+
+          <div className="button-grid">
+            <button
+              className="dashboard-btn primary"
+              onClick={() => handleButtonClick(1)}
+            >
+              <span className="btn-text">Choice 1</span>
+              <span className="btn-hint">Click for action 1</span>
+            </button>
+
+            <button
+              className="dashboard-btn secondary"
+              onClick={() => handleButtonClick(2)}
+            >
+              <span className="btn-text">Choice 2</span>
+              <span className="btn-hint">Click for action 2</span>
+            </button>
+
+            <button
+              className="dashboard-btn tertiary"
+              onClick={() => handleButtonClick(3)}
+            >
+              <span className="btn-text">Choice 3</span>
+              <span className="btn-hint">Click for action 3</span>
+            </button>
+          </div>
+
+          {/* Content based on active view */}
+          <div className="view-content">
+            {activeView === 'dashboard' && (
+              <p className="view-text">
+                Dashboard view is active. Select one of the buttons above.
+              </p>
+            )}
+            {activeView === 'settings' && (
+              <p className="view-text">
+                Settings view - Configuration options will go here.
+              </p>
+            )}
+            {activeView === 'profile' && (
+              <p className="view-text">
+                Profile view - User information will go here.
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;

src/components/Login.jsx

@@ -1,10 +1,14 @@
 import { useState } from 'react';
-import './Login.css';
+import { useNavigate } from 'react-router-dom';
+
 import { AUTH_API_BASE_URL } from '../constants/api';
 import { DATA_KEY_ACCESS_TOKEN } from '../constants/app';
 
+import './Login.css';
+
 // function Login() {
 const Login = () => {
+  const navigate = useNavigate();
   const [formData, setFormData] = useState({
     username: '',
     password: '',
@@ -78,6 +82,7 @@ const Login = () => {
         console.log(token);
         localStorage.setItem(DATA_KEY_ACCESS_TOKEN, token);
         alert(`Login successful! Welcome, ${formData.username}`);
+        navigate('/dashboard');
       } else {
         console.error('Error logging in');
       }

src/components/PhoneVerification.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+
 import './Register.css';
 
 const PhoneVerification = ({ phoneNumber, onVerify, onResend }) => {

src/components/Register.jsx

@@ -1,9 +1,11 @@
 import { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
-import './Register.css';
+
 import { AUTH_API_BASE_URL } from '../constants/api';
 import { DATA_KEY_REGISTERED_USER_ID } from '../constants/app';
 
+import './Register.css';
+
 const Register = () => {
   const navigate = useNavigate();
   const [formData, setFormData] = useState({