EJ-Dannug
3 months ago
29 changed files with 981 additions and 133 deletions
-
40resources/js/Components/DashboardComponents/BookmarkedPages.tsx
-
42resources/js/Components/DashboardComponents/BulletinBoard.tsx
-
41resources/js/Components/DashboardComponents/ContentStatistics.tsx
-
62resources/js/Components/DashboardComponents/Feedback.tsx
-
85resources/js/Components/DashboardComponents/PagesOverview.tsx
-
101resources/js/Components/DashboardComponents/PinnedProjectDetails.tsx
-
45resources/js/Components/DashboardComponents/PinnedProjects.tsx
-
138resources/js/Components/DashboardComponents/ProjectsOverview.tsx
-
36resources/js/Components/DashboardComponents/RecentLogs.tsx
-
48resources/js/Components/DashboardComponents/RecentlyViewedPages.tsx
-
51resources/js/Components/DashboardComponents/SystemAnnouncement.tsx
-
44resources/js/Components/DashboardComponents/UsersStatistics.tsx
-
2resources/js/Components/Footer.tsx
-
16resources/js/Components/ModalButton.tsx
-
18resources/js/Components/NavIconLink.tsx
-
2resources/js/Components/PrimaryButton.tsx
-
92resources/js/Layouts/AuthenticatedLayout.tsx
-
28resources/js/Layouts/DashboardLayouts/AdminLayout.tsx
-
27resources/js/Layouts/DashboardLayouts/EndUserLayout.tsx
-
38resources/js/Layouts/DashboardLayouts/SuperadminLayout.tsx
-
3resources/js/Layouts/GuestLayout.tsx
-
14resources/js/Pages/About.tsx
-
23resources/js/Pages/Auth/Login.tsx
-
31resources/js/Pages/Auth/Register.tsx
-
40resources/js/Pages/Dashboard.tsx
-
38resources/js/Pages/Help.tsx
-
1resources/js/Pages/Profile/Edit.tsx
-
2resources/js/Pages/Welcome.tsx
-
4routes/web.php
@ -0,0 +1,40 @@ |
|||
import { User } from "@/types"; |
|||
import { Link } from "@inertiajs/react"; |
|||
import { PropsWithChildren } from "react"; |
|||
import { Book, FileMinus } from "react-feather"; |
|||
|
|||
export default function BookmarkedPages({ user }: PropsWithChildren<{ user: User }>) { |
|||
const thisUser = user; |
|||
|
|||
return ( |
|||
<div className="h-full w-full bg-neutral-10 shadow-md p-6 rounded-lg flex flex-col"> |
|||
<p className="font-bold text-xl flex items-center"><Book className="stroke-[#29BF12] mr-2" />Bookmarked Pages</p> |
|||
<table className="table mt-2"> |
|||
<tbody> |
|||
<tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white"> |
|||
<td className='text-md leading-4 py-2 w-full'><Link href=''> |
|||
Page Title<br /> |
|||
<span className="text-xs"><i>Subject Category</i></span> |
|||
</Link></td> |
|||
<td><FileMinus 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 className='text-md leading-4 py-2 w-full'><Link href=''> |
|||
Page Title<br /> |
|||
<span className="text-xs"><i>Subject Category</i></span> |
|||
</Link></td> |
|||
<td><FileMinus 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 className='text-md leading-4 py-2 w-full'><Link href=''> |
|||
Page Title<br /> |
|||
<span className="text-xs"><i>Subject Category</i></span> |
|||
</Link></td> |
|||
<td><FileMinus className="stroke-error-main active:stroke-neutral-10" size={20} /></td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<div className="btn btn-link text-secondary-main p-0 mt-auto mb-0">View all bookmarks</div> |
|||
</div> |
|||
) |
|||
} |
@ -0,0 +1,42 @@ |
|||
import { User } from "@/types"; |
|||
import { PropsWithChildren } from "react"; |
|||
import { Layout } from "react-feather"; |
|||
import SystemAnnouncement from "./SystemAnnouncement"; |
|||
import PinnedProjects from "./PinnedProjects"; |
|||
|
|||
export default function BulletinBoard({ user }: PropsWithChildren<{ user: User }>) { |
|||
const thisUser = user; |
|||
|
|||
const renderBulletinBoardContent = () => { |
|||
switch (thisUser.role_id) { |
|||
case 1: |
|||
return null; |
|||
case 2: |
|||
return ( |
|||
<div className="flex"> |
|||
<section className="w-1/3"><SystemAnnouncement /></section> |
|||
<div className="divider divider-horizontal"></div> |
|||
<section className="w-full"><PinnedProjects user={thisUser} /></section> |
|||
</div> |
|||
); |
|||
case 3: |
|||
return ( |
|||
<div className="flex"> |
|||
<section className="w-1/3"><SystemAnnouncement /></section> |
|||
<div className="divider divider-horizontal"></div> |
|||
<section className="w-full"><PinnedProjects user={thisUser} /></section> |
|||
</div> |
|||
); |
|||
default: |
|||
return null; |
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<div className="h-full w-full bg-neutral-10 shadow-md p-6 rounded-lg"> |
|||
<p className="font-bold text-xl text-primary-main flex items-center"><Layout className="stroke-primary-main mr-2" />Bulletin Board</p> |
|||
<div className="divider"></div> |
|||
{renderBulletinBoardContent()} |
|||
</div> |
|||
) |
|||
} |
@ -0,0 +1,41 @@ |
|||
import { Archive, Code, FileText, Hash } from "react-feather"; |
|||
|
|||
export default function ContentStatistics () { |
|||
return ( |
|||
// For superadmin
|
|||
<div className="stats shadow w-full h-full rounded-lg py-2"> |
|||
<div className="stat h-full"> |
|||
<div className="stat-figure"> |
|||
<Archive className="stroke-[#8338EC]" size={40} /> |
|||
</div> |
|||
<div className="stat-title font-semibold text-black">Subject Categories</div> |
|||
<div className="stat-value text-[#8338EC]">000</div> |
|||
<div className="stat-desc"><span className="btn btn-link p-0 text-xs text-black">View all categories</span></div> |
|||
</div> |
|||
<div className="stat"> |
|||
<div className="stat-figure"> |
|||
<FileText className="stroke-[#FF006E]" size={40} /> |
|||
</div> |
|||
<div className="stat-title font-semibold text-black">Repository Pages</div> |
|||
<div className="stat-value text-[#FF006E]">000</div> |
|||
<div className="stat-desc"><span className="btn btn-link p-0 text-xs text-black">View all pages</span></div> |
|||
</div> |
|||
<div className="stat"> |
|||
<div className="stat-figure"> |
|||
<Hash className="stroke-[#FB5607]" size={40} /> |
|||
</div> |
|||
<div className="stat-title font-semibold text-black">Programming Languages</div> |
|||
<div className="stat-value text-[#FB5607]">000</div> |
|||
<div className="stat-desc"><span className="btn btn-link p-0 text-xs text-black">View all languages</span></div> |
|||
</div> |
|||
<div className="stat"> |
|||
<div className="stat-figure"> |
|||
<Code className="stroke-[#FFBE0B]" size={40} /> |
|||
</div> |
|||
<div className="stat-title font-semibold text-black">Code Snippets</div> |
|||
<div className="stat-value text-[#FFBE0B]">000</div> |
|||
<div className="stat-desc text-black">Last added code snippets</div> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
@ -0,0 +1,62 @@ |
|||
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> |
|||
) |
|||
} |
@ -0,0 +1,85 @@ |
|||
import { Edit3, File, FilePlus, Globe, Trash2 } from "react-feather"; |
|||
|
|||
export default function PagesOverview() { |
|||
return ( |
|||
<div className="bg-neutral-10 shadow-md p-6 rounded-lg h-full w-full"> |
|||
<div className="flex justify-between items-center"> |
|||
<p className="font-bold text-xl flex items-center"><Globe className="stroke-primary-main mr-2" />Page Activities</p> |
|||
<div> |
|||
<div className="btn btn-link text-success-main p-0 mr-8"><File size={20} />Manage pages</div> |
|||
<div className="btn btn-link text-primary-main p-0"><FilePlus size={20} />Add new page</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div className="divider text-secondary-main font-semibold">Latest Added Pages</div> |
|||
<div className="w-full px-6"> |
|||
<table className="table"> |
|||
<thead> |
|||
<tr> |
|||
<th className="w-auto">Title</th> |
|||
<th className="w-1/3">Category</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>Page Title</td> |
|||
<td>Subject Category</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>Page Title</td> |
|||
<td>Subject Category</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>Page Title</td> |
|||
<td>Subject Category</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 className="divider text-secondary-main font-semibold">Latest Modified Pages</div> |
|||
<div className="w-full px-6"> |
|||
<table className="table"> |
|||
<thead> |
|||
<tr> |
|||
<th className="w-auto">Title</th> |
|||
<th className="w-1/3">Category</th> |
|||
<th className="w-[10px]"></th> {/* Edit icon */} |
|||
<th className="w-[10px]"></th> {/* Delete icon */} |
|||
</tr> |
|||
</thead> |
|||
|
|||
<tbody> |
|||
<tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white"> |
|||
<td>Page Title</td> |
|||
<td>Subject Category</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>Page Title</td> |
|||
<td>Subject Category</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>Page Title</td> |
|||
<td>Subject Category</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> |
|||
) |
|||
} |
@ -0,0 +1,101 @@ |
|||
import { User } from '@/types'; |
|||
import { Link } from '@inertiajs/react'; |
|||
import { PropsWithChildren } from 'react'; |
|||
import { ChevronLeft, ChevronRight, Folder, FolderMinus } from 'react-feather'; |
|||
|
|||
export default function PinnedProjectDetails({ user }: PropsWithChildren<{ user: User }>) { |
|||
const thisUser = user; |
|||
|
|||
const renderIfEndUser = () => { |
|||
if (thisUser.role_id===3) { |
|||
return ( |
|||
<div className='mt-auto'> |
|||
<div className='w-full flex flwx-row justify-evenly m-0 mt-2'> |
|||
<div className="btn btn-link text-secondary-main p-0"><Folder size={20} />View project details</div> |
|||
<div className="btn btn-link text-error-main p-0"><FolderMinus size={20} />Unpin project</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<div className='flex flex-col'> |
|||
<div className="navbar m-0 p-0"> |
|||
<div className="navbar-start"><Link href=""><ChevronLeft size={20} /></Link></div> |
|||
<div className="navbar-center"><Link href=""><span className="font-semibold text-lg">Project Name</span></Link></div> |
|||
<div className="navbar-end"><Link href=""><ChevronRight size={20} /></Link></div> |
|||
</div> |
|||
<article className="flex flex-row justify-center"> |
|||
<section className="w-3/4 bg-neutral-10 shadow-md mr-4 p-4 border rounded-lg"> |
|||
<p className="text-sm text-justify"><b>Description:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vehicula augue tellus, nec tempus diam tristique ut.</p> |
|||
<div className="flex"> |
|||
<p className="text-sm w-1/2"><b>Project created at:</b><br />Month / Day / Year hh:mm</p> |
|||
<p className="text-sm"><b>Project updated at:</b><br />Month / Day / Year hh:mm</p> |
|||
</div> |
|||
<div className="flex"> |
|||
<p className="text-sm w-1/2"><b>PL Framework:</b> PL version</p> |
|||
<p className="text-sm"><b>Status:</b> Active</p> |
|||
</div> |
|||
<div className="divider text-md font-bold">Frequently Referred Pages</div> |
|||
<table className="table w-full"> |
|||
<tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white"><Link href=""> |
|||
<td className='text-sm leading-4 py-2 w-1/2'>Page Title</td> |
|||
<td className='text-sm leading-4 py-2 w-1/3'>Subject</td> |
|||
<td className='text-sm leading-4 py-2 w-auto'>Notes</td> |
|||
</Link></tr> |
|||
<tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white"><Link href=""> |
|||
<td className='text-sm leading-4 py-2 w-1/2'>Page Title</td> |
|||
<td className='text-sm leading-4 py-2 w-1/3'>Subject</td> |
|||
<td className='text-sm leading-4 py-2 w-auto'>Notes</td> |
|||
</Link></tr> |
|||
<tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white"><Link href=""> |
|||
<td className='text-sm leading-4 py-2 w-1/2'>Page Title</td> |
|||
<td className='text-sm leading-4 py-2 w-1/3'>Subject</td> |
|||
<td className='text-sm leading-4 py-2 w-auto'>Notes</td> |
|||
</Link></tr> |
|||
<tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white"><Link href=""> |
|||
<td className='text-sm leading-4 py-2 w-1/2'>Page Title</td> |
|||
<td className='text-sm leading-4 py-2 w-1/3'>Subject</td> |
|||
<td className='text-sm leading-4 py-2 w-auto'>Notes</td> |
|||
</Link></tr> |
|||
<tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white"><Link href=""> |
|||
<td className='text-sm leading-4 py-2 w-1/2'>Page Title</td> |
|||
<td className='text-sm leading-4 py-2 w-1/3'>Subject</td> |
|||
<td className='text-sm leading-4 py-2 w-auto'>Notes</td> |
|||
</Link></tr> |
|||
</table> |
|||
</section> |
|||
|
|||
<aside className="w-1/4 bg-neutral-10 shadow-md p-4 border rounded-lg flex flex-col"> |
|||
<p className="text-sm text-center font-semibold divider m-0">Latest Activities</p> |
|||
<table className="table mt-2"> |
|||
<tbody> |
|||
<tr> |
|||
<td className='text-md leading-4 py-2 w-full'> |
|||
<span className="text-xs"><i>Month / Day / Year hh:mm:ss</i></span><br /> |
|||
User pinned Page Title |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td className='text-md leading-4 py-2 w-full'> |
|||
<span className="text-xs"><i>Month / Day / Year hh:mm:ss</i></span><br /> |
|||
Team Leader pinned Page Title |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td className='text-md leading-4 py-2 w-full'> |
|||
<span className="text-xs"><i>Month / Day / Year hh:mm:ss</i></span><br /> |
|||
Team Leader added User as Role |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<div className="btn btn-link text-secondary-main p-0 mt-auto mb-0">View all interactions</div> |
|||
</aside> |
|||
</article> |
|||
|
|||
{renderIfEndUser()} |
|||
</div> |
|||
); |
|||
} |
@ -0,0 +1,45 @@ |
|||
import { User } from "@/types"; |
|||
import { PropsWithChildren } from "react"; |
|||
import { ChevronLeft, ChevronRight, Folder } from "react-feather"; |
|||
import PinnedProjectDetails from "./PinnedProjectDetails"; |
|||
|
|||
export default function PinnedProjects({ user }: PropsWithChildren<{ user: User }>) { |
|||
const thisUser = user; |
|||
|
|||
const renderPinnedProjectsContent = () => { |
|||
switch (thisUser.role_id) { |
|||
case 1: |
|||
return null; |
|||
case 2: |
|||
return ( |
|||
<div className="w-full h-full"> |
|||
<div className="flex justify-between items-center"> |
|||
<p className="font-semibold text-md flex items-center p-0">Pinned Projects</p> |
|||
<div className="btn btn-link text-success-main p-0"><Folder size={20} />Manage pinned projects</div> |
|||
</div> |
|||
<div className="divider m-0"></div> |
|||
<PinnedProjectDetails user={thisUser} /> |
|||
</div> |
|||
); |
|||
case 3: |
|||
return ( |
|||
<div className="w-full h-full"> |
|||
<div className="flex justify-between items-center"> |
|||
<p className="font-semibold text-md flex items-center p-0">Pinned Projects</p> |
|||
<div className="btn btn-link text-success-main p-0"><Folder size={20} />View all projects</div> |
|||
</div> |
|||
<div className="divider m-0"></div> |
|||
<PinnedProjectDetails user={thisUser} /> |
|||
</div> |
|||
); |
|||
default: |
|||
return null; |
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<div className="h-full w-full px-2"> |
|||
{renderPinnedProjectsContent()} |
|||
</div> |
|||
); |
|||
} |
@ -0,0 +1,138 @@ |
|||
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> |
|||
) |
|||
} |
@ -0,0 +1,36 @@ |
|||
import { User } from "@/types"; |
|||
import { PropsWithChildren } from "react"; |
|||
import { Activity } from "react-feather"; |
|||
|
|||
export default function RecentLogs({ user }: PropsWithChildren<{ user: User }>) { |
|||
const thisUser = user; |
|||
|
|||
return ( |
|||
<div className="h-full w-full bg-neutral-10 shadow-md p-6 rounded-lg flex flex-col"> |
|||
<p className="font-bold text-xl flex items-center"><Activity className="stroke-[#FF9914] mr-2" />Recent Logs</p> |
|||
<table className="table mt-2"> |
|||
<tbody> |
|||
<tr> |
|||
<td className='text-md leading-4 py-2 w-full'> |
|||
<span className="text-xs"><i>Month / Day / Year hh:mm:ss</i></span><br /> |
|||
Bookmarked Page Title |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td className='text-md leading-4 py-2 w-full'> |
|||
<span className="text-xs"><i>Month / Day / Year hh:mm:ss</i></span><br /> |
|||
Viewed Page Title |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td className='text-md leading-4 py-2 w-full'> |
|||
<span className="text-xs"><i>Month / Day / Year hh:mm:ss</i></span><br /> |
|||
Logged in |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<div className="btn btn-link text-secondary-main p-0 mt-auto mb-0">View Activity Logs</div> |
|||
</div> |
|||
); |
|||
} |
@ -0,0 +1,48 @@ |
|||
import { User } from "@/types"; |
|||
import { Link } from "@inertiajs/react"; |
|||
import { PropsWithChildren } from "react"; |
|||
import { Book, BookOpen, FileMinus } from "react-feather"; |
|||
|
|||
export default function RecentPages({ user }: PropsWithChildren<{ user: User }>) { |
|||
const thisUser = user; |
|||
|
|||
return ( |
|||
<div className="h-full w-full bg-neutral-10 shadow-md p-6 rounded-lg flex flex-col"> |
|||
<p className="font-bold text-xl flex items-center"><BookOpen className="stroke-[#AAF683] mr-2" />Recently Viewed Pages</p> |
|||
<table className="table mt-2"> |
|||
<tbody> |
|||
<tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white"> |
|||
<td className='text-md leading-4 py-2 w-full'><Link href=''> |
|||
Page Title<br /> |
|||
<span className="text-xs"><i>Subject Category</i></span> |
|||
</Link></td> |
|||
</tr> |
|||
<tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white"> |
|||
<td className='text-md leading-4 py-2 w-full'><Link href=''> |
|||
Page Title<br /> |
|||
<span className="text-xs"><i>Subject Category</i></span> |
|||
</Link></td> |
|||
</tr> |
|||
<tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white"> |
|||
<td className='text-md leading-4 py-2 w-full'><Link href=''> |
|||
Page Title<br /> |
|||
<span className="text-xs"><i>Subject Category</i></span> |
|||
</Link></td> |
|||
</tr> |
|||
<tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white"> |
|||
<td className='text-md leading-4 py-2 w-full'><Link href=''> |
|||
Page Title<br /> |
|||
<span className="text-xs"><i>Subject Category</i></span> |
|||
</Link></td> |
|||
</tr> |
|||
<tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white"> |
|||
<td className='text-md leading-4 py-2 w-full'><Link href=''> |
|||
Page Title<br /> |
|||
<span className="text-xs"><i>Subject Category</i></span> |
|||
</Link></td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
) |
|||
} |
@ -0,0 +1,51 @@ |
|||
import { Link } from '@inertiajs/react'; |
|||
|
|||
export default function Announcement() { |
|||
const stdClassNames = "w-full my-1 btn rounded-none text-md font-normal justify-start text-left border-none bg-neutral-10 shadow-none hover:bg-secondary-background hover:border-none active:bg-primary-main active:border-none active:text-white"; |
|||
|
|||
return ( |
|||
<div className="h-full w-full px-2 flex flex-col"> |
|||
<p className="font-semibold text-md">System Announcement</p> |
|||
<table className="table"> |
|||
<tbody> |
|||
<tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white"> |
|||
<td className='text-md leading-4 py-2'><Link href=''> |
|||
<span className='text-xs'><i>Month / Date / Year hh:mm</i></span><br /> |
|||
Page Title has been added to Subject Category |
|||
</Link></td> |
|||
</tr> |
|||
<tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white"> |
|||
<td className='text-md text-justify leading-4 py-2'><Link href=''> |
|||
<span className='text-xs'><i>Month / Date / Year hh:mm</i></span><br /> |
|||
Page Title has been modified. |
|||
</Link></td> |
|||
</tr> |
|||
<tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white"> |
|||
<td className='text-md text-justify leading-4 py-2'><Link href=''> |
|||
<span className='text-xs'><i>Month / Date / Year hh:mm</i></span><br /> |
|||
Page Title has been deleted. |
|||
</Link></td> |
|||
</tr> |
|||
<tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white"> |
|||
<td className='text-md leading-4 py-2'><Link href=''> |
|||
<span className='text-xs'><i>Month / Date / Year hh:mm</i></span><br /> |
|||
Page Title has been archived. |
|||
</Link></td> |
|||
</tr> |
|||
<tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white"> |
|||
<td className='text-md leading-4 py-2'><Link href=''> |
|||
<span className='text-xs'><i>Month / Date / Year hh:mm</i></span><br /> |
|||
Subject Category has been added. |
|||
</Link></td> |
|||
</tr> |
|||
<tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white"> |
|||
<td className='text-md leading-4 py-2'><Link href=''> |
|||
<span className='text-xs'><i>Month / Date / Year hh:mm</i></span><br /> |
|||
Software Framework details has been modified. |
|||
</Link></td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
); |
|||
} |
@ -0,0 +1,44 @@ |
|||
import { User, UserPlus, Users } from "react-feather"; |
|||
|
|||
export default function UsersStatistics() { |
|||
return ( |
|||
// For Superadmin
|
|||
<div className="bg-neutral-10 shadow-md p-6 rounded-lg w-full h-full flex flex-col"> |
|||
<p className="font-bold text-xl flex items-center"><Users className="stroke-[#7209B7] mr-2" />Users</p> |
|||
<hr /> |
|||
<div className="flex flex-col items-center py-2"> |
|||
<div className="stat-value text-[#7209B7]">000</div> |
|||
<div className="stat-desc text-black">Total Users</div> |
|||
</div> |
|||
<hr /> |
|||
|
|||
<div className="join my-2 shadow w-full"> |
|||
<div className="join-item text-center px-2 border w-full"> |
|||
<div className="stat-value text-secondary-main">000</div> |
|||
<div className="stat-desc text-black">Team Leaders</div> |
|||
</div> |
|||
<div className="join-item text-center px-2 border w-full"> |
|||
<div className="stat-value text-secondary-main">000</div> |
|||
<div className="stat-desc text-black">Team Members</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div className="join my-2 shadow w-full"> |
|||
<div className="join-item text-center px-2 border w-full"> |
|||
<div className="stat-value text-secondary-main">000</div> |
|||
<div className="stat-desc text-black">Pending Invites</div> |
|||
</div> |
|||
<div className="join-item text-center px-2 border w-full"> |
|||
<div className="stat-value text-secondary-main">000</div> |
|||
<div className="stat-desc text-black">Revoked Invites</div> |
|||
</div> |
|||
</div> |
|||
<hr /> |
|||
|
|||
<div className="flex justify-between mt-auto"> |
|||
<div className="btn btn-link text-success-main p-0 mr-8"><User size={20} />Manage</div> |
|||
<div className="btn btn-link text-primary-main p-0"><UserPlus size={20} />Invite</div> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
@ -0,0 +1,16 @@ |
|||
import { ButtonHTMLAttributes } from 'react'; |
|||
|
|||
export default function ModalButton({ className = '', disabled, children, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) { |
|||
return ( |
|||
<button |
|||
{...props} |
|||
className={ |
|||
`mt-4 w-full btn outline-none text-lg ${disabled && 'opacity-25'} ` + |
|||
className |
|||
} |
|||
disabled={disabled} |
|||
> |
|||
{children} |
|||
</button> |
|||
); |
|||
} |
@ -0,0 +1,18 @@ |
|||
import { Link, InertiaLinkProps } from '@inertiajs/react'; |
|||
|
|||
export default function NavLink({ active = false, className = '', children, ...props }: InertiaLinkProps & { active: boolean }) { |
|||
return ( |
|||
<Link |
|||
{...props} |
|||
className={ |
|||
'btn m-0 bg-primary-background border-primary-background hover:bg-secondary-hover active:bg-secondary-pressed hover:bg-secondary-hover shadow-none ' + |
|||
(active |
|||
? 'bg-secondary-main border-secondary-main ' |
|||
: ' ') + |
|||
className |
|||
} |
|||
> |
|||
{children} |
|||
</Link> |
|||
); |
|||
} |
@ -0,0 +1,28 @@ |
|||
import BookmarkedPages from "@/Components/DashboardComponents/BookmarkedPages"; |
|||
import BulletinBoard from "@/Components/DashboardComponents/BulletinBoard"; |
|||
import ProjectsOverview from "@/Components/DashboardComponents/ProjectsOverview"; |
|||
import RecentLogs from "@/Components/DashboardComponents/RecentLogs"; |
|||
import { User } from "@/types"; |
|||
import { PropsWithChildren } from "react"; |
|||
|
|||
export default function Admin({ user }: PropsWithChildren<{ user: User }>) { |
|||
const thisUser = user; |
|||
|
|||
return ( |
|||
<div id="AdminDashboard" className="w-full h-full grid grid-cols-4 grid-rows-3 gap-6"> |
|||
<section className="col-start-1 col-span-4 row-start-1 row-span-2"> |
|||
<BulletinBoard user={thisUser} /> |
|||
</section> |
|||
<section className="col-span-2 row-span-1"> |
|||
<ProjectsOverview user={thisUser} /> |
|||
</section> |
|||
<section className="col-span-1 row-span-1"> |
|||
<BookmarkedPages user={thisUser} /> |
|||
</section> |
|||
<RecentLogs user={thisUser} /> |
|||
<section className="col-span-1 row-span-1"> |
|||
|
|||
</section> |
|||
</div> |
|||
); |
|||
} |
@ -0,0 +1,27 @@ |
|||
import BookmarkedPages from "@/Components/DashboardComponents/BookmarkedPages"; |
|||
import BulletinBoard from "@/Components/DashboardComponents/BulletinBoard"; |
|||
import RecentLogs from "@/Components/DashboardComponents/RecentLogs"; |
|||
import RecentPages from "@/Components/DashboardComponents/RecentlyViewedPages"; |
|||
import { User } from "@/types"; |
|||
import { PropsWithChildren } from "react"; |
|||
|
|||
export default function EndUser({ user }: PropsWithChildren<{ user: User }>) { |
|||
const thisUser = user; |
|||
|
|||
return ( |
|||
<div id="UserDashboard" className="w-full h-full grid grid-cols-3 grid-rows-3 gap-6"> |
|||
<section className="col-start-1 col-span-3 row-start-1 row-span-2"> |
|||
<BulletinBoard user={thisUser} /> |
|||
</section> |
|||
<section className="col-span-1 row-span-1 bg-neutral-10 h-full"> |
|||
<BookmarkedPages user={thisUser} /> |
|||
</section> |
|||
<section className="col-span-1 row-span-1 bg-neutral-10 h-full"> |
|||
<RecentPages user={thisUser} /> |
|||
</section> |
|||
<section className="col-span-1 row-span-1 bg-neutral-10 h-full"> |
|||
<RecentLogs user={thisUser} /> |
|||
</section> |
|||
</div> |
|||
); |
|||
} |
@ -0,0 +1,38 @@ |
|||
import ContentStatistics from "@/Components/DashboardComponents/ContentStatistics"; |
|||
import Feedback from "@/Components/DashboardComponents/Feedback"; |
|||
import PagesOverview from "@/Components/DashboardComponents/PagesOverview"; |
|||
import ProjectsOverview from "@/Components/DashboardComponents/ProjectsOverview"; |
|||
import UsersStatistics from "@/Components/DashboardComponents/UsersStatistics"; |
|||
import { User } from "@/types"; |
|||
import { PropsWithChildren } from "react"; |
|||
|
|||
|
|||
export default function Superadmin({ user }: PropsWithChildren<{ user: User }>) { |
|||
const thisUser = user; |
|||
|
|||
return ( |
|||
<div id="SuperadminDashboard" className="w-full h-full grid grid-cols-4 grid-rows-6 gap-6"> |
|||
<section className="col-start-1 col-span-4 row-span-1"> |
|||
<ContentStatistics /> |
|||
</section> |
|||
|
|||
<section className="col-span-3 row-span-3"> |
|||
<PagesOverview /> |
|||
</section> |
|||
|
|||
<section className="row-span-3"> |
|||
<Feedback /> |
|||
</section> |
|||
|
|||
<section className="col-span-1 row-span-2"> |
|||
<UsersStatistics /> |
|||
</section> |
|||
|
|||
<section className="col-span-3 row-span-2"> |
|||
<ProjectsOverview user={thisUser} /> |
|||
</section> |
|||
|
|||
|
|||
</div> |
|||
); |
|||
} |
@ -1,38 +0,0 @@ |
|||
import { Head } from '@inertiajs/react'; |
|||
import { PageProps } from '@/types'; |
|||
import Guest from '@/Layouts/GuestLayout'; |
|||
import Authenticated from '@/Layouts/AuthenticatedLayout'; |
|||
|
|||
const Help = ({ auth }: PageProps) => { |
|||
const renderAboutContent = () => ( |
|||
<div id="Help" className="p-6"> |
|||
<video controls> |
|||
<source src="assets/media/sample-video.mp4" type="video/mp4" /> |
|||
Browser does not support the video tag. |
|||
</video> |
|||
</div> |
|||
) |
|||
|
|||
return ( |
|||
<> |
|||
<Head title="Help" /> |
|||
<div> |
|||
{auth.user ? ( |
|||
<Authenticated |
|||
user={auth.user} |
|||
> |
|||
{renderAboutContent()} |
|||
</Authenticated> |
|||
) : ( |
|||
<> |
|||
<Guest> |
|||
{renderAboutContent()} |
|||
</Guest> |
|||
</> |
|||
)} |
|||
</div> |
|||
</> |
|||
); |
|||
} |
|||
|
|||
export default Help; |
Write
Preview
Loading…
Cancel
Save
Reference in new issue