ReactJS – Creating Dashboard Page after login

src/
├── components/
│   ├── LoginPage.js       # Login page component
│   ├── MainPage.js        # Main page with navigation menu
│   ├── Dashboard.js       # Dashboard (displays welcome message)
│   ├── CustomerForm.js    # Customer form for insurance details
├── App.js                 # Main application file
└── index.js               # Entry point

import React from 'react';

const Dashboard = () => {
  return (
    <div style={styles.container}>
      <h1 style={styles.heading}>Welcome to Insurance Portal</h1>
      <p style={styles.paragraph}>Your trusted partner for all insurance needs!</p>
    </div>
  );
};

const styles = {
  container: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100vh',
    backgroundColor: '#f0f8ff',
    color: '#333',
    fontFamily: 'Arial, sans-serif',
  },
  heading: {
    fontSize: '3rem',
    marginBottom: '1rem',
  },
  paragraph: {
    fontSize: '1.2rem',
    textAlign: 'center',
  },
};

export default Dashboard;

import React, { useState } from 'react';

const CustomerForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    insuranceType: '',
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Customer Details Submitted:\n${JSON.stringify(formData, null, 2)}`);
    setFormData({ name: '', email: '', phone: '', insuranceType: '' }); // Reset form
  };

  return (
    <div style={styles.container}>
      <h1 style={styles.heading}>Customer Insurance Form</h1>
      <form onSubmit={handleSubmit} style={styles.form}>
        <input
          type="text"
          name="name"
          placeholder="Customer Name"
          value={formData.name}
          onChange={handleChange}
          style={styles.input}
          required
        />
        <input
          type="email"
          name="email"
          placeholder="Email"
          value={formData.email}
          onChange={handleChange}
          style={styles.input}
          required
        />
        <input
          type="tel"
          name="phone"
          placeholder="Phone Number"
          value={formData.phone}
          onChange={handleChange}
          style={styles.input}
          required
        />
        <select
          name="insuranceType"
          value={formData.insuranceType}
          onChange={handleChange}
          style={styles.input}
          required
        >
          <option value="" disabled>Select Insurance Type</option>
          <option value="health">Health Insurance</option>
          <option value="life">Life Insurance</option>
          <option value="vehicle">Vehicle Insurance</option>
        </select>
        <button type="submit" style={styles.button}>Submit</button>
      </form>
    </div>
  );
};

const styles = {
  container: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100vh',
    backgroundColor: '#f9f9f9',
  },
  heading: {
    fontSize: '2rem',
    marginBottom: '1.5rem',
  },
  form: {
    display: 'flex',
    flexDirection: 'column',
    width: '300px',
  },
  input: {
    marginBottom: '1rem',
    padding: '10px',
    fontSize: '1rem',
  },
  button: {
    padding: '10px',
    fontSize: '1rem',
    backgroundColor: '#007bff',
    color: '#fff',
    border: 'none',
    cursor: 'pointer',
  },
};

export default CustomerForm;

import React from 'react';
import { Link, Outlet } from 'react-router-dom';

const MainPage = () => {
  return (
    <div style={styles.container}>
      <nav style={styles.navbar}>
        <Link to="dashboard" style={styles.link}>Dashboard</Link>
        <Link to="customer" style={styles.link}>Customer</Link>
      </nav>
      <div style={styles.content}>
        <Outlet /> {/* Placeholder for nested routes */}
      </div>
    </div>
  );
};

const styles = {
  container: {
    display: 'flex',
    flexDirection: 'column',
    height: '100vh',
  },
  navbar: {
    display: 'flex',
    justifyContent: 'space-around',
    padding: '1rem',
    backgroundColor: '#333',
  },
  link: {
    color: '#fff',
    textDecoration: 'none',
    fontSize: '1.2rem',
  },
  content: {
    flex: 1,
    padding: '1rem',
  },
};

export default MainPage;

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';

const LoginPage = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const navigate = useNavigate();

  const handleLogin = (e) => {
    e.preventDefault();

    // Simple mock authentication logic
    if (username === 'admin' && password === 'password') {
      alert('Login Successful!');
      navigate('/main'); // Navigate to the Main Page and Dashboard by default
    } else {
      alert('Invalid credentials. Please try again!');
    }
  };

  return (
    <div style={styles.container}>
      <h1 style={styles.heading}>Login to Insurance Portal</h1>
      <form onSubmit={handleLogin} style={styles.form}>
        <input
          type="text"
          name="username"
          placeholder="Username"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          style={styles.input}
          required
        />
        <input
          type="password"
          name="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          style={styles.input}
          required
        />
        <button type="submit" style={styles.button}>Login</button>
      </form>
    </div>
  );
};

const styles = {
  container: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100vh',
    backgroundColor: '#f7f9fc',
  },
  heading: {
    fontSize: '2rem',
    marginBottom: '1.5rem',
  },
  form: {
    display: 'flex',
    flexDirection: 'column',
    width: '300px',
  },
  input: {
    marginBottom: '1rem',
    padding: '10px',
    fontSize: '1rem',
  },
  button: {
    padding: '10px',
    fontSize: '1rem',
    backgroundColor: '#007bff',
    color: '#fff',
    border: 'none',
    cursor: 'pointer',
  },
};

export default LoginPage;

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import LoginPage from './components/LoginPage';
import MainPage from './components/MainPage';
import Dashboard from './components/Dashboard';
import CustomerForm from './components/CustomerForm';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<LoginPage />} />
        <Route path="/main" element={<MainPage />}>
          <Route path="dashboard" element={<Dashboard />} />
          <Route path="customer" element={<CustomerForm />} />
        </Route>
      </Routes>
    </Router>
  );
}

export default App;

npm start