tengo esto:
import React, { useState } from 'react';

// Mock data for demonstration purposes
const serviceRequests = [
  { id: 1, title: 'Request 1', description: 'Description 1', status: 'Open' },
  { id: 2, title: 'Request 2', description: 'Description 2', status: 'In Progress' },
  { id: 3, title: 'Request 3', description: 'Description 3', status: 'Resolved' },
];

const incidents = [
  { id: 1, title: 'Incident 1', description: 'Description 1', status: 'Open' },
  { id: 2, title: 'Incident 2', description: 'Description 2', status: 'In Progress' },
  { id: 3, title: 'Incident 3', description: 'Description 3', status: 'Resolved' },
];

function App() {
  const [showServiceRequests, setShowServiceRequests] = useState(true);
  const [showIncidents, setShowIncidents] = useState(false);
  const [showReports, setShowReports] = useState(false);
  const [darkMode, setDarkMode] = useState(false);

  const toggleDarkMode = () => {
    setDarkMode(!darkMode);
  };

  const toggleServiceRequests = () => {
    setShowServiceRequests(true);
    setShowIncidents(false);
    setShowReports(false);
  };

  const toggleIncidents = () => {
    setShowServiceRequests(false);
    setShowIncidents(true);
    setShowReports(false);
  };

  const toggleReports = () => {
    setShowServiceRequests(false);
    setShowIncidents(false);
    setShowReports(true);
  };

  return (
    <div
      className={`min- ${
        darkMode ? 'bg-gray-900 text-white' : 'bg-gray-100 text-gray-900'
      }`}
    >
      {/* Header */}
      <header className="bg-orange-500 text-white py-4">
        <div className="container mx-auto flex justify-between items-center">
          <h1 className="text-2xl font-bold">IT Service Management</h1>
          <button
            className="bg-orange-700 hover:bg-orange-800 px-4 py-2 rounded"
            onClick={toggleDarkMode}
          >
            {darkMode ? 'Light Mode' : 'Dark Mode'}
          </button>
        </div>
      </header>

      {/* Navigation */}
      <nav className="bg-orange-200 text-orange-700 py-4">
        <div className="container mx-auto flex justify-between items-center">
          <button
            className={`${
              showServiceRequests ? 'bg-orange-500 text-white' : ''
            } hover:bg-orange-500 hover:text-white px-4 py-2 rounded`}
            onClick={toggleServiceRequests}
          >
            Service Requests
          </button>
          <button
            className={`${
              showIncidents ? 'bg-orange-500 text-white' : ''
            } hover:bg-orange-500 hover:text-white px-4 py-2 rounded`}
            onClick={toggleIncidents}
          >
            Incidents
          </button>
          <button
            className={`${
              showReports ? 'bg-orange-500 text-white' : ''
            } hover:bg-orange-500 hover:text-white px-4 py-2 rounded`}
            onClick={toggleReports}
          >
            Reports
          </button>
        </div>
      </nav>

      {/* Dashboard */}
      <main className="container mx-auto p-4">
        {showServiceRequests && (
          <div>
            <h2 className="text-2xl font-bold mb-4">Service Requests</h2>
            <table className="w-full">
              <thead>
                <tr>
                  <th className="px-4 py-2">ID</th>
                  <th className="px-4 py-2">Title</th>
                  <th className="px-4 py-2">Description</th>
                  <th className="px-4 py-2">Status</th>
                </tr>
              </thead>
              <tbody>
                {serviceRequests.map((request) => (
                  <tr key={request.id}>
                    <td className="px-4 py-2">{request.id}</td>
                    <td className="px-4 py-2">{request.title}</td>
                    <td className="px-4 py-2">{request.description}</td>
                    <td className="px-4 py-2">{request.status}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}

        {showIncidents && (
          <div>
            <h2 className="text-2xl font-bold mb-4">Incidents</h2>
            <table className="w-full">
              <thead>
                <tr>
                  <th className="px-4 py-2">ID</th>
                  <th className="px-4 py-2">Title</th>
                  <th className="px-4 py-2">Description</th>
                  <th className="px-4 py-2">Status</th>
                </tr>
              </thead>
              <tbody>
                {incidents.map((incident) => (
                  <tr key={incident.id}>
                    <td className="px-4 py-2">{incident.id}</td>
                    <td className="px-4 py-2">{incident.title}</td>
                    <td className="px-4 py-2">{incident.description}</td>
                    <td className="px-4 py-2">{incident.status}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}

        {showReports && (
          <div>
            <h2 className="text-2xl font-bold mb-4">Reports</h2>
            <p>
              This is a sample report. You can generate reports based on service
              requests and incidents.
            </p>
          </div>
        )}
      </main>
    </div>
  );
}

export default App;

pero necesito implementar esto:

import React, { useState } from "react";
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, BarElement } from "chart.js";
import { Line, Bar } from "react-chartjs-2";
import { FaTicketAlt, FaChartLine, FaBell, FaUser, FaCog, FaSearch } from "react-icons/fa";

ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, Title, Tooltip, Legend);

const ITServiceDashboard = () => {
  const [activeTab, setActiveTab] = useState("dashboard");
  const [formData, setFormData] = useState({
    title: "",
    description: "",
    priority: "medium",
    category: "incident",
    email: ""
  });

  const lineChartData = {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    datasets: [
      {
        label: "Incidents",
        data: [65, 59, 80, 81, 56, 55],
        borderColor: "rgb(249, 115, 22)",
        backgroundColor: "rgba(249, 115, 22, 0.5)",
      },
    ],
  };

  const barChartData = {
    labels: ["Critical", "High", "Medium", "Low"],
    datasets: [
      {
        label: "Priority Distribution",
        data: [12, 19, 3, 5],
        backgroundColor: "rgba(249, 115, 22, 0.5)",
      },
    ],
  };

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

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Form submitted:", formData);
  };

  return (
    <div className="min-h-screen bg-gray-100">
      {/* Header */}
      <header className="bg-white shadow-md">
        <div className="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
          <h1 className="text-2xl font-bold text-orange-500">IT Service Management</h1>
          <div className="flex items-center space-x-4">
            <FaBell className="text-gray-600 text-xl cursor-pointer hover:text-orange-500" />
            <FaUser className="text-gray-600 text-xl cursor-pointer hover:text-orange-500" />
            <FaCog className="text-gray-600 text-xl cursor-pointer hover:text-orange-500" />
          </div>
        </div>
      </header>

      <div className="max-w-7xl mx-auto px-4 py-8">
        {/* Navigation */}
        <nav className="mb-8">
          <ul className="flex space-x-4">
            <li>
              <button
                onClick={() => setActiveTab("dashboard")}
                className={`px-4 py-2 rounded-lg ${activeTab === "dashboard" ? "bg-orange-500 text-white" : "bg-white text-gray-600"}`}
              >
                Dashboard
              </button>
            </li>
            <li>
              <button
                onClick={() => setActiveTab("request")}
                className={`px-4 py-2 rounded-lg ${activeTab === "request" ? "bg-orange-500 text-white" : "bg-white text-gray-600"}`}
              >
                New Request
              </button>
            </li>
            <li>
              <button
                onClick={() => setActiveTab("reports")}
                className={`px-4 py-2 rounded-lg ${activeTab === "reports" ? "bg-orange-500 text-white" : "bg-white text-gray-600"}`}
              >
                Reports
              </button>
            </li>
          </ul>
        </nav>

        {/* Dashboard Content */}
        {activeTab === "dashboard" && (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h2 className="text-xl font-semibold mb-4">Open Tickets</h2>
              <div className="text-4xl font-bold text-orange-500">24</div>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h2 className="text-xl font-semibold mb-4">Average Response Time</h2>
              <div className="text-4xl font-bold text-orange-500">2.5h</div>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h2 className="text-xl font-semibold mb-4">Customer Satisfaction</h2>
              <div className="text-4xl font-bold text-orange-500">94%</div>
            </div>
            <div className="col-span-full md:col-span-2 bg-white p-6 rounded-lg shadow-md">
              <h2 className="text-xl font-semibold mb-4">Incident Trends</h2>
              <Line data={lineChartData} />
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h2 className="text-xl font-semibold mb-4">Priority Distribution</h2>
              <Bar data={barChartData} />
            </div>
          </div>
        )}

        {/* Service Request Form */}
        {activeTab === "request" && (
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h2 className="text-2xl font-semibold mb-6">Submit New Request</h2>
            <form onSubmit={handleSubmit} className="space-y-6">
              <div>
                <label className="block text-sm font-medium text-gray-700">Title</label>
                <input
                  type="text"
                  name="title"
                  value={formData.title}
                  onChange={handleInputChange}
                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500"
                  required
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700">Description</label>
                <textarea
                  name="description"
                  value={formData.description}
                  onChange={handleInputChange}
                  rows="4"
                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500"
                  required
                ></textarea>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label className="block text-sm font-medium text-gray-700">Priority</label>
                  <select
                    name="priority"
                    value={formData.priority}
                    onChange={handleInputChange}
                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500"
                  >
                    <option value="low">Low</option>
                    <option value="medium">Medium</option>
                    <option value="high">High</option>
                    <option value="critical">Critical</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700">Category</label>
                  <select
                    name="category"
                    value={formData.category}
                    onChange={handleInputChange}
                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500"
                  >
                    <option value="incident">Incident</option>
                    <option value="service_request">Service Request</option>
                    <option value="problem">Problem</option>
                    <option value="change">Change</option>
                  </select>
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700">Email</label>
                <input
                  type="email"
                  name="email"
                  value={formData.email}
                  onChange={handleInputChange}
                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500"
                  required
                />
              </div>
              <button
                type="submit"
                className="w-full bg-orange-500 text-white py-2 px-4 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2"
              >
                Submit Request
              </button>
            </form>
          </div>
        )}

        {/* Reports */}
        {activeTab === "reports" && (
          <div className="space-y-6">
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h2 className="text-2xl font-semibold mb-6">Performance Analytics</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <h3 className="text-lg font-medium mb-4">Incident Trends</h3>
                  <Line data={lineChartData} />
                </div>
                <div>
                  <h3 className="text-lg font-medium mb-4">Priority Distribution</h3>
                  <Bar data={barChartData} />
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default ITServiceDashboard;


como quedaria mi app entonces