fixed css and validation

client/src/pages/HBContestPage.tsx

@@ -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">
+                <div key={user.userId} className="p-4 border rounded-md bg-red-100 dark:bg-primary-950 flex items-center">
-                  <span className="text-lg font-bold w-8">{index + 2}</span>
+                  <span className="text-xl font-bold w-8">{index + 2}</span>
                   <span className="flex-1 text-center">{user.name}</span>
                 </div>
               ))}

client/src/pages/HBFormPage.tsx

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

client/src/pages/SchedulePage.tsx

@@ -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,15 +160,13 @@ export default function SchedulePage() {
               ))}
             </TableBody>
           </Table>
-          <div>
+          <div className="flex flex-row gap-4"> {/* Adjust gap size as needed */}
-            <div>
+            <div className="flex-1 p-4"> {/* Flex 1 for equal sizing and padding */}
-              <div className="flex flex-row gap-20 ">
+              <Card className="h-full bg-gray-50 shadow-lg border border-gray-200">
-                <div>
-                  <Card aria-label="Paper Price Card 1">
                 <CardBody>
-                      <p className="text-lg">Paper</p>
+                  <p className="text-lg font-semibold text-blue-600 mb-2">Paper</p>
-                      <p className="text-xl">$0.05 to 0.20/KG</p>
+                  <p className="text-xl font-bold text-gray-800 mb-4">$0.05 to 0.20/KG</p>
-                      <ul>
+                  <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>
@@ -172,36 +174,34 @@ export default function SchedulePage() {
                 </CardBody>
               </Card>
             </div>
-                <div>
+            <div className="flex-1 p-4">
-                  <Card aria-label="Paper Price Card 2">
+              <Card className="h-full bg-gray-50 shadow-lg border border-gray-200">
                 <CardBody>
-                      <p className="text-lg">Paper</p>
+                  <p className="text-lg font-semibold text-green-600 mb-2">Electronics</p>
-                      <p className="text-xl">$0.05 to 0.20/KG</p>
+                  <p className="text-xl font-bold text-gray-800 mb-4">$2 to 50/KG</p>
-                      <ul>
+                  <ul className="list-disc list-inside pl-4 text-gray-700">
-                        <li>Cardboard ($0.20/kg)</li>
+                    <li>Flat TV ($5++)</li>
-                        <li>Newspaper and B&W ($0.11/kg)</li>
+                    <li>Laptop ($10++)</li>
-                        <li>Mix paper ($0.05/kg)</li>
+                    <li>Smartphone ($10++)</li>
                   </ul>
                 </CardBody>
               </Card>
             </div>
-                <div>
+            <div className="flex-1 p-4">
-                  <Card aria-label="Paper Price Card 3">
+              <Card className="h-full bg-gray-50 shadow-lg border border-gray-200">
                 <CardBody>
-                      <p className="text-lg">Paper</p>
+                  <p className="text-lg font-semibold text-red-600 mb-2">Clothes</p>
-                      <p className="text-xl">$0.05 to 0.20/KG</p>
+                  <p className="text-xl font-bold text-gray-800 mb-4">$0.20/KG</p>
-                      <ul>
+                  <ul className="list-disc list-inside pl-4 text-gray-700">
-                        <li>Cardboard ($0.20/kg)</li>
+                    <li>Shoe</li>
-                        <li>Newspaper and B&W ($0.11/kg)</li>
+                    <li>Jewellery</li>
-                        <li>Mix paper ($0.05/kg)</li>
+                    <li>Bag</li>
                   </ul>
                 </CardBody>
               </Card>
             </div>
           </div>
         </div>
-          </div>
-        </div>
       </section>
     </div>
   );