Merge pull request #11 from UTT-GL03/add-expense

Add expense

Author: RJ-45-1

docker-compose.yml

@@ -37,8 +37,16 @@ services:
   index:
     image: curlimages/curl
     entrypoint: ["/bin/sh","-c"]
-    volumes:
-      - ./frontend/g
+  volumes:
+      - ./frontend/public/data.json:/data.json
+    command:
+      - |
+        curl -X POST http://backend:5984/finary/_bulk_docs \
+        -H "Content-Type: application/json" \
+        -d @/data.json
+    depends_on:
+      accessible_backend:
+        condition: service_completed_successfully
 
   index_created_at:
     image: curlimages/curl

frontend/package-lock.json

@@ -14,7 +14,8 @@
     "chart.js": "^4.5.1",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "react-router": "^7.9.4"
+    "react-router": "^7.9.4",
+    "uuid": "^13.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",

frontend/package.json

@@ -0,0 +1,65 @@
+import { useState } from "react";
+import { v4 as uuidv4 } from "uuid";
+
+export function AddMoney({ open, setOpen, transactionType }) {
+    const [amount, setAmount] = useState("");
+    const [category, setCategory] = useState("");
+    const [date, setDate] = useState("");
+
+
+    const [loading, setLoading] = useState(false);
+
+
+    const handleSubmit = async () => {
+        //setOpen(false);
+        console.log(amount, category, date);
+        setLoading(true);
+        const amountNumber = transactionType === "outcome" ? Number(-amount) : Number(amount);
+        const response = await fetch("http://localhost:5984/finary", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: "Basic " + btoa("admin:secret"),
+            },
+            body: JSON.stringify({
+                id: uuidv4(),
+                amount: amountNumber,
+                category,
+                created_at: date,
+                user_id: "10",
+            }),
+        });
+        const result = await response.json();
+        console.log(result);
+        setLoading(false);
+        setOpen(false);
+    }
+    return (
+        <>
+            <button onClick={() => setOpen(true)}>+ Add</button>
+            <dialog open={open}>
+                <article>
+                    <h2>Add {transactionType}</h2>
+                    <p>
+                        Please enter the {transactionType} details below:
+                    </p>
+                    <ul>
+                        <label>Amount: </label>
+                        <input type="number" value={amount} onChange={(e) => setAmount(e.target.value)} />
+                        <label>Category: </label>
+                        <input type="text" value={category} onChange={(e) => setCategory(e.target.value)} />
+                        <label>Date: </label>
+                        <input type="date" value={date} onChange={(e) => setDate(e.target.value)} />
+
+                    </ul>
+                    <footer>
+                        <button class="secondary" onClick={() => setOpen(false)}>
+                            Cancel
+                        </button>
+                        <button onClick={() => handleSubmit()} disabled={loading}>{loading ? "Loading..." : "Confirm"}</button>
+                    </footer>
+                </article>
+            </dialog>
+        </>
+    );
+}

frontend/src/components/add-money.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { LineChart } from "./line-chart";
 import { CustomTable } from "./custom-table";
+import { AddMoney } from "./add-money";
 
 export function Incomes() {
   const [data, setData] = useState(null);
@@ -11,6 +12,8 @@ export function Incomes() {
   const [incomeChartData, setIncomeChartData] = useState(null);
   const [tableData, setTableData] = useState(null);
 
+  const [dialogOpen, setDialogOpen] = useState(false);
+
   useEffect(() => {
     const currentTime = new Date().toISOString();
     const fetchData = async () => {
@@ -111,8 +114,10 @@ export function Incomes() {
 
   return (
     <div style={{ padding: "2rem" }}>
-      <h1>Incomes</h1>
-
+      <div style={{ display: "flex", justifyContent: "space-between" }}>
+        <h1>Incomes</h1>
+        <AddMoney open={dialogOpen} setOpen={setDialogOpen} transactionType="income" />
+      </div>
       <LineChart chartData={incomeChartData} />
       <CustomTable tableData={tableData} />
       <button onClick={handleLoadMore}>Load More</button>