87 lines
3.0 KiB
JavaScript
87 lines
3.0 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import Sidebar from '../sidebar/Sidebar';
|
|
import axiosInstance from '../../api/axiosConfig';
|
|
|
|
const CustomerList = () => {
|
|
const [customers, setCustomers] = useState([]);
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
// Fetch the customers data from the JSON file
|
|
getCustomers();
|
|
}, []);
|
|
|
|
const getCustomers = async () => {
|
|
try {
|
|
const response = await axiosInstance.get('http://localhost:5000/customers');
|
|
let customers_data = response.data; // List of customers
|
|
setCustomers(customers_data);
|
|
} catch (error) {
|
|
throw error;
|
|
}
|
|
};
|
|
|
|
const handleAddCustomer = () => {
|
|
navigate('/add-customer');
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-row min-h-screen">
|
|
<Sidebar />
|
|
<div className="flex-grow p-6 bg-gray-100">
|
|
<div className="bg-white p-6 rounded-lg shadow">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h1 className="text-2xl font-semibold text-gray-800">Customers List</h1>
|
|
<button
|
|
className="bg-#0e355b text-d1d5db px-4 py-2 rounded-md text-sm"
|
|
onClick={handleAddCustomer}
|
|
>
|
|
Add New Customer
|
|
</button>
|
|
</div>
|
|
<div className="flex items-center mb-4">
|
|
<svg
|
|
className="w-5 h-5 mr-2 text-gray-500"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
|
|
/>
|
|
</svg>
|
|
<span className="text-sm text-gray-600">Filter</span>
|
|
</div>
|
|
<p className="text-sm text-gray-600 mb-4">Total Customers ({customers.length})</p>
|
|
<table className="w-full bg-white">
|
|
<thead>
|
|
<tr className="text-left text-xs uppercase text-gray-600 border-b">
|
|
<th className="py-2">#</th>
|
|
<th className="py-2">customer id</th>
|
|
<th className="py-2">customer fullname</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{customers.map((customer, index) => (
|
|
<tr key={customer.id} className="border-b last:border-none">
|
|
<td className="py-2 text-gray-800">{index + 1}</td>
|
|
<td className="py-2 text-gray-800">{customer.id}</td>
|
|
<td className="py-2 text-gray-800">{customer.firstname} {customer.lastname} </td>
|
|
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CustomerList;
|