add put

frontend/src/components/ClientList.js

@@ -1,30 +1,77 @@
-import React, { useEffect, useState } from 'react';
-import { getClients } from '../api';
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
 
-const ClientList = () => {
+function ClientList() {
   const [clients, setClients] = useState([]);
+  const [newClient, setNewClient] = useState({
+    name: '',
+    email: '',
+  });
 
   useEffect(() => {
-    const fetchClients = async () => {
-      const data = await getClients();
-      setClients(data);
-    };
-
     fetchClients();
   }, []);
 
+  const fetchClients = async () => {
+    try {
+      const response = await axios.get('/api/clients');
+      setClients(response.data);
+    } catch (error) {
+      console.error('Error fetching clients:', error);
+    }
+  };
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setNewClient({ ...newClient, [name]: value });
+  };
+
+  const handleFormSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      await axios.post('/api/clients', newClient);
+      fetchClients(); // Refresh the list after adding
+      setNewClient({ name: '', email: '' }); // Reset form
+    } catch (error) {
+      console.error('Error adding client:', error);
+    }
+  };
+
   return (
     <div>
-      <h3>Client List</h3>
+      <h2>Clients</h2>
+
+      {/* Form to Add New Client */}
+      <form onSubmit={handleFormSubmit}>
+        <input
+          type="text"
+          name="name"
+          value={newClient.name}
+          onChange={handleInputChange}
+          placeholder="Client Name"
+          required
+        />
+        <input
+          type="email"
+          name="email"
+          value={newClient.email}
+          onChange={handleInputChange}
+          placeholder="Email"
+          required
+        />
+        <button type="submit">Add Client</button>
+      </form>
+
+      {/* List of Clients */}
       <ul>
-        {clients.map(client => (
+        {clients.map((client) => (
           <li key={client._id}>
-            {client.name} - Email: {client.email}
+            {client.name} - {client.email}
           </li>
         ))}
       </ul>
     </div>
   );
-};
+}
 
 export default ClientList;

frontend/src/components/InvoiceList.js

@@ -1,30 +1,85 @@
-import React, { useEffect, useState } from 'react';
-import { getInvoices } from '../api';
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
 
-const InvoiceList = () => {
+function InvoiceList() {
   const [invoices, setInvoices] = useState([]);
+  const [newInvoice, setNewInvoice] = useState({
+    client: '',
+    amount: '',
+    date: '',
+  });
 
   useEffect(() => {
-    const fetchInvoices = async () => {
-      const data = await getInvoices();
-      setInvoices(data);
-    };
-
     fetchInvoices();
   }, []);
 
+  const fetchInvoices = async () => {
+    try {
+      const response = await axios.get('/api/invoices');
+      setInvoices(response.data);
+    } catch (error) {
+      console.error('Error fetching invoices:', error);
+    }
+  };
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setNewInvoice({ ...newInvoice, [name]: value });
+  };
+
+  const handleFormSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      await axios.post('/api/invoices', newInvoice);
+      fetchInvoices(); // Refresh the list after adding
+      setNewInvoice({ client: '', amount: '', date: '' }); // Reset form
+    } catch (error) {
+      console.error('Error adding invoice:', error);
+    }
+  };
+
   return (
     <div>
-      <h3>Invoice List</h3>
+      <h2>Invoices</h2>
+
+      {/* Form to Add New Invoice */}
+      <form onSubmit={handleFormSubmit}>
+        <input
+          type="text"
+          name="client"
+          value={newInvoice.client}
+          onChange={handleInputChange}
+          placeholder="Client Name"
+          required
+        />
+        <input
+          type="number"
+          name="amount"
+          value={newInvoice.amount}
+          onChange={handleInputChange}
+          placeholder="Amount"
+          required
+        />
+        <input
+          type="date"
+          name="date"
+          value={newInvoice.date}
+          onChange={handleInputChange}
+          required
+        />
+        <button type="submit">Add Invoice</button>
+      </form>
+
+      {/* List of Invoices */}
       <ul>
-        {invoices.map(invoice => (
+        {invoices.map((invoice) => (
           <li key={invoice._id}>
-            {invoice.client} - Due: {invoice.dueDate} - Paid: {invoice.paid ? 'Yes' : 'No'}
+            {invoice.client} - ${invoice.amount} on {invoice.date}
           </li>
         ))}
       </ul>
     </div>
   );
-};
+}
 
 export default InvoiceList;