Fix:Fixed loader typo

Frontend/src/pages/UserPanel/Farm/FarmPage.jsx

@@ -4,7 +4,11 @@ import Farm from "./Farm";
 import CropTable from "./CropTable";
 import Transactions from "./Transactions";
 import CreateTransactions from "./CreateTransactions";
-import Laoder from "../../../components/Laoder";
+import Loader from "../../../components/Loader";
+import AddTransaction from "./AddTransactions";
+import FinanceSummary from "./FinanceSummary";
+import CreateTask from "./CreateTask";
+import DisplayTast from "./DisplayTask";
 
 export default function FarmPage() {
   const { farmId } = useParams();
@@ -13,7 +17,7 @@ export default function FarmPage() {
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    async function fetching() {
+    async function fetchFarmData() {
       try {
         const response = await fetch(
           `http://localhost:8000/api/v1/farm/${farmId}`,
@@ -26,7 +30,7 @@ export default function FarmPage() {
           }
         );
         const jsonData = await response.json();
-        console.log(jsonData);
+        console.log("Fetched farm data:", jsonData);
         setFarmData(jsonData);
       } catch (error) {
         console.error("Error fetching farm data: ", error);
@@ -34,11 +38,11 @@ export default function FarmPage() {
         setLoading(false);
       }
     }
-    fetching();
+    fetchFarmData();
   }, [farmId]);
 
   if (loading) {
-    return <Laoder></Laoder>;
+    return <Loader />;
   }
 
   if (!farmData) {
@@ -49,24 +53,59 @@ export default function FarmPage() {
     );
   }
 
-  console.log("My farm id is : ", farmId);
-
   return (
-    <div className="w-full bg-white rounded-lg shadow p-4">
-      {/* Back Button */}
+    <div className="w-full bg-white rounded-lg shadow p-4 space-y-8">
+      {/* Header Section */}
+      <header className="mb-4">
+        <div className="flex justify-end">
+          <Farm farmData={farmData} farmId={farmId} />
+        </div>
+      </header>
 
-      <div className="mb-4 flex justify-end">
-        <Farm farmData={farmData} farmId={farmId}></Farm>
-      </div>
-      <div className="mb-4 ">
-        <CropTable farmId={farmId}></CropTable>
-      </div>
-      <div className="mb-4 flex justify-end">
-        <CreateTransactions farmId={farmId}></CreateTransactions>
-      </div>
-      <div className="mb-4 ">
-        <Transactions farmId={farmId}></Transactions>
-      </div>
+      {/* Crop Table Section */}
+      <section>
+        <CropTable farmId={farmId} />
+      </section>
+
+      {/* Create Transactions Section */}
+      <section>
+        <div className="flex justify-end">
+          <CreateTransactions farmId={farmId} />
+        </div>
+      </section>
+
+      {/* Transactions Table Section */}
+      <section>
+        <Transactions farmId={farmId} />
+      </section>
+
+      {/* Add Transaction Modal Section */}
+      <section>
+        <div className="flex justify-end">
+          <AddTransaction farmId={farmId} />
+        </div>
+      </section>
+
+      {/* Finance Summary Section */}
+      <section>
+        <div className="flex justify-end">
+          <FinanceSummary farmId={farmId} />
+        </div>
+      </section>
+
+      {/* Create Task Section */}
+      <section>
+        <div className="flex justify-end">
+          <CreateTask farmId={farmId} />
+        </div>
+      </section>
+
+      {/* Display Task Section */}
+      <section>
+        <div className="flex justify-end">
+          <DisplayTast farmId={farmId} />
+        </div>
+      </section>
     </div>
   );
 }