Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ASC-37 #30

Merged
merged 3 commits into from
Jul 22, 2024
Merged

ASC-37 #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8814b9e
Added Search, Table Queries and Admin Page
thea2506 Jul 4, 2024
7b74aa4
Added redirection if user is not logged in for admins
thea2506 Jul 4, 2024
9275c3c
Added Sort by Category, sort order
thea2506 Jul 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ import MemberProfilePictureTest from "@/routes/test/MemberProfilePictureTest";

// routes
import AdminLogin from "./routes/admin/AdminLogin";
import AdminHome from "./routes/admin/AdminHome";

import CaregiverLogin from "./routes/caregiver/CaregiverLogin";

const router = createBrowserRouter([
Expand Down Expand Up @@ -125,11 +127,7 @@ const router = createBrowserRouter([
// Admin Routes
{
path: "/admin",
element: (
<div>
<p>Admin Home Page</p>
</div>
),
element: <AdminHome />,
},
{
path: "/admin/login",
Expand Down
17 changes: 11 additions & 6 deletions src/components/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
text?: string;
rounded?: boolean;
fill?: boolean;
disabled: boolean;
disabled?: boolean;
fontSize?: string;
color?: string;
}
Expand Down Expand Up @@ -44,16 +44,21 @@ const Button: React.FC<ButtonProps> = ({
>
{Icon && !text && (
<div className="relative z-20">
<Icon />
<Icon size={20} />
</div>
)}
{Icon && text && (
<>
<div className="flex items-center">
<div className="relative z-20">
<Icon className="mt-0.2" />
<Icon
className="mt-0.2"
size={20}
/>
</div>
<span className="relative z-20 pl-1">{text}</span>
</>
<span className="relative z-20 pl-1 whitespace-nowrap hidden lg:block">
{text}
</span>
</div>
)}
{!Icon && text && <span className="relative z-20">{text}</span>}
</button>
Expand Down
108 changes: 72 additions & 36 deletions src/components/MemberTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,30 @@
//#region imports
import { twMerge } from "tailwind-merge";
import { UserCircle, Folder, ArrowsClockwise } from "@phosphor-icons/react";
import ProfilePictures from "./ProfilePictures";
import * as Icon from "@phosphor-icons/react";

import ProfilePictures from "./ProfilePictures";
//#endregion

//#region interfaces
interface MemberTableProps {
data: {
profilePicture: {
type: "img" | "icon" | string;
src: string;
backgroundColor?: string;
};
name: string;
storageUsed: string;
lastUpdated: string;
}[];
className?: string;
data: memberData[];

isLoading: boolean;
sortbyStorageUsed: () => void;
sortbyLastUpdated: () => void;
}

export interface memberData {
profilePicture: {
type: "img" | "icon" | string;
src: string;
backgroundColor?: string;
};
name: string;
storageUsed: string;
lastUpdated: string;
}
//#endregion

Expand Down Expand Up @@ -48,39 +57,66 @@ function selectIcon(type: string) {
* Represents a table component that displays member data.
* @param data - An array of objects representing each member's data.
*/
export function MemberTable({ data }: MemberTableProps) {
const headers = [
{ icon: <UserCircle />, label: "Name" },
{ icon: <Folder />, label: "Storage Used" },
{ icon: <ArrowsClockwise />, label: "Last Updated" },
];

export function MemberTable({
data,
className,
isLoading,
sortbyStorageUsed,
sortbyLastUpdated,
}: MemberTableProps) {
function handleClick(row: any) {
alert(`Clicked ${row.name}`);
}

return (
<div className="rounded-lg w-full overflow-hidden">
<table className="w-full">
<div
className={twMerge("rounded-lg w-full overflow-hidden", className)}
>
<table className="w-full bg-slate-50">
{/* Headers */}
<thead className="bg-primary-light text-white">
<tr>
{headers.map((header, index) => (
<th
scope="col"
key={index}
className="px-4 py-4 md:py-7"
<th
scope="col"
className="px-4 py-4 md:py-7"
>
<div className="flex items-center font-normal gap-x-2">
<UserCircle size={22} />
<span className="font-display text-sm md:text-base">
Name
</span>
</div>
</th>
<th
scope="col"
className="px-4 py-4 md:py-7"
>
<button
className="flex items-center font-normal gap-x-2"
onClick={sortbyStorageUsed}
disabled={isLoading}
>
<div className="flex items-center font-normal gap-x-2">
<span className=" text-xl">
{header.icon}
</span>
<span className="font-display text-sm md:text-base">
{header.label}
</span>
</div>
</th>
))}
<Folder size={22} />
<span className="font-display text-sm md:text-base">
Storage Used
</span>
</button>
</th>
<th
scope="col"
className="px-4 py-4 md:py-7"
>
<button
className="flex items-center font-normal gap-x-2"
onClick={sortbyLastUpdated}
disabled={isLoading}
>
<ArrowsClockwise size={22} />
<span className="font-display text-sm md:text-base">
Last Updated
</span>
</button>
</th>
</tr>
</thead>

Expand Down Expand Up @@ -119,7 +155,7 @@ export function MemberTable({ data }: MemberTableProps) {
</div>
</td>
<td className="px-4 py-6 font-display text-sm md:text-base">
{row.storageUsed}
{row.storageUsed} MB
</td>
<td className="px-4 py-6 font-display text-sm md:text-base">
{row.lastUpdated}
Expand Down
134 changes: 87 additions & 47 deletions src/components/NavigationBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,29 @@
//#region Imports
import { useNavigate } from "react-router-dom";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

import { twMerge } from "tailwind-merge";

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

import logoUrl from "@/assets/images/asc_logo.svg";

import { displayToast } from "@/utils";
//#endregion

//#region Interface
interface NavigationBarProps {
/**
* The type of user.
* - "user" for regular users.
* - "admin" for admin users.
*/
userType?: "user" | "admin";
className?: string;
userType?: "user" | "admin";
className?: string;
}
//#endregion

//#region Functions
function signOut() {
// TODO: Implement sign out logic
console.log("Signed out");
}
//#region firebase
const firebaseConfig = JSON.parse(import.meta.env.VITE_FIREBASE_CONFIG);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
//#endregion

/**
Expand All @@ -30,41 +34,77 @@ function signOut() {
* @returns {JSX.Element} The rendered navigation bar.
*/
export function NavigationBar({
userType = "user",
className,
userType = "user",
className,
}: NavigationBarProps): JSX.Element {
return (
<nav
className={twMerge(
"flex justify-between items-center font-bod py-2 md:py-1 px-8 md:px-16 borer border-b-2 w-full md:text-body-reg",
className
)}
>
{/* Logo */}
<a href="/">
<img
src={logoUrl}
alt="ASC Logo"
/>
</a>
const navigate = useNavigate();

//#region Functions
function signOut() {
// Sign out logic for user
if (
localStorage.getItem("lastName") &&
localStorage.getItem("passcode")
) {
localStorage.removeItem("lastName");
localStorage.removeItem("passcode");
displayToast("Successfully signed out", "success");
setTimeout(() => {
navigate("/login");
}, 2000);
}

// Sign out logic for admin
auth.signOut().then(() => {
displayToast("Successfully signed out", "success");
setTimeout(() => {
navigate("/admin/login");
}, 2000);
navigate("/admin/login");
});
}
//#endregion

{/* Navigation bar */}
<div className="space-x-[40px] flex">
{userType === "admin" ? (
<a
href="/dashboard"
className="hover:text-primary-main hidden sm:block transition ease-in-out duration-75"
>
Members
</a>
) : null}
<button
className="hover:text-primary-main transition ease-in-out duration-75"
onClick={signOut}
>
Logout
</button>
</div>
</nav>
);
return (
<div>
<ToastContainer
position="bottom-right"
autoClose={2000}
newestOnTop={true}
closeButton={false}
hideProgressBar={true}
/>
<nav
className={twMerge(
"flex justify-between items-center py-2 md:py-1 px-8 md:px-16 borer border-b-2 w-full md:text-body-reg bg-white",
className,
)}
>
{/* Logo */}
<a href="/">
<img
src={logoUrl}
alt="ASC Logo"
/>
</a>
{/* Navigation bar */}
<div className="space-x-[40px] flex">
{userType === "admin" ? (
<a
href="/dashboard"
className="hover:text-primary-main hidden sm:block transition ease-in-out duration-75 font-display font-semibold"
>
Members
</a>
) : null}
<button
className="hover:text-primary-main transition ease-in-out duration-75 font-display font-semibold"
onClick={signOut}
>
Logout
</button>
</div>
</nav>
</div>
);
}
Loading
Loading