70 lines
2.4 KiB
TypeScript
70 lines
2.4 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import axios from 'axios';
|
|
import { Card } from '@/components/ui/card';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import { apiConfig } from '@/config/api.config';
|
|
import { toast } from 'sonner';
|
|
const BASE_URL_CUSTOMER = apiConfig.service_customer;
|
|
|
|
export default function CustomerWallet({customerid}: any) {
|
|
const [customerWallet, setCustomerWallet] = useState([]);
|
|
if (!customerid) return '';
|
|
|
|
useEffect(() => {
|
|
fetchCustomerWallet();
|
|
}, []);
|
|
|
|
async function fetchCustomerWallet() {
|
|
try {
|
|
let getCustWallet = await axios.get(`${BASE_URL_CUSTOMER}/customer/wallet`, {
|
|
params: { customerid: customerid }
|
|
});
|
|
setCustomerWallet(getCustWallet.data.data.data);
|
|
} catch (error: any) {
|
|
setCustomerWallet([])
|
|
toast.error(`Wallet Not Found`);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="bg-white p-6 rounded-md shadow-md space-y-4">
|
|
<h2 className="text-lg font-semibold">Wallet Member</h2>
|
|
<Card className="p-4">
|
|
{customerWallet ? (
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full text-sm text-left">
|
|
<thead className="text-xs text-gray-500 border-b">
|
|
<tr>
|
|
<th className="p-2">No</th>
|
|
<th className="p-2">Name</th>
|
|
<th className="p-2">Balance</th>
|
|
<th className="p-2">Month Limit</th>
|
|
<th className="p-2">Credit Limit</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{customerWallet.map((item:any, index) => (
|
|
<tr
|
|
key={item.id}
|
|
className={`${
|
|
index % 2 === 0 ? "bg-gray-50" : "bg-white"
|
|
} hover:bg-gray-100`}
|
|
>
|
|
<td className="p-2 font-medium">{index+1}</td>
|
|
<td className="p-2">{item.wallet}</td>
|
|
<td className="p-2">{item.amount}</td>
|
|
<td className="p-2">{item.monthly_limit}</td>
|
|
<td className="p-2">{item.credit_limit}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-muted-foreground">No wallet</p>
|
|
)}
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|