Skip to content

Commit

Permalink
fix formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@OGreeni
OGreeni committed Feb 14, 2024
1 parent cbf71a0 commit afbc352
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 87 deletions.
194 changes: 108 additions & 86 deletions src/app/admin/Dashboard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,84 +1,84 @@
'use client';
import { useEffect, useState } from "react";
import { useEffect, useState } from 'react';

export default function Dashboard() {
const [data, setData] = useState<any>([]);

const FAKE_DATA = [
{
"Client": "Attentive Aashita",
"Site Location": "Elgin",
"Delivery Status": "Delivered",
"Client Details": "Update"
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: '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: '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: '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: '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: '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: '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: '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: '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: '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: 'Meticulous Matthew',
'Site Location': 'Trinity Lutheran',
'Delivery Status': 'Delivered',
'Client Details': 'OK',
},
{
"Client": "Terrific Tiffany",
"Site Location": "Elgin",
"Delivery Status": "Delivered",
"Client Details": "OK"
}
]
Client: 'Terrific Tiffany',
'Site Location': 'Elgin',
'Delivery Status': 'Delivered',
'Client Details': 'OK',
},
];

useEffect(() => {
// Replace this with appropriate API call when implementable
// fetch('https://someapi.org/list/clients')
Expand All @@ -88,31 +88,33 @@ export default function Dashboard() {
}, []);

// TODO: Replace with better looking loading screen
if (data.length === 0) return (<div>Loading...</div>);
if (data.length === 0) return <div>Loading...</div>;

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();

return (
<div className="p-4">
{/* Search area */}
<div className="flex justify-between">
<input type="text" className="w-3/4 rounded-md" placeholder="Search" />
<input
type="text"
className="w-3/4 rounded-md"
placeholder="Search"
/>
<select className="w-[10%] rounded-md">
<option selected>Filter by</option>
<optgroup label="Pet Type">
{
pets.map((row: any, index: number) => (
<option key={index}>{row}</option>
))
}
{pets.map((row: any, index: number) => (
<option key={index}>{row}</option>
))}
</optgroup>
<optgroup label="Site Location">
{
locations.map((row: any, index: number) => (
<option key={index}>{row}</option>
))
}
{locations.map((row: any, index: number) => (
<option key={index}>{row}</option>
))}
</optgroup>
<option>Brand</option>
<option>Food Cost Per Month</option>
Expand All @@ -127,38 +129,58 @@ export default function Dashboard() {
<thead>
<tr>
{Object.keys(data[0]).map((key, index) => (
<th className="text-tertiary" key={index}>{key}</th>
<th className="text-tertiary" key={index}>
{key}
</th>
))}
</tr>
</thead>
<tbody>
{data.map((row: any, rowIndex: number) => (
<tr key={rowIndex}>
{Object.entries(row).map(([key, value], cellIndex) => {
let cellClass = "";
{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"
}
// 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';

// 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";
// 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>
);
})}
return (
<td
className={`rounded-md ${cellClass} px-2`}
key={cellIndex}
>
{value as string}
</td>
);
}
)}
</tr>
))}
</tbody>
</table>
</div>
);
}
}
2 changes: 1 addition & 1 deletion src/app/admin/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const Page: FC<PageProps> = () => {
<main>
<Dashboard />
</main>
)
);
};

export default Page;

0 comments on commit afbc352

Please sign in to comment.