From 34bdbf9f9c3db7c4ca075004c3f5d091634bf763 Mon Sep 17 00:00:00 2001 From: Atharva Date: Sun, 23 Feb 2025 10:26:18 +0530 Subject: [PATCH] Fix:Fixed loader typo --- .../pages/UserPanel/Farm/AddTransactions.jsx | 167 ++++++++++++++++ .../src/pages/UserPanel/Farm/CreateTask.jsx | 186 ++++++++++++++++++ .../UserPanel/Farm/CreateTransactions.jsx | 20 +- .../src/pages/UserPanel/Farm/CropTable.jsx | 4 +- .../src/pages/UserPanel/Farm/DisplayTask.jsx | 106 ++++++++++ Frontend/src/pages/UserPanel/Farm/Farm.jsx | 4 +- .../src/pages/UserPanel/Farm/FarmPage.jsx | 81 ++++++-- .../pages/UserPanel/Farm/FinanceSummary.jsx | 77 ++++++++ .../src/pages/UserPanel/Farm/Transactions.jsx | 32 +-- 9 files changed, 626 insertions(+), 51 deletions(-) create mode 100644 Frontend/src/pages/UserPanel/Farm/AddTransactions.jsx create mode 100644 Frontend/src/pages/UserPanel/Farm/CreateTask.jsx create mode 100644 Frontend/src/pages/UserPanel/Farm/DisplayTask.jsx create mode 100644 Frontend/src/pages/UserPanel/Farm/FinanceSummary.jsx diff --git a/Frontend/src/pages/UserPanel/Farm/AddTransactions.jsx b/Frontend/src/pages/UserPanel/Farm/AddTransactions.jsx new file mode 100644 index 0000000..72230c6 --- /dev/null +++ b/Frontend/src/pages/UserPanel/Farm/AddTransactions.jsx @@ -0,0 +1,167 @@ +import React, { useState } from "react"; +import Loader from "../../../components/Loader"; + +const AddTransaction = ({ farmId }) => { + const [modalOpen, setModalOpen] = useState(false); + const [type, setType] = useState("Expense"); + const [amount, setAmount] = useState(""); + const [description, setDescription] = useState(""); + const [loading, setLoading] = useState(false); + const [message, setMessage] = useState(""); + + const handleSubmit = async (e) => { + e.preventDefault(); + setLoading(true); + setMessage(""); + + try { + const response = await fetch( + `http://localhost:8000/api/v1/finance/${farmId}/transaction`, + { + method: "POST", + credentials: "include", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + type, + amount: parseFloat(amount), + description, + }), + } + ); + + if (!response.ok) { + throw new Error("Failed to create transaction"); + } + + const data = await response.json(); + console.log("Transaction created:", data); + setMessage("Transaction created successfully!"); + // Optionally clear the form + setType("Expense"); + setAmount(""); + setDescription(""); + } catch (error) { + console.error("Error creating transaction:", error); + setMessage("Error creating transaction."); + } finally { + setLoading(false); + } + }; + + return ( + <> + + + {modalOpen && ( +
+
+
+ {/* Modal Header */} +
+

+ Add Transaction +

+ +
+ {/* Modal Body */} +
+
+
+ + +
+
+ + setAmount(e.target.value)} + className="mt-1 block w-full rounded-md border-gray-300 shadow-sm" + required + /> +
+
+ + +
+ +
+ {message && ( +

+ {message} +

+ )} +
+
+
+
+ )} + + ); +}; + +export default AddTransaction; diff --git a/Frontend/src/pages/UserPanel/Farm/CreateTask.jsx b/Frontend/src/pages/UserPanel/Farm/CreateTask.jsx new file mode 100644 index 0000000..dd9e902 --- /dev/null +++ b/Frontend/src/pages/UserPanel/Farm/CreateTask.jsx @@ -0,0 +1,186 @@ +import React, { useState } from "react"; + +const CreateTask = ({ farmId, onTaskCreated }) => { + const [farm, setFarm] = useState(farmId); + const [taskType, setTaskType] = useState("Sowing"); + const [description, setDescription] = useState("Started Sowing the seeds"); + const [assignedDate, setAssignedDate] = useState("2025-04-15"); + const [status, setStatus] = useState("Pending"); + const [loading, setLoading] = useState(false); + const [message, setMessage] = useState(""); + const [modalOpen, setModalOpen] = useState(false); + + const handleSubmit = async (e) => { + e.preventDefault(); + setLoading(true); + setMessage(""); + + // In a real app, you might also fetch or choose a crop. + // For now, we assume crop is provided. + const crop = "67ba388f9c4979463e64a39a"; + const taskData = { + farm, + crop, + taskType, + description, + assignedDate, + status, + }; + + try { + const response = await fetch("http://localhost:8000/api/v1/task", { + method: "POST", + credentials: "include", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(taskData), + }); + if (!response.ok) { + throw new Error("Failed to create task"); + } + const data = await response.json(); + console.log("Task created:", data); + setMessage("Task created successfully!"); + setModalOpen(false); + // Call the parent's callback with the newly created task + if (onTaskCreated) onTaskCreated(data); + } catch (error) { + console.error("Error creating task:", error); + setMessage("Error creating task."); + } finally { + setLoading(false); + } + }; + + return ( + <> + + + {modalOpen && ( +
+
+
+

Create Task

+ +
+
+
+
+ + +
+
+ + +
+
+ + setAssignedDate(e.target.value)} + className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 focus:ring-2 focus:ring-green-400" + required + /> +
+
+ + +
+ + +
+ {message && ( +

+ {message} +

+ )} +
+
+
+ )} + + ); +}; + +export default CreateTask; diff --git a/Frontend/src/pages/UserPanel/Farm/CreateTransactions.jsx b/Frontend/src/pages/UserPanel/Farm/CreateTransactions.jsx index 9ce5707..b8e2949 100644 --- a/Frontend/src/pages/UserPanel/Farm/CreateTransactions.jsx +++ b/Frontend/src/pages/UserPanel/Farm/CreateTransactions.jsx @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import Laoder from "../../../components/Laoder"; +import Loader from "../../../components/Loader"; const CreateFinance = () => { const [loading, setLoading] = useState(false); @@ -34,17 +34,13 @@ const CreateFinance = () => { }; return ( -
-

Create Finance

- - {message &&

{message}

} -
+ ); }; diff --git a/Frontend/src/pages/UserPanel/Farm/CropTable.jsx b/Frontend/src/pages/UserPanel/Farm/CropTable.jsx index 07ce6ea..b28554e 100644 --- a/Frontend/src/pages/UserPanel/Farm/CropTable.jsx +++ b/Frontend/src/pages/UserPanel/Farm/CropTable.jsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from "react"; -import Laoder from "../../../components/Laoder"; +import Loader from "../../../components/Loader"; const CropTable = ({ farmId }) => { const [crops, setCrops] = useState([]); @@ -49,7 +49,7 @@ const CropTable = ({ farmId }) => { }, []); if (loading) { - return ; + return ; } if (error) { diff --git a/Frontend/src/pages/UserPanel/Farm/DisplayTask.jsx b/Frontend/src/pages/UserPanel/Farm/DisplayTask.jsx new file mode 100644 index 0000000..57f2ee5 --- /dev/null +++ b/Frontend/src/pages/UserPanel/Farm/DisplayTask.jsx @@ -0,0 +1,106 @@ +import React, { useState, useEffect } from "react"; +import Loader from "../../../components/Loader"; + +const DisplayTast = ({ farmId }) => { + const [tasks, setTasks] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + // Function to delete a task and update the state + const handleDeleteTask = async (taskId) => { + try { + const response = await fetch( + `http://localhost:8000/api/v1/task/${taskId}`, + { + method: "DELETE", + credentials: "include", + } + ); + // Assuming that a successful deletion returns a 200 status code + if (!response.ok) { + throw new Error("Failed to delete task"); + } + // Optionally check the response, but we'll update state regardless. + // Remove the deleted task from state. + setTasks((prevTasks) => prevTasks.filter((task) => task._id !== taskId)); + console.log(`Task ${taskId} deleted successfully.`); + } catch (error) { + console.error("Error deleting task:", error); + // Optionally, you could set an error state here. + } + }; + + useEffect(() => { + const fetchTasks = async () => { + setLoading(true); + setError(null); + try { + const response = await fetch( + `http://localhost:8000/api/v1/task/farm/${farmId}`, + { + credentials: "include", + headers: { + "Content-Type": "application/json", + }, + } + ); + if (!response.ok) { + throw new Error("Failed to fetch tasks"); + } + const data = await response.json(); + setTasks(data); + } catch (err) { + setError(err.message); + } finally { + setLoading(false); + } + }; + + fetchTasks(); + }, [farmId]); + + if (loading) return
Loading tasks...
; + if (error) return
Error: {error}
; + if (!tasks || tasks.length === 0) { + return
No tasks found for this farm.
; + } + + return ( +
+ + + + + + + + + + + + {tasks.map((task) => ( + + + + + + + + ))} + +
Task TypeDescriptionAssigned DateStatusAction
{task.taskType}{task.description} + {new Date(task.assignedDate).toLocaleDateString()} + {task.status} + +
+
+ ); +}; + +export default DisplayTast; diff --git a/Frontend/src/pages/UserPanel/Farm/Farm.jsx b/Frontend/src/pages/UserPanel/Farm/Farm.jsx index b2b1ad4..4d2c39f 100644 --- a/Frontend/src/pages/UserPanel/Farm/Farm.jsx +++ b/Frontend/src/pages/UserPanel/Farm/Farm.jsx @@ -48,7 +48,9 @@ const Farm = ({ farmData, farmId }) => { {farmData.soilType} {farmData.size} {farmData.waterContent} - Edit + + + diff --git a/Frontend/src/pages/UserPanel/Farm/FarmPage.jsx b/Frontend/src/pages/UserPanel/Farm/FarmPage.jsx index c5d13fa..f606932 100644 --- a/Frontend/src/pages/UserPanel/Farm/FarmPage.jsx +++ b/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 ; + return ; } if (!farmData) { @@ -49,24 +53,59 @@ export default function FarmPage() { ); } - console.log("My farm id is : ", farmId); - return ( -
- {/* Back Button */} +
+ {/* Header Section */} +
+
+ +
+
-
- -
-
- -
-
- -
-
- -
+ {/* Crop Table Section */} +
+ +
+ + {/* Create Transactions Section */} +
+
+ +
+
+ + {/* Transactions Table Section */} +
+ +
+ + {/* Add Transaction Modal Section */} +
+
+ +
+
+ + {/* Finance Summary Section */} +
+
+ +
+
+ + {/* Create Task Section */} +
+
+ +
+
+ + {/* Display Task Section */} +
+
+ +
+
); } diff --git a/Frontend/src/pages/UserPanel/Farm/FinanceSummary.jsx b/Frontend/src/pages/UserPanel/Farm/FinanceSummary.jsx new file mode 100644 index 0000000..e7038c5 --- /dev/null +++ b/Frontend/src/pages/UserPanel/Farm/FinanceSummary.jsx @@ -0,0 +1,77 @@ +import React, { useState, useEffect } from "react"; +import Loader from "../../../components/Loader"; + +const FinanceSummary = ({ farmId }) => { + const [summary, setSummary] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(""); + + useEffect(() => { + const fetchSummary = async () => { + setLoading(true); + setError(""); + try { + const response = await fetch( + `http://localhost:8000/api/v1/finance/summary/${farmId}`, + { credentials: "include" } + ); + if (!response.ok) { + throw new Error("Failed to fetch summary"); + } + const data = await response.json(); + setSummary(data); + } catch (err) { + console.error("Error fetching finance summary:", err); + setError("Error fetching summary"); + } finally { + setLoading(false); + } + }; + fetchSummary(); + }, [farmId]); + + if (loading) return ; + if (error) return
{error}
; + + // Extract only the important fields. + const { totalExpenses, totalRevenue, transactions } = summary; + const transactionsCount = Array.isArray(transactions) + ? transactions.length + : 0; + + return ( +
+
+
+

Finance Summary

+
+
+ + + + + + + + + + + + + + + +
+ Total Expenses + {totalExpenses}
+ Total Revenue + {totalRevenue}
+ Transactions + {transactionsCount}
+
+
+
+ ); +}; + +export default FinanceSummary; diff --git a/Frontend/src/pages/UserPanel/Farm/Transactions.jsx b/Frontend/src/pages/UserPanel/Farm/Transactions.jsx index a8be177..37ecb5b 100644 --- a/Frontend/src/pages/UserPanel/Farm/Transactions.jsx +++ b/Frontend/src/pages/UserPanel/Farm/Transactions.jsx @@ -1,6 +1,6 @@ import { useEffect, useState } from "react"; import Td from "../../../components/Td"; -import Laoder from "../../../components/Laoder"; +import Loader from "../../../components/Loader"; const Transactions = ({ farmId }) => { const [data, setData] = useState([]); @@ -25,34 +25,36 @@ const Transactions = ({ farmId }) => { return (
{loading ? ( - + ) : ( - - - - {Array.isArray(data) && data.length > 0 ? ( + {!Array.isArray(data) ? ( + // Data is an object: show key-value pairs + Object.entries(data).map(([key, value]) => ( + + + + + )) + ) : // Data is an array: render using your Td component + data.length > 0 ? ( data.map((item) => -
- Farm name + Field - Location - - Type - - Size (acres) - - Action + Value
{key} + {typeof value === "object" ? JSON.stringify(value) : value} +
) ) : (
+ No data available