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.

265 lines
14 KiB
JavaScript

import React from 'react'
import { Head, Link } from '@inertiajs/react'
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'
import { isEmpty } from 'lodash'
import { formatIDDate, formatIDR } from '@/utils'
export default function Detail(props) {
const { paylater, deposit } = props
return (
<AuthenticatedLayout
page={'Pembayaran Hutang'}
action={paylater.description}
parent={route('paylater.repay.index')}
>
<Head title="Pembayaran Hutang" />
<div>
<div className="mx-auto sm:px-6 lg:px-8">
<div className="overflow-hidden p-4 shadow-sm sm:rounded-lg bg-white dark:bg-gray-800 flex flex-col ">
<div className="flex flex-row justify-between">
<div className="text-xl font-bold mb-4">
{paylater.description}
</div>
</div>
{isEmpty(deposit) === true && (
<table className="relative w-full overflow-x-auto p-2 rounded">
<tbody>
<tr>
<td className="font-bold">Customer</td>
<td>:</td>
<td>
<Link
href={route('mitra.edit', {
customer: paylater.customer,
})}
className="hover:underline"
>
{paylater.customer.name}
</Link>
</td>
</tr>
<tr>
<td className="font-bold">Jumlah</td>
<td>:</td>
<td>{paylater.amount}</td>
</tr>
<tr>
<td className="font-bold">Status</td>
<td>:</td>
<td
className={
paylater.status_text.text_color
}
>
{paylater.status_text.text}
</td>
</tr>
<tr>
<td className="font-bold">Tanggal</td>
<td>:</td>
<td>{paylater.format_created_at}</td>
</tr>
<tr>
<td className="font-bold">
Pembayaran Hutang
</td>
<td>:</td>
<td>
{isEmpty(
paylater.not_fullpayment_reason
) === false ? (
<p>Sebagian</p>
) : (
<p>Penuh</p>
)}
</td>
</tr>
{isEmpty(paylater.next_payment) ===
false && (
<tr>
<td className="font-bold">
Tanggal Pemenuhan
</td>
<td>:</td>
<td>
{formatIDDate(
paylater.next_payment
)}
</td>
</tr>
)}
</tbody>
</table>
)}
{isEmpty(deposit) === false && (
<>
<table className="relative w-full overflow-x-auto p-2 rounded">
<tbody>
<tr>
<td className="font-bold">
Customer
</td>
<td>:</td>
<td>
<Link
href={route('mitra.edit', {
customer:
deposit.customer,
})}
className="hover:underline"
>
{deposit.customer.name}
</Link>
</td>
</tr>
<tr>
<td className="font-bold">
Metode Pembayaran
</td>
<td>:</td>
<td>{deposit.payment_channel}</td>
</tr>
{deposit.account !== null && (
<tr>
<td className="font-bold">
Bank Akun
</td>
<td>:</td>
<td>
{deposit.account.name} (
{deposit.account.bank_name})
</td>
</tr>
)}
{deposit.deposit_location !== null && (
<tr>
<td className="font-bold">
Lokasi Cash / Setor Tunai
</td>
<td>:</td>
<td>
{
deposit.deposit_location
.name
}
</td>
</tr>
)}
<tr>
<td className="font-bold">
Jumlah
</td>
<td>:</td>
<td>{deposit.amount}</td>
</tr>
<tr>
<td className="font-bold">
Admin Fee
</td>
<td>:</td>
<td>
Rp{' '}
{formatIDR(+deposit.admin_fee)}
</td>
</tr>
<tr>
<td className="font-bold">
Status
</td>
<td>:</td>
<td
className={
deposit.status.text_color
}
>
{deposit.status.text}
</td>
</tr>
<tr>
<td className="font-bold">
Alasan Penolakan
</td>
<td>:</td>
<td>{deposit.note}</td>
</tr>
{isEmpty(deposit.editor) === false && (
<tr>
<td className="font-bold">
Approver
</td>
<td>:</td>
<td>{deposit.editor.name}</td>
</tr>
)}
<tr>
<td className="font-bold">
Tanggal
</td>
<td>:</td>
<td>{deposit.format_created_at}</td>
</tr>
<tr>
<td className="font-bold">
Pembayaran Hutang
</td>
<td>:</td>
<td>
{isEmpty(
deposit.paylater
.not_fullpayment_reason
) === false ? (
<p>Sebagian</p>
) : (
<p>Penuh</p>
)}
</td>
</tr>
{isEmpty(
deposit.paylater.next_payment
) === false && (
<tr>
<td className="font-bold">
Tanggal Pemenuhan
</td>
<td>:</td>
<td>
{formatIDDate(
deposit.paylater
.next_payment
)}
</td>
</tr>
)}
</tbody>
</table>
<div>
{isEmpty(deposit.image_prove_url) ===
false && (
<div>
<a
href={deposit.image_prove_url}
target="_blank"
>
<img
src={
deposit.image_prove_url
}
className="w-full object-fill h-96"
loading="lazy"
/>
</a>
</div>
)}
</div>
</>
)}
</div>
</div>
</div>
</AuthenticatedLayout>
)
}