wind-explorer/ecoconnect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed css and validation

Browse Source
This commit is contained in:
ZacTohZY
2024-08-02 04:12:28 +08:00
parent b0d13899be
commit b6c2183604
3 changed files with 59 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/pages/HBContestPage.tsx
View File

@@ -173,7 +173,7 @@ export default function HBContestPage() {
</div>
<div className="flex flex-col gap-2">
{topUser && (
<div className="p-2 border rounded-md bg-red-100 dark:bg-primary-950 flex items-center">
<div className="p-4 border rounded-md bg-red-100 dark:bg-primary-950 flex items-center">
<TrophyIcon />
<p className="text-lg flex-1 text-center font-bold">{topUser.name}</p>
</div>
@@ -181,8 +181,8 @@ export default function HBContestPage() {
</div>
<div className="grid grid-rows-1 md:grid-rows-2 gap-2">
{top5Users.map((user, index) => (
<div key={user.userId} className="p-3 border rounded-md bg-red-100 dark:bg-primary-950 flex items-center">
<span className="text-lg font-bold w-8">{index + 2}</span>
<div key={user.userId} className="p-4 border rounded-md bg-red-100 dark:bg-primary-950 flex items-center">
<span className="text-xl font-bold w-8">{index + 2}</span>
<span className="flex-1 text-center">{user.name}</span>
</div>
))}

10
client/src/pages/HBFormPage.tsx
View File

@@ -21,11 +21,21 @@ const validationSchema = Yup.object({
.positive("Must be a positive value")
.max(99999.99, "Value is too large")
.required("Water bill is a required field"),
totalBill: Yup.number()
.typeError("Must be a number")
.positive("Must be a positive value")
.max(99999.99, "Value is too large")
.required("Total bill is a required field"),
noOfDependents: Yup.number()
.typeError("Must be a number")
.integer("Must be a whole number")
.positive("Must be a positive value")
.required("No. of dependents is a required field"),
avgBill: Yup.number()
.typeError("Must be a number")
.positive("Must be a positive value")
.max(99999.99, "Value is too large")
.required("Average bill is a required field"),
ebPicture: Yup.mixed().required("Electrical bill picture is required"),
wbPicture: Yup.mixed().required("Water bill picture is required"),
});

92
client/src/pages/SchedulePage.tsx
View File

@@ -20,7 +20,7 @@ import React from "react";
interface Schedule {
id: number;
dateTime: string;
dateTime: Date;
location: string;
postalCode: string;
status: string;
@@ -49,8 +49,10 @@ export default function SchedulePage() {
.then((res) => {
const schedules = res.data.map((schedule: Schedule) => ({
...schedule,
dateTime: new Date(schedule.dateTime), // Ensure dateTime is a Date object
dateTime: new Date(schedule.dateTime), // Convert dateTime to Date object
}));
// Sort schedules by dateTime in descending order
schedules.sort((a: Schedule, b: Schedule) => b.dateTime.getTime() - a.dateTime.getTime());
setScheduleList(schedules);
})
.catch((err) => {
@@ -86,8 +88,10 @@ export default function SchedulePage() {
.then((res) => {
const schedules = res.data.map((schedule: Schedule) => ({
...schedule,
dateTime: new Date(schedule.dateTime), // Ensure dateTime is a Date object
dateTime: new Date(schedule.dateTime), // Convert dateTime to Date object
}));
// Sort schedules by dateTime in descending order
schedules.sort((a: Schedule, b: Schedule) => b.dateTime.getTime() - a.dateTime.getTime());
setScheduleList(schedules);
})
.catch((err) => {
@@ -156,49 +160,45 @@ export default function SchedulePage() {
))}
</TableBody>
</Table>
<div>
<div>
<div className="flex flex-row gap-20 ">
<div>
<Card aria-label="Paper Price Card 1">
<CardBody>
<p className="text-lg">Paper</p>
<p className="text-xl">$0.05 to 0.20/KG</p>
<ul>
<li>Cardboard ($0.20/kg)</li>
<li>Newspaper and B&W ($0.11/kg)</li>
<li>Mix paper ($0.05/kg)</li>
</ul>
</CardBody>
</Card>
</div>
<div>
<Card aria-label="Paper Price Card 2">
<CardBody>
<p className="text-lg">Paper</p>
<p className="text-xl">$0.05 to 0.20/KG</p>
<ul>
<li>Cardboard ($0.20/kg)</li>
<li>Newspaper and B&W ($0.11/kg)</li>
<li>Mix paper ($0.05/kg)</li>
</ul>
</CardBody>
</Card>
</div>
<div>
<Card aria-label="Paper Price Card 3">
<CardBody>
<p className="text-lg">Paper</p>
<p className="text-xl">$0.05 to 0.20/KG</p>
<ul>
<li>Cardboard ($0.20/kg)</li>
<li>Newspaper and B&W ($0.11/kg)</li>
<li>Mix paper ($0.05/kg)</li>
</ul>
</CardBody>
</Card>
</div>
</div>
<div className="flex flex-row gap-4"> {/* Adjust gap size as needed */}
<div className="flex-1 p-4"> {/* Flex 1 for equal sizing and padding */}
<Card className="h-full bg-gray-50 shadow-lg border border-gray-200">
<CardBody>
<p className="text-lg font-semibold text-blue-600 mb-2">Paper</p>
<p className="text-xl font-bold text-gray-800 mb-4">$0.05 to 0.20/KG</p>
<ul className="list-disc list-inside pl-4 text-gray-700">
<li>Cardboard ($0.20/kg)</li>
<li>Newspaper and B&W ($0.11/kg)</li>
<li>Mix paper ($0.05/kg)</li>
</ul>
</CardBody>
</Card>
</div>
<div className="flex-1 p-4">
<Card className="h-full bg-gray-50 shadow-lg border border-gray-200">
<CardBody>
<p className="text-lg font-semibold text-green-600 mb-2">Electronics</p>
<p className="text-xl font-bold text-gray-800 mb-4">$2 to 50/KG</p>
<ul className="list-disc list-inside pl-4 text-gray-700">
<li>Flat TV ($5++)</li>
<li>Laptop ($10++)</li>
<li>Smartphone ($10++)</li>
</ul>
</CardBody>
</Card>
</div>
<div className="flex-1 p-4">
<Card className="h-full bg-gray-50 shadow-lg border border-gray-200">
<CardBody>
<p className="text-lg font-semibold text-red-600 mb-2">Clothes</p>
<p className="text-xl font-bold text-gray-800 mb-4">$0.20/KG</p>
<ul className="list-disc list-inside pl-4 text-gray-700">
<li>Shoe</li>
<li>Jewellery</li>
<li>Bag</li>
</ul>
</CardBody>
</Card>
</div>
</div>
</div>