You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

82 lines
3.3 KiB
JavaScript

3 years ago
import React from 'react';
import Pagination from '@/Components/Pagination'
import Authenticated from '@/Layouts/Authenticated';
import { Head } from '@inertiajs/inertia-react';
import { formatIDR } from '@/utils';
import ModalClosing from './ModalClosing';
export default function Summary(props) {
const { data: budgets , links } = props.budgets
return (
<Authenticated
errors={props.errors}
header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">Summary</h2>}
>
<Head title="Summary" />
<div className="flex flex-col space-x-0 space-y-2 md:space-y-0 md:space-x-4 md:flex-row pt-6 px-6">
<div className="card bg-white w-full md:w-1/4">
<div className="card-body">
<h1 className="font-bold text-xl">Total Income : {formatIDR(props.income)}</h1>
</div>
</div>
<div className="card bg-white w-full md:w-1/4">
<div className="card-body">
<h1 className="font-bold text-xl">Total Expense : {formatIDR(props.expense)}</h1>
</div>
</div>
<div className="card bg-white w-full md:w-1/4">
<div className="card-body">
<h1 className="font-bold text-xl">Balance : {formatIDR(props.balance)}</h1>
</div>
</div>
<div className="card bg-white w-full md:w-1/4">
<div className="card-body">
3 years ago
<a href="#my-modal"className="btn btn-primary">monthly closing</a>
3 years ago
</div>
</div>
</div>
<div className="flex flex-col space-y-2 md:space-y-0 md:flex-row py-6">
<div className="w-full px-6 md:pr-8">
<div className="card bg-white">
<div className="card-body">
<div className="overflow-x-auto">
<table className="table w-full table-zebra">
<thead>
<tr>
<th></th>
<th>Category</th>
<th>Description</th>
<th>Budget</th>
<th>Previous Budget</th>
<th>Total Expense/month</th>
<th>Remain per Category</th>
</tr>
</thead>
<tbody>
3 years ago
{budgets?.map((budget, index) => (
3 years ago
<tr key={budget.id}>
3 years ago
<th>{index+1}</th>
3 years ago
<td>{budget?.category?.name}</td>
<td>{budget?.category?.description}</td>
<td>{formatIDR(budget.budget)}</td>
<td>{formatIDR(budget.rollover)}</td>
<td>{formatIDR(budget.total_used)}</td>
<td>{formatIDR(budget.remain)}</td>
</tr>
))}
</tbody>
</table>
</div>
3 years ago
<Pagination links={links}/>
3 years ago
</div>
</div>
</div>
</div>
3 years ago
<ModalClosing />
3 years ago
</Authenticated>
);
}