codehub_/resources/js/Components/DashboardComponents/Feedback.tsx

import { AlertCircle, ArrowUpCircle, CheckSquare, Square, XCircle, XSquare } from "react-feather";

export default function Feedback() {
    return (
        // For superadmin
        <div className="bg-neutral-10 shadow-md p-6 rounded-lg h-full w-full flex flex-col">
            <p className="font-bold text-xl">Reports and Feedback</p>

            <div className="divider text-secondary-main font-semibold">Latest Reported Pages</div>
            <div className="flex-grow px-0">
                <table className="table w-full">
                    <thead>
                        <tr>
                            <th>Page</th>
                            <th>Flag</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr className="hover:cursor-pointer hover:bg-secondary-background">
                            <td>Page ID</td>
                            <td><XCircle className="stroke-error-main" size={18} /></td>
                            <td><Square className="stroke-info-main" size={18} /></td>
                        </tr>
                        <tr className="hover:cursor-pointer hover:bg-secondary-background">
                            <td>Page ID</td>
                            <td><XCircle className="stroke-error-main" size={18} /></td>
                            <td><XSquare className="stroke-error-main" size={18} /></td>
                        </tr>
                        <tr className="hover:cursor-pointer hover:bg-secondary-background">
                            <td>Page ID</td>
                            <td><XCircle className="stroke-error-main" size={18} /></td>
                            <td><CheckSquare className="stroke-success-main" size={18} /></td>
                        </tr>
                        <tr className="hover:cursor-pointer hover:bg-secondary-background">
                            <td>Page ID</td>
                            <td><AlertCircle className="stroke-warning-main" size={18} /></td>
                            <td><Square className="stroke-info-main" size={18} /></td>
                        </tr>
                        <tr className="hover:cursor-pointer hover:bg-secondary-background">
                            <td>Page ID</td>
                            <td><AlertCircle className="stroke-warning-main" size={18} /></td>
                            <td><XSquare className="stroke-error-main" size={18} /></td>
                        </tr>
                        <tr className="hover:cursor-pointer hover:bg-secondary-background">
                            <td>Page ID</td>
                            <td><AlertCircle className="stroke-warning-main" size={18} /></td>
                            <td><CheckSquare className="stroke-success-main" size={18} /></td>
                        </tr>
                        <tr className="hover:cursor-pointer hover:bg-secondary-background">
                            <td>Page ID</td>
                            <td><ArrowUpCircle className="stroke-success-main" size={18} /></td>
                            <td><CheckSquare className="stroke-success-main" size={18} /></td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div className="btn btn-link text-[#0F4C5C] p-0 mt-auto">View all notifications</div>
        </div>
    )
}