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

import { User } from "@/types";
import { Link } from "@inertiajs/react";
import { PropsWithChildren } from "react";
import { Edit3, Folder, FolderPlus, Trash2 } from "react-feather";

export default function ProjectsOverview({ user }: PropsWithChildren<{ user: User }>) {
    const thisUser = user;

    const renderProjectOverviewContent = () => {
        switch (thisUser.role_id) {
            case 1:
                return (
                    <div>
                        <p className="font-bold text-xl flex items-center"><Folder className="stroke-[#00F5D4] mr-2" />Projects Overview</p>
                        <div className="flex align-center">
                            <div className="stats stats-vertical shadow mt-2 w-1/4">
                                <div className="stat text-center">
                                    <div className="stat-value text-[#00F5D4]">000</div>
                                    <div className="stat-desc text-black">Total Projects</div>
                                </div>

                                <div className="stat text-center">
                                    <div className="stat-value text-secondary-main">000</div>
                                    <div className="stat-desc text-black">Active Projects</div>
                                </div>

                                <div className="stat text-center">
                                    <div className="stat-value text-secondary-main">000</div>
                                    <div className="stat-desc text-black">Completed Projects</div>
                                </div>
                            </div>

                            <div className="w-full px-4">
                                <div className="divider text-secondary-main font-semibold">Latest Projects</div>
                                <table className="table">
                                    <thead>
                                        <tr>
                                            <th className="w-auto">Project Name</th>
                                            <th>Team Lead</th>
                                            <th>Status</th>
                                            <th className="w-[10px]"></th>
                                            <th className="w-[10px]"></th>
                                        </tr>
                                    </thead>
                                    
                                    <tbody>
                                        <tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white">
                                            <td>Project Title</td>
                                            <td>User</td>
                                            <td>Active</td>
                                            <td><Edit3 className="stroke-warning-main active:stroke-neutral-10" size={20} /></td>
                                            <td><Trash2 className="stroke-error-main active:stroke-neutral-10" size={20} /></td>
                                        </tr>
                                        <tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white">
                                            <td>Project Title</td>
                                            <td>User</td>
                                            <td>Completed</td>
                                            <td><Edit3 className="stroke-warning-main active:stroke-neutral-10" size={20} /></td>
                                            <td><Trash2 className="stroke-error-main active:stroke-neutral-10" size={20} /></td>
                                        </tr>
                                        <tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white">
                                            <td>Project Title</td>
                                            <td>User</td>
                                            <td>Inactive</td>
                                            <td><Edit3 className="stroke-warning-main active:stroke-neutral-10" size={20} /></td>
                                            <td><Trash2 className="stroke-error-main active:stroke-neutral-10" size={20} /></td>
                                        </tr>
                                        <tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white">
                                            <td>Project Title</td>
                                            <td>User</td>
                                            <td>Inactive</td>
                                            <td><Edit3 className="stroke-warning-main active:stroke-neutral-10" size={20} /></td>
                                            <td><Trash2 className="stroke-error-main active:stroke-neutral-10" size={20} /></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                );
            case 2:
                return (
                    <div>
                        <div className="w-full px-4">
                            <div className="flex justify-between items-center">
                                <p className="font-bold text-xl flex items-center"><Folder className="stroke-primary-main mr-2" />Current Projects</p>
                                <div>
                                    <div className="btn btn-link text-success-main p-0 mr-8"><Folder size={20} />View all</div>
                                    <div className="btn btn-link text-primary-main p-0"><FolderPlus size={20} />Create new</div>
                                </div>
                            </div>
                            <table className="table w-full">
                                <thead>
                                    <th className="w-1/2">Project Title</th>
                                    <th className="w-1/3">Status</th>
                                    <th></th>
                                    <th></th>
                                </thead>

                                <tbody>
                                    <tr className="text-sm hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white">
                                        <td className='text-sm leading-4 py-2 w-1/2'><Link href="">Project Title</Link></td>
                                        <td className="text-sm leading-4 py-2 w-1/3"><Link href="">Ongoing</Link></td>
                                        <td><Edit3 className="stroke-warning-main active:stroke-neutral-10" size={20} /></td>
                                        <td><Trash2 className="stroke-error-main active:stroke-neutral-10" size={20} /></td>
                                    </tr>
                                    <tr className="text-sm hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white">
                                        <td className='text-sm leading-4 py-2 w-1/2'><Link href="">Project Title</Link></td>
                                        <td className="text-sm leading-4 py-2 w-1/3"><Link href="">Completed</Link></td>
                                        <td><Edit3 className="stroke-warning-main active:stroke-neutral-10" size={20} /></td>
                                        <td><Trash2 className="stroke-error-main active:stroke-neutral-10" size={20} /></td>
                                    </tr>
                                    <tr className="text-sm hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white">
                                        <td className='text-sm leading-4 py-2 w-1/2'><Link href="">Project Title</Link></td>
                                        <td className="text-sm leading-4 py-2 w-1/3"><Link href="">Archived</Link></td>
                                        <td><Edit3 className="stroke-warning-main active:stroke-neutral-10" size={20} /></td>
                                        <td><Trash2 className="stroke-error-main active:stroke-neutral-10" size={20} /></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                );
            case 3:
                return (
                    <div></div>
                );
            default:
                return null;
        }
    }
    
    return (
        <div className="bg-neutral-10 shadow-md p-6 rounded-lg h-full w-full">
            {renderProjectOverviewContent()}
        </div>
    )
}