emdannug
/
codehub_
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Implement account hierarchy

master
EJ-Dannug 3 months ago
parent
e53a130a4b
commit
885e12eaea
29 changed files with 981 additions and 133 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 40
      resources/js/Components/DashboardComponents/BookmarkedPages.tsx
  2. 42
      resources/js/Components/DashboardComponents/BulletinBoard.tsx
  3. 41
      resources/js/Components/DashboardComponents/ContentStatistics.tsx
  4. 62
      resources/js/Components/DashboardComponents/Feedback.tsx
  5. 85
      resources/js/Components/DashboardComponents/PagesOverview.tsx
  6. 101
      resources/js/Components/DashboardComponents/PinnedProjectDetails.tsx
  7. 45
      resources/js/Components/DashboardComponents/PinnedProjects.tsx
  8. 138
      resources/js/Components/DashboardComponents/ProjectsOverview.tsx
  9. 36
      resources/js/Components/DashboardComponents/RecentLogs.tsx
  10. 48
      resources/js/Components/DashboardComponents/RecentlyViewedPages.tsx
  11. 51
      resources/js/Components/DashboardComponents/SystemAnnouncement.tsx
  12. 44
      resources/js/Components/DashboardComponents/UsersStatistics.tsx
  13. 2
      resources/js/Components/Footer.tsx
  14. 16
      resources/js/Components/ModalButton.tsx
  15. 18
      resources/js/Components/NavIconLink.tsx
  16. 2
      resources/js/Components/PrimaryButton.tsx
  17. 86
      resources/js/Layouts/AuthenticatedLayout.tsx
  18. 28
      resources/js/Layouts/DashboardLayouts/AdminLayout.tsx
  19. 27
      resources/js/Layouts/DashboardLayouts/EndUserLayout.tsx
  20. 38
      resources/js/Layouts/DashboardLayouts/SuperadminLayout.tsx
  21. 3
      resources/js/Layouts/GuestLayout.tsx
  22. 14
      resources/js/Pages/About.tsx
  23. 23
      resources/js/Pages/Auth/Login.tsx
  24. 31
      resources/js/Pages/Auth/Register.tsx
  25. 38
      resources/js/Pages/Dashboard.tsx
  26. 38
      resources/js/Pages/Help.tsx
  27. 1
      resources/js/Pages/Profile/Edit.tsx
  28. 2
      resources/js/Pages/Welcome.tsx
  29. 4
      routes/web.php

40
resources/js/Components/DashboardComponents/BookmarkedPages.tsx
View File

@ -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>
)
}

42
resources/js/Components/DashboardComponents/BulletinBoard.tsx
View File

@ -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>
)
}

41
resources/js/Components/DashboardComponents/ContentStatistics.tsx
View File

@ -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>
)
}

62
resources/js/Components/DashboardComponents/Feedback.tsx
View File

@ -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>
)
}

85
resources/js/Components/DashboardComponents/PagesOverview.tsx
View File

@ -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>
)
}

101
resources/js/Components/DashboardComponents/PinnedProjectDetails.tsx
View File

@ -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>
);
}

45
resources/js/Components/DashboardComponents/PinnedProjects.tsx
View File

@ -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>
);
}

138
resources/js/Components/DashboardComponents/ProjectsOverview.tsx
View File

@ -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>
)
}

36
resources/js/Components/DashboardComponents/RecentLogs.tsx
View File

@ -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>
);
}

48
resources/js/Components/DashboardComponents/RecentlyViewedPages.tsx
View File

@ -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>
)
}

51
resources/js/Components/DashboardComponents/SystemAnnouncement.tsx
View File

@ -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>
);
}

44
resources/js/Components/DashboardComponents/UsersStatistics.tsx
View File

@ -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>
)
}

2
resources/js/Components/Footer.tsx
View File

@ -29,7 +29,7 @@ export default function Footer() {
<Link href="/help">
<div id="btn-help" className="btn transition rounded-badge mx-4 bg-info-background border border-info-border hover:bg-info-focus hover:border-info-border active:bg-info-focus active:border-info-focus px-4 py-2 text-info-main">
{/* <img src="./assets/images/icons/ico-help.png" alt="Help Icon" width="20" height="20" /> */}
<HelpCircle stroke="#0065C1" />
<HelpCircle className='stroke-[#0065C1]' />
<span className="font-semibold text-sm leading-5">Help</span>
</div>
</Link>

16
resources/js/Components/ModalButton.tsx
View File

@ -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>
);
}

18
resources/js/Components/NavIconLink.tsx
View File

@ -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>
);
}

2
resources/js/Components/PrimaryButton.tsx
View File

@ -5,7 +5,7 @@ export default function PrimaryButton({ className = '', disabled, children, ...p
<button
{...props}
className={
`flex items-center btn bg-primary-main text-white hover:bg-primary-hover active:bg-primary-pressed ${
`flex items-center btn bg-primary-main outline-none text-white hover:bg-primary-hover active:bg-primary-pressed ${
disabled && 'opacity-25'
} ` + className
}

86
resources/js/Layouts/AuthenticatedLayout.tsx
View File

@ -1,18 +1,20 @@
import { PropsWithChildren, useState } from 'react';
import ApplicationLogo from '@/Components/ApplicationLogo';
import Footer from '@/Components/Footer';
import Dropdown from '@/Components/Dropdown';
import NavLink from '@/Components/NavLink';
import { Link, usePage } from '@inertiajs/react';
import { User } from '@/types';
import { AlertOctagon, ChevronDown, LogOut } from 'react-feather';
import { AlertOctagon, Bell, Bookmark, ChevronDown, Grid, Home, LogOut } from 'react-feather';
import Modal from '@/Components/Modal';
import axios from 'axios';
import FormGroup from '@/Components/FormGroup';
import ModalButton from '@/Components/ModalButton';
import NavIconLink from '@/Components/NavIconLink';
export default function Authenticated({ user, children }: PropsWithChildren<{ user: User }>) {
const { url } = usePage();
const [isHiglighted, setIsHiglighted] = useState(false);
const [isUserOptionsHiglighted, setIsUserOptionsHiglighted] = useState(false);
const [isDashboardHiglighted, setIsDashboardHiglighted] = useState(false);
const [isNotificationsHiglighted, setIsNotificationsHiglighted] = useState(false);
const [isBookmarksHiglighted, setIsBookmarksHiglighted] = useState(false);
const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false);
const handleCloseLogoutModal = () => {
@ -38,38 +40,46 @@ export default function Authenticated({ user, children }: PropsWithChildren<{ us
</div>
<nav className="navbar-end">
<ul className="menu menu-horizontal px-1">
<li><NavLink href="/dashboard" active={url === '/dashboard'}>
Home
</NavLink></li>
<li><NavLink href="/about" active={url === '/about'}>
About
</NavLink></li>
<li><NavLink href="/help" active={url === '/help'}>
Tutorials
</NavLink></li>
<NavIconLink href="/dashboard" active={url === '/dashboard'}
onMouseEnter={() => setIsDashboardHiglighted(true)}
onMouseLeave={() => setIsDashboardHiglighted(false)}
>
<Home className={isDashboardHiglighted || url === '/dashboard' ? "stroke-neutral-10 active" : "stroke-secondary-main"} />
</NavIconLink>
<NavIconLink href="/notifications" active={url === '/notifications'}
onMouseEnter={() => setIsNotificationsHiglighted(true)}
onMouseLeave={() => setIsNotificationsHiglighted(false)}
>
<Bell className={isNotificationsHiglighted || url === '/notifications' ? "stroke-neutral-10 active" : "stroke-secondary-main"} />
</NavIconLink>
<NavIconLink href="/bookmarks" active={url === '/bookmarks'}
onMouseEnter={() => setIsBookmarksHiglighted(true)}
onMouseLeave={() => setIsBookmarksHiglighted(false)}
>
<Bookmark className={isBookmarksHiglighted || url === '/bookmarks' ? "stroke-neutral-10 active" : "stroke-secondary-main"} />
</NavIconLink>
<li><Dropdown>
<Dropdown.Trigger>
<button className="flex items-center py-1 px-2"
onMouseEnter={() => setIsHiglighted(true)}
onMouseDown={() => setIsHiglighted(true)}
onMouseLeave={() => setIsHiglighted(false)}>
<span className="font-semibold text-base leading-6 mr-4">
<div className="dropdown" id='UserOptions'>
<div tabIndex={0} role="button"
onMouseEnter={() => setIsUserOptionsHiglighted(true)}
onMouseLeave={() => setIsUserOptionsHiglighted(false)}
className="btn m-0 bg-primary-background border-primary-background shadow-xl text-md hover:bg-secondary-hover hover:text-white active:bg-secondary-pressed active:text-white">
{user.username}
</span>
<ChevronDown stroke={isHiglighted ? "#FFFFFF" : "#000000"} />
</button>
</Dropdown.Trigger>
<Dropdown.Content>
<Dropdown.Link href={route('profile.edit')}>Profile</Dropdown.Link>
<button onClick={() => setIsLogoutModalOpen(true)}
className='block w-full px-4 py-2 text-start text-sm leading-5 text-black outline-none hover:bg-secondary-hover hover:text-white focus:bg-secondary-pressed focus:text-white transition duration-150 ease-in-out'>
<ChevronDown className={isUserOptionsHiglighted ? "stroke-neutral-10" : "stroke-secondary-main"} />
</div>
<ul tabIndex={0} className="dropdown-content z-[1] menu rounded-btn bg-neutral-10 shadow-md px-0">
<li><Link href={route('profile.edit')} className="hover:bg-secondary-hover hover:text-white active:bg-secondary-pressed active:text-white rounded-none">
Settings
</Link></li>
<li><Link href='/about' className="hover:bg-secondary-hover hover:text-white active:bg-secondary-pressed active:text-white rounded-none">
About CodeHub
</Link></li>
<li><button onClick={() => setIsLogoutModalOpen(true)}
className='outline-none hover:bg-secondary-hover hover:text-white focus:bg-secondary-pressed focus:text-white transition duration-150 ease-in-out'>
Log Out
</button>
</Dropdown.Content>
</Dropdown></li>
</button></li>
</ul>
</div>
</nav>
</header>
@ -88,17 +98,17 @@ export default function Authenticated({ user, children }: PropsWithChildren<{ us
<p className="mt-4">Are you sure you want to logout?</p>
<div className='flex items-center justify-center mt-3'>
<button onClick={handleCloseLogoutModal} className="mx-1 w-full btn outline-none bg-neutral-40 text-lg text-black hover:bg-neutral-60 hover:text-white active:bg-neutral-80 active:text-white">
<ModalButton onClick={() => setIsLogoutModalOpen(false)} className="mx-1 bg-neutral-40 text-black hover:bg-neutral-60 hover:text-white active:bg-neutral-80 active:text-white">
Cancel
</button>
<button onClick={handleCloseLogoutModal} className="mx-1 w-full btn outline-none bg-error-main text-lg text-white hover:bg-error-hover active:bg-error-pressed">
</ModalButton>
<ModalButton onClick={handleCloseLogoutModal} className="mx-1 bg-error-main text-white hover:bg-error-hover active:bg-error-pressed">
Logout
<LogOut stroke='#FFFFFF' />
</button>
</ModalButton>
</div>
</div>
</Modal>
</div>
);
)
}

28
resources/js/Layouts/DashboardLayouts/AdminLayout.tsx
View File

@ -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>
);
}

27
resources/js/Layouts/DashboardLayouts/EndUserLayout.tsx
View File

@ -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>
);
}

38
resources/js/Layouts/DashboardLayouts/SuperadminLayout.tsx
View File

@ -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>
);
}

3
resources/js/Layouts/GuestLayout.tsx
View File

@ -24,9 +24,6 @@ export default function Guest({ children }: PropsWithChildren) {
<li><NavLink href="/about" active={url === '/about'}>
About
</NavLink></li>
<li><NavLink href="/help" active={url === '/help'}>
Tutorials
</NavLink></li>
<li><NavLink href={route('login')}
active={url === '/login'}
>

14
resources/js/Pages/About.tsx
View File

@ -27,7 +27,7 @@ const About = ({ auth }: PageProps) => {
<div id="techStack">
<div className="flex justify-center mt-12 mb-8 stats shadow">
<div className="stat bg-neutral-20">
<div className="stat bg-primary-background">
<div className="stat-value font-semibold text-3xl leading-[44px]">Web Technologies</div>
<div className="stat-actions">
<div className="badge badge-lg bg-info-background text-info-main badge-outline mr-1">HTML</div>
@ -37,7 +37,7 @@ const About = ({ auth }: PageProps) => {
</div>
</div>
<div className="stat bg-neutral-20">
<div className="stat bg-primary-background">
<div className="stat-value font-semibold text-3xl leading-[44px]">Development Frameworks</div>
<div className="stat-actions">
<div className="badge badge-lg bg-info-background text-info-main badge-outline mr-1">Node.js</div>
@ -45,7 +45,7 @@ const About = ({ auth }: PageProps) => {
</div>
</div>
<div className="stat bg-neutral-20">
<div className="stat bg-primary-background">
<div className="stat-value font-semibold text-3xl leading-[44px]">Database</div>
<div className="stat-actions">
<div className="badge badge-lg bg-info-background text-info-main badge-outline mr-1">Apache Server</div>
@ -56,7 +56,7 @@ const About = ({ auth }: PageProps) => {
</div>
<div className="flex justify-center mt-4 mb-12 stats shadow">
<div className="stat bg-neutral-20">
<div className="stat bg-primary-background">
<div className="stat-value font-semibold text-3xl leading-[44px]">Backend Frameworks</div>
<div className="stat-actions">
<div className="badge badge-lg bg-info-background text-info-main badge-outline mr-1">Laravel</div>
@ -64,7 +64,7 @@ const About = ({ auth }: PageProps) => {
</div>
</div>
<div className="stat bg-neutral-20">
<div className="stat bg-primary-background">
<div className="stat-value font-semibold text-3xl leading-[44px]">Frontend Frameworks</div>
<div className="stat-actions">
<div className="badge badge-lg bg-info-background text-info-main badge-outline mr-1">ReactJS</div>
@ -84,9 +84,7 @@ const About = ({ auth }: PageProps) => {
<Head title="About" />
<div>
{auth.user ? (
<Authenticated
user={auth.user}
>
<Authenticated user={auth.user}>
{renderAboutContent()}
</Authenticated>
) : (

23
resources/js/Pages/Auth/Login.tsx
View File

@ -11,6 +11,7 @@ import FormGroup from '@/Components/FormGroup';
import ProjectBanner from '@/Components/ProjectBanner';
import Modal from '@/Components/Modal';
import axios from 'axios';
import ModalButton from '@/Components/ModalButton';
export default function Login({ status, canResetPassword }: { status?: string, canResetPassword: boolean }) {
const { data, setData, post, processing, errors, reset } = useForm({
@ -76,7 +77,7 @@ export default function Login({ status, canResetPassword }: { status?: string, c
<form id="SignInForm" onSubmit={ submit }>
<FormGroup>
<InputLabel htmlFor='username'>
<AtSign stroke="#FFFFFF" />
<AtSign className='stroke-neutral-10' />
</InputLabel>
<TextInput
id='username'
@ -92,7 +93,7 @@ export default function Login({ status, canResetPassword }: { status?: string, c
<FormGroup>
<InputLabel htmlFor='password'>
<Lock stroke="#FFFFFF" />
<Lock className='stroke-neutral-10' />
</InputLabel>
<TextInput
type={showPassword ? "text" : "password"}
@ -107,8 +108,8 @@ export default function Login({ status, canResetPassword }: { status?: string, c
/>
<label htmlFor="showPassword" className="swap items-center border border-primary-hover border-l-0">
<input type="checkbox" name="showPassword" id="showPassword" onChange={toggleShowPassword} checked={showPassword} className='hidden' />
<Eye stroke='#002F42' className='swap-off px-1' />
<EyeOff stroke='#002F42' className='swap-on px-1' />
<Eye className='swap-off px-1 stroke-secondary-main' />
<EyeOff className='swap-on px-1 stroke-secondary-main' />
</label>
<InputError message={errors.password} className="mt-2" />
</FormGroup>
@ -137,7 +138,7 @@ export default function Login({ status, canResetPassword }: { status?: string, c
<p className="invisible">No account yet? Register instead.</p>
<PrimaryButton type='submit' disabled={processing}>
Log In
<LogIn stroke='#FFFFFF' />
<LogIn className='stroke-neutral-10' />
</PrimaryButton>
</div>
</form>
@ -147,23 +148,23 @@ export default function Login({ status, canResetPassword }: { status?: string, c
<Modal show={isSuccessModalOpen} onClose={() => setIsSuccessModalOpen(false)} maxWidth="lg" styling='success'>
<div className="p-4 flex flex-col items-center">
<CheckCircle stroke='#007505' size={80} />
<CheckCircle className='stroke-success-main' size={80} />
<h2 className="text-xl font-bold mt-2">{ statusTitle }</h2>
<p className="mt-4">{ feedback }</p>
<button onClick={handleCloseSuccessModal} className="mt-4 w-full btn outline-none bg-success-main text-lg text-white hover:bg-success-hover active:bg-success-pressed">
<ModalButton onClick={handleCloseSuccessModal} className="bg-success-main text-white hover:bg-success-hover active:bg-success-pressed">
Go to Dashboard
</button>
</ModalButton>
</div>
</Modal>
<Modal show={isErrorModalOpen} onClose={() => setIsErrorModalOpen(false)} maxWidth="lg" styling='error'>
<div className="p-4 flex flex-col items-center">
<XOctagon stroke='#B20000' size={80} />
<XOctagon className='stroke-error-main' size={80} />
<h2 className="text-xl font-bold mt-2">{ statusTitle }</h2>
<p className="mt-4">{ feedback }</p>
<button onClick={() => setIsErrorModalOpen(false)} className="mt-4 w-full btn outline-none bg-error-main text-lg text-white hover:bg-error-hover active:bg-error-pressed">
<ModalButton onClick={() => setIsErrorModalOpen(false)} className="bg-error-main text-white hover:bg-error-hover active:bg-error-pressed">
Close
</button>
</ModalButton>
</div>
</Modal>
</div>

31
resources/js/Pages/Auth/Register.tsx
View File

@ -10,6 +10,7 @@ import PrimaryButton from '@/Components/PrimaryButton';
import { Grid, User, Mail, AtSign, Lock, Eye, EyeOff, LogIn, Unlock, CheckCircle, XOctagon } from 'react-feather';
import axios from 'axios';
import Modal from '@/Components/Modal';
import ModalButton from '@/Components/ModalButton';
export default function Register() {
const { data, setData, post, processing, errors, reset } = useForm({
@ -77,7 +78,7 @@ export default function Register() {
<form id="SignUpForm" onSubmit={ submit }>
<FormGroup>
<InputLabel htmlFor='emp_id'>
<Grid stroke="#FFFFFF" />
<Grid className='stroke-neutral-10' />
</InputLabel>
<TextInput
id='emp_id'
@ -101,7 +102,7 @@ export default function Register() {
<FormGroup>
<InputLabel htmlFor='name'>
<User stroke="#FFFFFF" />
<User className='stroke-neutral-10' />
</InputLabel>
<TextInput
id='name'
@ -117,7 +118,7 @@ export default function Register() {
<FormGroup>
<InputLabel htmlFor='email'>
<Mail stroke="#FFFFFF" />
<Mail className='stroke-neutral-10' />
</InputLabel>
<TextInput
type='email'
@ -134,7 +135,7 @@ export default function Register() {
<FormGroup>
<InputLabel htmlFor='username'>
<AtSign stroke="#FFFFFF" />
<AtSign className='stroke-neutral-10' />
</InputLabel>
<TextInput
id='username'
@ -150,7 +151,7 @@ export default function Register() {
<FormGroup>
<InputLabel htmlFor='password'>
<Lock stroke="#FFFFFF" />
<Lock className='stroke-neutral-10' />
</InputLabel>
<TextInput
type={showPassword ? "text" : "password"}
@ -165,15 +166,15 @@ export default function Register() {
/>
<label htmlFor="showPassword" className="swap items-center border border-primary-hover border-l-0">
<input type="checkbox" name="showPassword" id="showPassword" onChange={toggleShowPassword} checked={showPassword} className='hidden' />
<Eye stroke='#002F42' className='swap-off px-1' />
<EyeOff stroke='#002F42' className='swap-on px-1' />
<Eye className='stroke-secondary-main swap-off px-1' />
<EyeOff className='stroke-secondary-main swap-on px-1' />
</label>
<InputError message={errors.password} className="mt-2" />
</FormGroup>
<FormGroup>
<InputLabel htmlFor='password_confirmation'>
<Unlock stroke="#FFFFFF" />
<Unlock className='stroke-neutral-10' />
</InputLabel>
<TextInput
type={"password"}
@ -197,7 +198,7 @@ export default function Register() {
<PrimaryButton type='submit' disabled={processing}>
Sign Up
<LogIn stroke='#FFFFFF' />
<LogIn className='stroke-neutral-10' />
</PrimaryButton>
</div>
</form>
@ -207,23 +208,23 @@ export default function Register() {
<Modal show={isSuccessModalOpen} onClose={() => setIsSuccessModalOpen(false)} maxWidth="lg" styling='success'>
<div className="p-4 flex flex-col items-center">
<CheckCircle stroke='#007505' size={80} />
<CheckCircle className='stroke-success-main' size={80} />
<h2 className="text-xl font-bold mt-2">{ status }</h2>
<p className="mt-4">{ feedback }</p>
<button onClick={handleCloseSuccessModal} className="mt-4 w-full btn outline-none bg-success-main text-lg text-white hover:bg-success-hover active:bg-success-pressed">
<ModalButton onClick={handleCloseSuccessModal} className="bg-success-main hover:bg-success-hover active:bg-success-pressed">
Login Now
</button>
</ModalButton>
</div>
</Modal>
<Modal show={isErrorModalOpen} onClose={() => setIsErrorModalOpen(false)} maxWidth="lg" styling='error'>
<div className="p-4 flex flex-col items-center">
<XOctagon stroke='#B20000' size={80} />
<XOctagon className='stroke-error-main' size={80} />
<h2 className="text-xl font-bold mt-2">{ status }</h2>
<p className="mt-4">{ feedback }</p>
<button onClick={() => setIsErrorModalOpen(false)} className="mt-4 w-full btn outline-none bg-error-main text-lg text-white hover:bg-error-hover active:bg-error-pressed">
<ModalButton onClick={() => setIsErrorModalOpen(false)} className="bg-error-main text-white hover:bg-error-hover active:bg-error-pressed">
Close
</button>
</ModalButton>
</div>
</Modal>
</div>

38
resources/js/Pages/Dashboard.tsx
View File

@ -1,19 +1,43 @@
import Authenticated from '@/Layouts/AuthenticatedLayout';
import { Head } from '@inertiajs/react';
import { PageProps } from '@/types';
import Superadmin from '@/Layouts/DashboardLayouts/SuperadminLayout';
import Admin from '@/Layouts/DashboardLayouts/AdminLayout';
import EndUser from '@/Layouts/DashboardLayouts/EndUserLayout';
export default function Dashboard({ auth }: PageProps) {
const thisUser = auth.user;
const renderDashboardContent = () => {
switch (thisUser.role_id) {
case 1:
return <Superadmin user={thisUser} />;
case 2:
return <Admin user={thisUser} />;
case 3:
return <EndUser user={thisUser} />;
default:
return null;
}
};
return (
<Authenticated
user={auth.user}
>
<Authenticated user={thisUser}>
<Head title="Dashboard" />
<div className="py-12">
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div className="p-6 text-gray-900">You're logged in!</div>
<div className="drawer lg:drawer-open">
<input id="my-drawer-2" type="checkbox" className="drawer-toggle" />
<div className="drawer-content flex flex-row justify-between p-6 bg-neutral-20">
{renderDashboardContent()}
</div>
<div className="drawer-side">
<label htmlFor="my-drawer-2" aria-label="close sidebar" className="drawer-overlay"></label>
<ul className="menu p-4 w-56 h-full bg-primary-background text-base-content">
{/* Sidebar content here */}
<li><a>Sidebar Item 1</a></li>
<li><a>Sidebar Item 2</a></li>
</ul>
</div>
</div>
</Authenticated>

38
resources/js/Pages/Help.tsx
View File

@ -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;

1
resources/js/Pages/Profile/Edit.tsx
View File

@ -9,7 +9,6 @@ export default function Edit({ auth, mustVerifyEmail, status }: PageProps<{ must
return (
<AuthenticatedLayout
user={auth.user}
header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">Profile</h2>}
>
<Head title="Profile" />

2
resources/js/Pages/Welcome.tsx
View File

@ -30,7 +30,7 @@ export default function Welcome() {
className="input rounded-l-full join-item bg-primary-background w-80 border border-primary-hover focus:outline-none focus:border-4 focus:border-primary-hover focus:bg-neutral-10"
/>
<button className="btn transition join-item rounded-r-full bg-primary-main border border-primary-hover hover:bg-primary-hover hover:border-primary-hover active:bg-primary-pressed active:border-primary-hover">
<Search stroke="#FFFFFF" />
<Search className='stroke-neutral-10' />
</button>
</div>
</div>

4
routes/web.php
View File

@ -15,10 +15,6 @@ Route::get('/about', function () {
return Inertia::render('About');
});
Route::get('/help', function () {
return Inertia::render('Help');
});
Route::get('/privacy-policy', function () {
return Inertia::render('PrivacyPolicy');
});

Write Preview
Loading…
Cancel
Save