Skip to content

Commit

Permalink
what i can do for now lol + main page fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@mv5903
mv5903 committed Mar 30, 2024
1 parent 9997dff commit 30fb0a5
Show file tree
Hide file tree
Showing 5 changed files with 75 additions and 136 deletions.
190 changes: 56 additions & 134 deletions frontend/src/app/admin/Dashboard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,110 +1,64 @@
'use client';
import { useEffect, useState } from 'react';
import { API_BASE_URL } from '../globals';
import Loading from '@/components/core/Loading';
import { Button } from '@/components/core/Button';

export default function Dashboard() {
const [query, setQuery] = useState<string>(''); // Search query
const [data, setData] = useState<any>([]);

const FAKE_DATA = [
{
Client: 'Attentive Aashita',
'Site Location': 'Elgin',
'Delivery Status': 'Delivered',
'Client Details': 'Update',
},
{
Client: 'Magnificent Michelle',
'Site Location': 'Lockhart',
'Delivery Status': 'Not Delivered',
'Client Details': 'Update',
},
{
Client: 'Awesome Ayah',
'Site Location': 'McMahan',
'Delivery Status': 'Not Delivered',
'Client Details': 'Update',
},
{
Client: 'Amazing Alisha',
'Site Location': 'Trinity Lutheran',
'Delivery Status': 'Delivered',
'Client Details': 'OK',
},
{
Client: 'Phenomenal Pavan',
'Site Location': 'Camine',
'Delivery Status': 'Not Delivered',
'Client Details': 'OK',
},
{
Client: 'Intricate Ismaeel',
'Site Location': 'Camine',
'Delivery Status': 'Delivered',
'Client Details': 'OK',
},
{
Client: 'Jolly Joanne',
'Site Location': 'Lockhart',
'Delivery Status': 'Not Delivered',
'Client Details': 'OK',
},
{
Client: 'Superb Sai',
'Site Location': 'McMahan',
'Delivery Status': 'Not Delivered',
'Client Details': 'Update',
},
{
Client: 'Magical Mi Lan',
'Site Location': 'Trinity Lutheran',
'Delivery Status': 'Delivered',
'Client Details': 'OK',
},
{
Client: 'Observant Omri',
'Site Location': 'Flatonia',
'Delivery Status': 'Not Delivered',
'Client Details': 'Update',
},
{
Client: 'Meticulous Matthew',
'Site Location': 'Trinity Lutheran',
'Delivery Status': 'Delivered',
'Client Details': 'OK',
},
{
Client: 'Terrific Tiffany',
'Site Location': 'Elgin',
'Delivery Status': 'Delivered',
'Client Details': 'OK',
},
];
const [filteredData, setFilteredData] = useState<any>([]);
const [selectedClientID, setSelectedClientID] = useState<any>(null);

useEffect(() => {
// Replace this with appropriate API call when implementable
// fetch('https://someapi.org/list/clients')
// .then(response => response.json())
// .then(data => setData(data));
setData(FAKE_DATA);
fetch(API_BASE_URL + '/client/all')
.then(response => response.json())
.then(data => {
setData(data);
setFilteredData(data);
});

fetch(API_BASE_URL + '/order/all')
.then(response => response.json())
.then(data => {
console.log(data);
});
}, []);

// TODO: Replace with better looking loading screen
if (data.length === 0) return <div>Loading...</div>;
// Effect to filter data whenever the search query changes
useEffect(() => {
const result = data.filter((item : any) =>
Object.values(item).some((value : any) =>
value.toString().toLowerCase().includes(query.toLowerCase())
)
);
setFilteredData(result);
}, [query, data]);

if (data.length === 0) return <Loading />;

// const pets = ['Dog', 'Cat', 'Bird'].sort(); // Replace with actual logic later
// const locations = Array.from(
// new Set(data.map((row: any) => row['Site Location']))
// ).sort();

const pets = ['Dog', 'Cat', 'Bird'].sort(); // Replace with actual logic later
const locations = Array.from(
new Set(data.map((row: any) => row['Site Location']))
).sort();
if (selectedClientID != null) {
return <ClientDetailsPopup clientID={selectedClientID} setSelectedClientID={setSelectedClientID} />
}

return (
<div className="p-4">
{/* Search area */}
<div className="flex justify-between">
<input
type="text"
type="text"
className="w-3/4 rounded-md"
placeholder="Search"
value={query}
onChange={e => setQuery(e.target.value)}
/>
<select className="w-[10%] rounded-md">
{/* Commenting these select boxes out for now since I don't have any information to make these work */}
{/* <select className="w-[10%] rounded-md">
<option selected>Filter by</option>
<optgroup label="Pet Type">
{pets.map((row: any, index: number) => (
Expand All @@ -121,62 +75,30 @@ export default function Dashboard() {
</select>
<select className="w-[10%] rounded-md">
<option>Sort by</option>
</select>
</select> */}
</div>

{/* Table of admin client data */}
<table className="w-full border-separate border-spacing-2">
<thead>
<tr>
{Object.keys(data[0]).map((key, index) => (
<th className="text-tertiary" key={index}>
{key}
</th>
))}
<th className="text-tertiary">Client</th>
<th className="text-tertiary">Site Location</th>
<th className="text-tertiary">Delivery Status</th>
<th className="text-tertiary">Client Details</th>
</tr>
</thead>
<tbody>
{data.map((row: any, rowIndex: number) => (
{filteredData.map((row: any, rowIndex: number) => (
<tr key={rowIndex}>
{Object.entries(row).map(
([key, value], cellIndex) => {
let cellClass = '';

// Status Background Color
if (key !== 'Client Details')
cellClass = 'bg-[#F5F5F5]';
else if (key === 'Client Details') {
cellClass +=
value === 'Update'
? 'bg-[#F16363]'
: 'bg-primary';
cellClass +=
' text-white uppercase font-bold';
}

// Centered Columns
let centeredColumns = [
'Delivery Status',
'Client Details',
];
if (centeredColumns.includes(key))
cellClass += ' text-center';

// Left Border for Client name column
if (key === 'Client')
cellClass +=
' border-l-4 border-tertiary';

return (
<td
className={`rounded-md ${cellClass} px-2`}
key={cellIndex}
>
{value as string}
</td>
);
}
)}
<td className="rounded-md px-3 py-1 bg-[#F5F5F5] border-l-4 border-tertiary">{row["name"]}</td>
<td className="rounded-md px-3 py-1 bg-[#F5F5F5]">{row["region"]}</td>
<td className="rounded-md px-3 py-1 bg-[#F5F5F5] text-center">?</td>
<td className="rounded-md px-3 py-1 bg-[#F5F5F5] text-center hover:cursor-pointer"
onClick={() => {
setSelectedClientID(row["_id"]);
}}
>Edit</td>
</tr>
))}
</tbody>
Expand Down
1 change: 1 addition & 0 deletions frontend/src/app/globals.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const API_BASE_URL = "https://combined-community-action.vercel.app";
2 changes: 1 addition & 1 deletion frontend/src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ const Page: FC<PageProps> = () => {
/>
</div>
</section>
<section className="pv-10 flex flex-col gap-5">
<section className="p-4 flex flex-col gap-5">
<SectionTitle text="Eligibility" />
<Collapsible
title="Congregate Meals"
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/core/Collapsible.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const Collapsible: FC<Collapsible> = ({ title, content }) => {
return (
<div>
<div className="flex h-[73px] items-center justify-between bg-secondary">
<div className="text-2xl font-bold text-white">{title}</div>
<div className="text-2xl font-bold text-white p-4">{title}</div>
<button onClick={() => setIsCollapsed(!isCollapsed)}>
<Image
className={`transition-transform ${
Expand Down
16 changes: 16 additions & 0 deletions frontend/src/components/core/Loading.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
export default function Loading() {
return (
<div className="grid min-h-[140px] w-full place-items-center overflow-x-scroll rounded-lg p-6 lg:overflow-visible">
<svg className="text-gray-300 animate-spin" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"
width="24" height="24">
<path
d="M32 3C35.8083 3 39.5794 3.75011 43.0978 5.20749C46.6163 6.66488 49.8132 8.80101 52.5061 11.4939C55.199 14.1868 57.3351 17.3837 58.7925 20.9022C60.2499 24.4206 61 28.1917 61 32C61 35.8083 60.2499 39.5794 58.7925 43.0978C57.3351 46.6163 55.199 49.8132 52.5061 52.5061C49.8132 55.199 46.6163 57.3351 43.0978 58.7925C39.5794 60.2499 35.8083 61 32 61C28.1917 61 24.4206 60.2499 20.9022 58.7925C17.3837 57.3351 14.1868 55.199 11.4939 52.5061C8.801 49.8132 6.66487 46.6163 5.20749 43.0978C3.7501 39.5794 3 35.8083 3 32C3 28.1917 3.75011 24.4206 5.2075 20.9022C6.66489 17.3837 8.80101 14.1868 11.4939 11.4939C14.1868 8.80099 17.3838 6.66487 20.9022 5.20749C24.4206 3.7501 28.1917 3 32 3L32 3Z"
stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"></path>
<path
d="M32 3C36.5778 3 41.0906 4.08374 45.1692 6.16256C49.2477 8.24138 52.7762 11.2562 55.466 14.9605C58.1558 18.6647 59.9304 22.9531 60.6448 27.4748C61.3591 31.9965 60.9928 36.6232 59.5759 40.9762"
stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" className="text-gray-900">
</path>
</svg>
</div>
);
}

0 comments on commit 30fb0a5

Please sign in to comment.