Styled App Bar - Copy this React, Mui Component to your project

Import React, { useState, useEffect } from "react"; import { useNavigate } from "react router dom"; import { FaSpinner, FaExclamationCircle, FaPlus, FaUser, FaClock, FaTimes } from "react icons/fa"; import './CustomerSupportDashboard.css'; const baseUrl = process.env.REACT_APP_API_URL; const CustomerSupportDashboard = () => { const [issues, setIssues] = useState([]); const [selectedIssue, setSelectedIssue] = useState(null); const [statusMessage, setStatusMessage] = useState(""); const [loading, setLoading] = useState(true); const navigate = useNavigate(); useEffect(() => { const fetchIssues = async () => { const userId = parseInt(sessionStorage.getItem("id"), 10); const token = sessionStorage.getItem("token"); if (!userId || !token) { setStatusMessage("User not logged in or token missing!"); setLoading(false); return; } try { const response = await fetch(`${baseUrl}/Issues/customer/${userId}`, { method: "GET", headers: { Authorization: `Bearer ${token}`, "Content Type": "application/json", }, }); if (!response.ok) { throw new Error("Failed to fetch issues"); } const data = await response.json(); setIssues(data); } catch (error) { setStatusMessage("No Issues Found....Please raise a ticket if any"); } finally { setLoading(false); } }; fetchIssues(); }, []); const handleRaiseIssue = () => { navigate("/customer support"); }; const getPriorityColor = (priority) => { switch (priority?.toLowerCase()) { case "high": return "bg orange 100 text orange 800"; case "medium": return "bg yellow 100 text yellow 800"; case "critical": return "bg red 100 text red 800"; default: return "bg gray 100 text gray 800"; } }; const getStatusColor = (status) => { switch (status?.toLowerCase()) { case "open": return "bg green 100 text green 800"; case "in progress": return "bg blue 100 text blue 800"; case "closed": return "bg gray 100 text gray 800"; default: return "bg gray 100 text gray 800"; } }; return ( <div className="min h screen bg gray 50 py 8 px 4 sm:px 6 lg:px 8"> <div className="max w 7xl mx auto"> <div className="bg white rounded lg shadow md overflow hidden"> <div className="p 6 border b border gray 200"> <div className="flex justify between items center"> <h1 className="text 2xl font bold text gray 900">Customer Support Dashboard</h1> <button onClick={handleRaiseIssue} className="inline flex items center px 4 py 2 border border transparent rounded md shadow sm text sm font medium text white bg blue 600 hover:bg blue 700 focus:outline none focus:ring 2 focus:ring offset 2 focus:ring blue 500 transition duration 200" > <FaPlus className="mr 2" /> Raise a New Issue </button> </div> </div> <div className="p 6"> {statusMessage && ( <div className="mb 4 flex items center p 4 bg red 100 rounded md"> <FaExclamationCircle className="text red 800 mr 2" /> <span className="text red 800">{statusMessage}</span> </div> )} {loading && ( <div className="flex justify center py 10"> <FaSpinner className="animate spin text blue 600 text 4xl" /> </div> )} <div className="grid grid cols 1 md:grid cols 2 lg:grid cols 3 gap 6"> {issues.map((issue) => ( <div key={issue.issueId} className="bg white rounded lg shadow md hover:shadow lg transition shadow duration 300" > <div className="p 6"> <div className="flex items center justify between mb 4"> <div className="text sm text gray 500">ID: #{issue.issueId}</div> <div className="text sm text gray 500">Order: {issue.orderId}</div> </div> <div className="flex justify between items start mb 3"> <h3 className="text lg font semibold text gray 900">{issue.issueType}</h3> <span className={`px 2 py 1 text xs font semibold rounded full ${getPriorityColor(issue.priority)}`} > {issue.priority || "N/A"} </span> </div> <p className="text gray 600 mb 4 text sm">{issue.issueDescription}</p> <div className="border t border gray 200 pt 4"> <div className="flex items center justify between"> <div className="flex items center space x 4"> <div className="flex items center text sm text gray 500"> <FaUser className="mr 2" /> {issue.assignedTo || "Unassigned"} </div> <div className="flex items center text sm text gray 500"> <FaClock className="mr 2" /> {issue.createdDate || "Unknown"} </div> </div> <button onClick={() => setSelectedIssue(issue)} className="px 3 py 1 text sm text blue 600 hover:bg blue 50 rounded md transition colors duration 200" > View Details </button> </div> </div> </div> </div> ))} </div> </div> </div> </div> {selectedIssue && ( <div className="fixed inset 0 bg black bg opacity 50 z 50 flex items center justify center p 4"> <div className="bg white rounded lg shadow xl max w 2xl w full max h [90vh] overflow y auto"> <div className="p 6"> <div className="flex justify between items start mb 4"> <h2 className="text xl font bold text gray 900">{selectedIssue.issueType}</h2> <button onClick={() => setSelectedIssue(null)} className="text gray 400 hover:text gray 500 transition colors duration 200" > <FaTimes className="w 5 h 5" /> </button> </div> <div className="space y 4"> <div className="bg gray 50 p 4 rounded lg"> <h3 className="font semibold text gray 900 mb 2">Description</h3> <p className="text gray 600">{selectedIssue.issueDescription}</p> </div> <div className="bg blue 50 p 4 rounded lg"> <h3 className="font semibold text blue 900 mb 2">Support Reply</h3> <p className="text blue 600">{selectedIssue.reply || "No reply yet."}</p> </div> </div> </div> </div> </div> )} </div> ); }; export default CustomerSupportDashboard;