You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
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> ) }
|