세금계산서 수정
This commit is contained in:
focp212@naver.com
@@ -12,32 +12,40 @@ import {
|
||||
MAIN_ADDRESS,
|
||||
POSTAL_CODE
|
||||
} from '../model/constant';
|
||||
import { RecipientInfo, SupplierInfo, TransactionDetails } from '@/entities/vat-return/model/types';
|
||||
import { PaymentInfo, RecipientInfo, SupplierInfo, TransactionDetails } from '@/entities/vat-return/model/types';
|
||||
import '@/shared/ui/assets/css/style-tax-invoice.css';
|
||||
import { useAppBridge } from '@/hooks/useAppBridge';
|
||||
|
||||
export interface TaxInvoiceSampleProps {
|
||||
taxInvoiceSampleOn: boolean;
|
||||
setTaxInvoiceSampleOn: (taxInvoiceSampleOn: boolean) => void;
|
||||
managementNumber?: string | number | null;
|
||||
approvalNumber?: string | number | null;
|
||||
supplierInfo?: SupplierInfo;
|
||||
recipientInfo?: RecipientInfo;
|
||||
issueDate?: string;
|
||||
supplyAmount?: number;
|
||||
taxAmount?: number
|
||||
totalAmount?: number;
|
||||
remark?: string | null;
|
||||
transactionDetails?: TransactionDetails;
|
||||
paymentInfo?: PaymentInfo;
|
||||
};
|
||||
|
||||
export const TaxInvoiceSample = ({
|
||||
taxInvoiceSampleOn,
|
||||
setTaxInvoiceSampleOn,
|
||||
managementNumber,
|
||||
approvalNumber,
|
||||
supplierInfo,
|
||||
recipientInfo,
|
||||
issueDate,
|
||||
supplyAmount,
|
||||
taxAmount,
|
||||
totalAmount,
|
||||
transactionDetails
|
||||
remark,
|
||||
transactionDetails,
|
||||
paymentInfo
|
||||
}: TaxInvoiceSampleProps) => {
|
||||
const { t } = useTranslation();
|
||||
const { isIOS, saveImage } = useAppBridge();
|
||||
@@ -105,7 +113,7 @@ export const TaxInvoiceSample = ({
|
||||
rs.push(
|
||||
<td
|
||||
key={ `new-supply-amount-empty-${i}`}
|
||||
className="inner-table10-td2"
|
||||
className="w-19 p-cell-5 border-right-1 font-base text-xs-dark text-center"
|
||||
> </td>
|
||||
);
|
||||
}
|
||||
@@ -114,7 +122,7 @@ export const TaxInvoiceSample = ({
|
||||
rs.push(
|
||||
<td
|
||||
key={ `new-supply-amount-number-${i}`}
|
||||
className="inner-table10-td2"
|
||||
className="w-19 p-cell-5 border-right-1 font-base text-xs-dark text-center"
|
||||
>{ str }</td>
|
||||
);
|
||||
}
|
||||
@@ -127,7 +135,7 @@ export const TaxInvoiceSample = ({
|
||||
rs.push(
|
||||
<td
|
||||
key={ `new-tax-amount=empty-${i}` }
|
||||
className="inner-table10-td2"
|
||||
className="w-19 p-cell-5 border-right-1 font-base text-xs-dark text-center"
|
||||
> </td>
|
||||
);
|
||||
}
|
||||
@@ -136,7 +144,7 @@ export const TaxInvoiceSample = ({
|
||||
rs.push(
|
||||
<td
|
||||
key={ `new-tax-amount=number-${i}` }
|
||||
className="inner-table10-td2"
|
||||
className="w-19 p-cell-5 border-right-1 font-base text-xs-dark text-center"
|
||||
>{ str }</td>
|
||||
);
|
||||
}
|
||||
@@ -185,21 +193,28 @@ export const TaxInvoiceSample = ({
|
||||
<center className="wrap-center">
|
||||
<table
|
||||
className="outer-table"
|
||||
role="presentation"
|
||||
role="presentation"
|
||||
cellPadding={0}
|
||||
cellSpacing={0}
|
||||
width="100%"
|
||||
style={{backgroundColor: '#FAFAFA'}}
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
className="outer-table-td"
|
||||
align="center"
|
||||
style={{margin:0,padding:0}}
|
||||
>
|
||||
<table
|
||||
className="inner-table"
|
||||
role="presentation"
|
||||
cellPadding={0}
|
||||
cellSpacing={0}
|
||||
className="main-container"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="inner-table-td1">
|
||||
<td style={{padding: '20px 0 20px 0'}}>
|
||||
<img
|
||||
className="nicepay-logo"
|
||||
src={ IMAGE_ROOT + '/mail_nicepay_logo.svg' }
|
||||
@@ -209,48 +224,58 @@ export const TaxInvoiceSample = ({
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ padding: 0 }}>
|
||||
<td className="p-0">
|
||||
<table
|
||||
className="inner-table3"
|
||||
role="presentation"
|
||||
cellPadding={0}
|
||||
cellSpacing={0}
|
||||
className="main-table w-full"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="inner-table3-td1">
|
||||
<td className="p-header">
|
||||
<table
|
||||
className="inner-table4"
|
||||
role="presentation"
|
||||
cellPadding={0}
|
||||
cellSpacing={0}
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="inner-table4-td1">세금계산서</td>
|
||||
<td className="title font-base">세금계산서</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table4-td2">
|
||||
<td className="p-content">
|
||||
<table
|
||||
className="inner-table5"
|
||||
role="presentation"
|
||||
cellPadding={0}
|
||||
cellSpacing={0}
|
||||
className="main-border w-full"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="inner-table5-td1">세금계산서</td>
|
||||
<td className="inner-table5-td2">
|
||||
<td
|
||||
className="w-310 border-right-1 font-base invoice-title"
|
||||
style={{verticalAlign: 'middle'}}
|
||||
>세금계산서</td>
|
||||
<td className="w-310 p-0">
|
||||
<table
|
||||
className="inner-table6"
|
||||
role="presentation"
|
||||
cellPadding={0}
|
||||
cellSpacing={0}
|
||||
className="w-full"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="inner-table6-td1">승인번호</td>
|
||||
<td className="inner-table6-td2"> </td>
|
||||
<td className="bg-gray w-37 p-cell-5 border-bottom-1 border-right-1 font-base text-xs-gray text-center">승인번호</td>
|
||||
<td className="p-cell-5 border-bottom-1 font-base text-sm-dark text-left">{ approvalNumber || returnNbsp() }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table6-td3">관리번호</td>
|
||||
<td className="inner-table6-td4"> </td>
|
||||
<td className="bg-gray w-37 p-cell-5 border-right-1 font-base text-xs-gray text-center">관리번호</td>
|
||||
<td className="p-cell-5 font-base text-sm-dark text-left">{ managementNumber || returnNbsp() }</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -261,54 +286,60 @@ export const TaxInvoiceSample = ({
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table4-td2">
|
||||
<td className="p-content">
|
||||
<table
|
||||
className="inner-table7"
|
||||
role="presentation"
|
||||
cellPadding={0}
|
||||
cellSpacing={0}
|
||||
className="section-border w-full"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="inner-table7-td1">
|
||||
<td className="w-310 p-0 v-top border-left-05 border-right-05">
|
||||
<table
|
||||
className="inner-table6"
|
||||
role="presentation"
|
||||
cellPadding={0}
|
||||
cellSpacing={0}
|
||||
className="w-full"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="inner-table6-td5">
|
||||
<td className="supplier-label w-20">
|
||||
공<br />급<br />자
|
||||
</td>
|
||||
<td className="inner-table6-td6">
|
||||
<td className="w-280 p-0 v-top">
|
||||
<table
|
||||
className="inner-table6"
|
||||
role="presentation"
|
||||
cellPadding={0}
|
||||
cellSpacing={0}
|
||||
width="100%"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="inner-table6-td7">등록번호</td>
|
||||
<td className="header-cell-bordered w-56 font-base">등록번호</td>
|
||||
<td
|
||||
className="inner-table6-td8"
|
||||
colSpan={ 3 }
|
||||
className="p-cell-5 border-bottom-1 font-base text-xs-dark text-left"
|
||||
colSpan={3}
|
||||
>{ supplierInfo?.businessRegistrationNumber }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table6-td7">상호(법인명)</td>
|
||||
<td className="inner-table6-td9">{ supplierInfo?.companyName }</td>
|
||||
<td className="inner-table6-td10">성명</td>
|
||||
<td className="inner-table6-td8">{ supplierInfo?.ceoName }</td>
|
||||
<td className="header-cell-bordered w-56 font-base">상호(법인명)</td>
|
||||
<td className="p-cell-5 border-bottom-1 border-right-1 font-base text-xs-dark text-left">{ supplierInfo?.companyName }</td>
|
||||
<td className="header-cell-bordered w-38 font-base">성명</td>
|
||||
<td className="p-cell-5 border-bottom-1 font-base text-xs-dark text-left">{ supplierInfo?.ceoName }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table6-td7">사업장 주소</td>
|
||||
<td className="header-cell-bordered w-56 font-base">사업장 주소</td>
|
||||
<td
|
||||
className="inner-table6-td8"
|
||||
colSpan={ 3 }
|
||||
className="p-cell-5 border-bottom-1 font-base text-xs-dark text-left"
|
||||
colSpan={3}
|
||||
>{ supplierInfo?.address }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table6-td7-1">업태</td>
|
||||
<td className="inner-table6-td9-1">{ supplierInfo?.businessType }</td>
|
||||
<td className="inner-table6-td10-1">종목</td>
|
||||
<td className="inner-table6-td8-1">{ supplierInfo?.businessItem }</td>
|
||||
<td className="bg-gray w-56 p-cell-5 border-right-1 font-base text-xs-gray text-center">업태</td>
|
||||
<td className="p-cell-5 border-right-1 font-base text-xs-dark text-left">{ supplierInfo?.businessType }</td>
|
||||
<td className="bg-gray w-38 p-cell-5 border-right-1 font-base text-xs-gray text-center">종목</td>
|
||||
<td className="p-cell-5 font-base text-xs-dark text-left">{ supplierInfo?.businessItem }</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -317,46 +348,51 @@ export const TaxInvoiceSample = ({
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<td className="inner-table7-td2">
|
||||
<td className="w-310 p-0 v-top border-right-05">
|
||||
<table
|
||||
className="inner-table6"
|
||||
role="presentation"
|
||||
cellPadding={0}
|
||||
cellSpacing={0}
|
||||
className="w-full"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="inner-table6-td11">
|
||||
<td className="supplier-label w-20 line-height-13">
|
||||
공<br />급<br />받<br />는<br />자
|
||||
</td>
|
||||
<td className="inner-table6-td12">
|
||||
<td className="w-280 p-0 v-top border-right-1">
|
||||
<table
|
||||
className="inner-table6"
|
||||
role="presentation"
|
||||
cellPadding={0}
|
||||
cellSpacing={0}
|
||||
width="100%"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="inner-table6-td7">등록번호</td>
|
||||
<td
|
||||
className="inner-table6-td8"
|
||||
colSpan={ 3 }
|
||||
>{ recipientInfo?.businessRegistrationNumber }</td>
|
||||
<td className="header-cell-bordered w-56 font-base">등록번호</td>
|
||||
<td
|
||||
className="p-cell-5 border-bottom-1 font-base text-xs-dark text-left"
|
||||
colSpan={3}
|
||||
> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table6-td7">상호(법인명)</td>
|
||||
<td className="inner-table6-td9">{ recipientInfo?.companyName }</td>
|
||||
<td className="inner-table6-td10">성명</td>
|
||||
<td className="inner-table6-td8">{ recipientInfo?.ceoName }</td>
|
||||
<td className="header-cell-bordered w-56 font-base">상호(법인명)</td>
|
||||
<td className="p-cell-5 border-bottom-1 border-right-1 font-base text-xs-dark text-left">{ recipientInfo?.companyName } 주식회사</td>
|
||||
<td className="header-cell-bordered w-38 font-base">성명</td>
|
||||
<td className="p-cell-5 border-bottom-1 font-base text-xs-dark text-left">{ recipientInfo?.ceoName }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table6-td7">사업장 주소</td>
|
||||
<td className="header-cell-bordered w-56 font-base">사업장 주소</td>
|
||||
<td
|
||||
className="inner-table6-td8"
|
||||
colSpan={ 3 }
|
||||
className="p-cell-5 border-bottom-1 font-base text-xs-dark text-left"
|
||||
colSpan={3}
|
||||
>{ recipientInfo?.address }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table6-td7-1">업태</td>
|
||||
<td className="inner-table6-td9-1">{ recipientInfo?.businessType }</td>
|
||||
<td className="inner-table6-td10-1">종목</td>
|
||||
<td className="inner-table6-td8-1">{ recipientInfo?.businessItem }</td>
|
||||
<td className="bg-gray w-56 p-cell-5 border-right-1 font-base text-xs-gray text-center">업태</td>
|
||||
<td className="p-cell-5 border-right-1 font-base text-xs-dark text-left">{ recipientInfo?.businessType }</td>
|
||||
<td className="bg-gray w-38 p-cell-5 border-right-1 font-base text-xs-gray text-center">종목</td>
|
||||
<td className="p-cell-5 font-base text-xs-dark text-left">{ recipientInfo?.businessItem }</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -371,38 +407,44 @@ export const TaxInvoiceSample = ({
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table4-td2">
|
||||
<td className="p-content">
|
||||
<table
|
||||
className="inner-table8"
|
||||
role="presentation"
|
||||
cellPadding={0}
|
||||
cellSpacing={0}
|
||||
className="border-bottom-2 border-left-2 border-right-2 w-full"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="inner-table8-td1">
|
||||
<td className="w-90 v-top p-0">
|
||||
<table
|
||||
className="inner-table9"
|
||||
role="presentation"
|
||||
cellPadding={0}
|
||||
cellSpacing={0}
|
||||
className="w-90"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="inner-table9-td1">작성</td>
|
||||
<td className="p-cell-5 bg-gray border-right-1 border-bottom-1 font-base text-xs-gray text-center">작성</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ padding: 0 }}>
|
||||
<td className="p-0">
|
||||
<table
|
||||
className="inner-table9"
|
||||
role="presentation"
|
||||
cellPadding={0}
|
||||
cellSpacing={0}
|
||||
width="90"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="inner-table9-td2">년</td>
|
||||
<td className="inner-table9-td2">월</td>
|
||||
<td className="inner-table9-td2">일</td>
|
||||
<td className="w-30 p-cell-5 border-right-1 border-bottom-1 font-base text-xs-gray text-center">년</td>
|
||||
<td className="w-30 p-cell-5 border-right-1 border-bottom-1 font-base text-xs-gray text-center">월</td>
|
||||
<td className="w-30 p-cell-5 border-right-1 border-bottom-1 font-base text-xs-gray text-center">일</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table9-td2-1">{ (!!issueDate)? moment(issueDate).format('YYYY'): returnNbsp() }</td>
|
||||
<td className="inner-table9-td2-1">{ (!!issueDate)? moment(issueDate).format('MM'): returnNbsp() }</td>
|
||||
<td className="inner-table9-td2-1">{ (!!issueDate)? moment(issueDate).format('DD'): returnNbsp() }</td>
|
||||
<td className="w-30 p-cell-5 border-right-1 font-base text-xs-dark text-center">{ (!!issueDate)? moment(issueDate).format('YYYY'): returnNbsp() }</td>
|
||||
<td className="w-30 p-cell-5 border-right-1 font-base text-xs-dark text-center">{ (!!issueDate)? moment(issueDate).format('MM'): returnNbsp() }</td>
|
||||
<td className="w-30 p-cell-5 border-right-1 font-base text-xs-dark text-center">{ (!!issueDate)? moment(issueDate).format('DD'): returnNbsp() }</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -411,34 +453,38 @@ export const TaxInvoiceSample = ({
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<td className="inner-table9-td3">
|
||||
<td className="w-214 v-top p-0">
|
||||
<table
|
||||
className="inner-table10"
|
||||
role="presentation"
|
||||
cellPadding={0}
|
||||
cellSpacing={0}
|
||||
className="w-214"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="inner-table9-td1">공급가액</td>
|
||||
<td className="p-cell-5 bg-gray border-bottom-1 border-right-1 font-base text-xs-gray text-center">공급가액</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ padding: 0 }}>
|
||||
<td className="p-0">
|
||||
<table
|
||||
className="inner-table10"
|
||||
role="presentation"
|
||||
cellPadding="0"
|
||||
cellSpacing="0"
|
||||
width="214"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="inner-table10-td1">백</td>
|
||||
<td className="inner-table10-td1">십</td>
|
||||
<td className="inner-table10-td1">억</td>
|
||||
<td className="inner-table10-td1">천</td>
|
||||
<td className="inner-table10-td1">백</td>
|
||||
<td className="inner-table10-td1">십</td>
|
||||
<td className="inner-table10-td1">만</td>
|
||||
<td className="inner-table10-td1">천</td>
|
||||
<td className="inner-table10-td1">백</td>
|
||||
<td className="inner-table10-td1">십</td>
|
||||
<td className="inner-table10-td1">일</td>
|
||||
<td className="w-19 p-cell-5 border-right-1 border-bottom-1 font-base text-xs-gray text-center">백</td>
|
||||
<td className="w-19 p-cell-5 border-right-1 border-bottom-1 font-base text-xs-gray text-center">십</td>
|
||||
<td className="w-19 p-cell-5 border-right-1 border-bottom-1 font-base text-xs-gray text-center">억</td>
|
||||
<td className="w-19 p-cell-5 border-right-1 border-bottom-1 font-base text-xs-gray text-center">천</td>
|
||||
<td className="w-19 p-cell-5 border-right-1 border-bottom-1 font-base text-xs-gray text-center">백</td>
|
||||
<td className="w-19 p-cell-5 border-right-1 border-bottom-1 font-base text-xs-gray text-center">십</td>
|
||||
<td className="w-19 p-cell-5 border-right-1 border-bottom-1 font-base text-xs-gray text-center">만</td>
|
||||
<td className="w-19 p-cell-5 border-right-1 border-bottom-1 font-base text-xs-gray text-center">천</td>
|
||||
<td className="w-19 p-cell-5 border-right-1 border-bottom-1 font-base text-xs-gray text-center">백</td>
|
||||
<td className="w-19 p-cell-5 border-right-1 border-bottom-1 font-base text-xs-gray text-center">십</td>
|
||||
<td className="w-19 p-cell-5 border-bottom-1 border-right-1 font-base text-xs-gray text-center">일</td>
|
||||
</tr>
|
||||
<tr>
|
||||
{ showNewSupplyAmount() }
|
||||
@@ -450,37 +496,41 @@ export const TaxInvoiceSample = ({
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<td className="inner-table9-td3">
|
||||
<td className="w-214 v-top p-0">
|
||||
<table
|
||||
className="inner-table10"
|
||||
role="presentation"
|
||||
cellPadding={0}
|
||||
cellSpacing={0}
|
||||
className="w-214"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="inner-table9-td1">세액</td>
|
||||
<td className="p-cell-5 bg-gray border-bottom-1 border-right-1 font-base text-xs-gray text-center">세액</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ padding:0 }}>
|
||||
<table
|
||||
className="inner-table10"
|
||||
role="presentation"
|
||||
<td className="p-0">
|
||||
<table
|
||||
role="presentation"
|
||||
cellPadding={0}
|
||||
cellSpacing={0}
|
||||
width="214"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="inner-table10-td1">십</td>
|
||||
<td className="inner-table10-td1">억</td>
|
||||
<td className="inner-table10-td1">천</td>
|
||||
<td className="inner-table10-td1">백</td>
|
||||
<td className="inner-table10-td1">십</td>
|
||||
<td className="inner-table10-td1">만</td>
|
||||
<td className="inner-table10-td1">천</td>
|
||||
<td className="inner-table10-td1">백</td>
|
||||
<td className="inner-table10-td1">십</td>
|
||||
<td className="inner-table10-td1">일</td>
|
||||
</tr>
|
||||
<tr>
|
||||
{ showNewTaxAmount() }
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="w-19 p-cell-5 border-right-1 border-bottom-1 font-base text-xs-gray text-center">십</td>
|
||||
<td className="w-19 p-cell-5 border-right-1 border-bottom-1 font-base text-xs-gray text-center">억</td>
|
||||
<td className="w-19 p-cell-5 border-right-1 border-bottom-1 font-base text-xs-gray text-center">천</td>
|
||||
<td className="w-19 p-cell-5 border-right-1 border-bottom-1 font-base text-xs-gray text-center">백</td>
|
||||
<td className="w-19 p-cell-5 border-right-1 border-bottom-1 font-base text-xs-gray text-center">십</td>
|
||||
<td className="w-19 p-cell-5 border-right-1 border-bottom-1 font-base text-xs-gray text-center">만</td>
|
||||
<td className="w-19 p-cell-5 border-right-1 border-bottom-1 font-base text-xs-gray text-center">천</td>
|
||||
<td className="w-19 p-cell-5 border-right-1 border-bottom-1 font-base text-xs-gray text-center">백</td>
|
||||
<td className="w-19 p-cell-5 border-right-1 border-bottom-1 font-base text-xs-gray text-center">십</td>
|
||||
<td className="w-19 p-cell-5 border-right-1 border-bottom-1 font-base text-xs-gray text-center">일</td>
|
||||
</tr>
|
||||
<tr>
|
||||
{ showNewTaxAmount() }
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
@@ -488,17 +538,25 @@ export const TaxInvoiceSample = ({
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<td className="inner-table9-td4">
|
||||
<td
|
||||
className="w-102 v-top p-0"
|
||||
style={{borderLeft:0}}
|
||||
>
|
||||
<table
|
||||
role="presentation"
|
||||
className="inner-table11"
|
||||
cellPadding={0}
|
||||
cellSpacing={0}
|
||||
className="w-102"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="inner-table11-td1">수정사유</td>
|
||||
<td className="p-cell-5 bg-gray border-bottom-1 font-base text-xs-gray text-center">수정사유</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table11-td2"> </td>
|
||||
<td
|
||||
className="p-cell-5 font-base text-xs-dark text-left"
|
||||
style={{borderRight:0, borderBottom:0, borderLeft:0}}
|
||||
> </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -509,105 +567,114 @@ export const TaxInvoiceSample = ({
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table4-td2">
|
||||
<td className="p-content">
|
||||
<table
|
||||
role="presentation"
|
||||
className="inner-table12"
|
||||
cellPadding={0}
|
||||
cellSpacing={0}
|
||||
className="bottom-section-border w-full"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="inner-table12-td1">
|
||||
<table className="inner-table13">
|
||||
<td className="w-40 p-0 v-top border-right-1">
|
||||
<table
|
||||
role="presentation"
|
||||
cellPadding={0}
|
||||
cellSpacing={0}
|
||||
className="w-40"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="inner-table13-td1">비고</td>
|
||||
<td className="bg-gray p-cell-5 border-bottom-1 font-base text-xs-gray text-center">비고</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table13-td1">월/일</td>
|
||||
<td className="bg-gray p-cell-5 border-bottom-1 font-base text-xs-gray text-center">월/일</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table13-td2">{ (!!transactionDetails?.transactionPeriod)? moment(transactionDetails.transactionPeriod).format('MM/DD'): returnNbsp() }</td>
|
||||
<td className="p-cell-5 border-bottom-1 font-base text-xs-dark text-center">{ (!!transactionDetails?.transactionPeriod)? moment(transactionDetails.transactionPeriod).format('MM/DD'): returnNbsp() }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table13-td2"> </td>
|
||||
<td className="p-cell-5 border-bottom-1 font-base text-xs-dark text-center"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table13-td3"> </td>
|
||||
<td className="p-cell-5 font-base text-xs-dark text-center"> </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<td className="inner-table12-td2">
|
||||
<td className="w-full p-0 v-top">
|
||||
<table
|
||||
role="presentation"
|
||||
className="inner-table6"
|
||||
cellPadding={0}
|
||||
cellSpacing={0}
|
||||
className="w-full"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
colSpan={ 7 }
|
||||
className="inner-table11-td1"
|
||||
> 비고(프로퍼티 없음) </td>
|
||||
className="p-cell-5 border-bottom-1 font-base text-xs-gray text-center"
|
||||
colSpan={7}
|
||||
>{ remark || returnNbsp() }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table9-td1">품목</td>
|
||||
<td className="inner-table9-td1">규격</td>
|
||||
<td className="inner-table9-td1">수량</td>
|
||||
<td className="inner-table9-td1">단가</td>
|
||||
<td className="inner-table9-td1">공급가액</td>
|
||||
<td className="inner-table9-td1">세액</td>
|
||||
<td className="inner-table11-td1">비고</td>
|
||||
<td className="header-cell-bordered font-base">품목</td>
|
||||
<td className="header-cell-bordered font-base">규격</td>
|
||||
<td className="header-cell-bordered font-base">수량</td>
|
||||
<td className="header-cell-bordered font-base">단가</td>
|
||||
<td className="header-cell-bordered font-base">공급가액</td>
|
||||
<td className="header-cell-bordered font-base">세액</td>
|
||||
<td className="p-cell-5 border-bottom-1 bg-gray font-base text-xs-gray text-center">비고</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table6-td9">{ transactionDetails?.itemName || returnNbsp() }</td>
|
||||
<td className="inner-table6-td9">{ transactionDetails?.specification || returnNbsp() }</td>
|
||||
<td className="inner-table6-td13">
|
||||
<td className="p-cell-5 border-bottom-1 border-right-1 font-base text-xs-dark text-left">{ transactionDetails?.itemName || returnNbsp() }</td>
|
||||
<td className="p-cell-5 border-bottom-1 border-right-1 font-base text-xs-dark text-left">{ transactionDetails?.specification || returnNbsp() }</td>
|
||||
<td className="p-cell-5 border-bottom-1 border-right-1 font-base text-xs-dark text-center">
|
||||
<NumericFormat
|
||||
value={ transactionDetails?.quantity || 0 }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat>
|
||||
</td>
|
||||
<td className="inner-table6-td14">
|
||||
<td className="p-cell-5 border-bottom-1 border-right-1 font-base text-xs-dark text-right">
|
||||
<NumericFormat
|
||||
value={ transactionDetails?.unitPrice || 0 }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat>
|
||||
</td>
|
||||
<td className="inner-table6-td14">
|
||||
<td className="p-cell-5 border-bottom-1 border-right-1 font-base text-xs-dark text-right">
|
||||
<NumericFormat
|
||||
value={ transactionDetails?.supplyAmount || 0 }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat>
|
||||
</td>
|
||||
<td className="inner-table6-td14">
|
||||
<td className="p-cell-5 border-bottom-1 border-right-1 font-base text-xs-dark text-right">
|
||||
<NumericFormat
|
||||
value={ transactionDetails?.taxAmount || 0 }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat>
|
||||
</td>
|
||||
<td className="inner-table6-td15">{ transactionDetails?.remarks || returnNbsp() }</td>
|
||||
<td className="p-cell-5 border-bottom-1 font-base text-xs-dark text-left">{ transactionDetails?.remarks || returnNbsp() }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table6-td9"> </td>
|
||||
<td className="inner-table6-td9"> </td>
|
||||
<td className="inner-table6-td13"> </td>
|
||||
<td className="inner-table6-td14"> </td>
|
||||
<td className="inner-table6-td14"> </td>
|
||||
<td className="inner-table6-td14"> </td>
|
||||
<td className="inner-table6-td15"> </td>
|
||||
<td className="p-cell-5 border-bottom-1 border-right-1 font-base text-xs-dark text-left"> </td>
|
||||
<td className="p-cell-5 border-bottom-1 border-right-1 font-base text-xs-dark text-left"> </td>
|
||||
<td className="p-cell-5 border-bottom-1 border-right-1 font-base text-xs-dark text-center"> </td>
|
||||
<td className="p-cell-5 border-bottom-1 border-right-1 font-base text-xs-dark text-right"> </td>
|
||||
<td className="p-cell-5 border-bottom-1 border-right-1 font-base text-xs-dark text-right"> </td>
|
||||
<td className="p-cell-5 border-bottom-1 border-right-1 font-base text-xs-dark text-right"> </td>
|
||||
<td className="p-cell-5 border-bottom-1 font-base text-xs-dark text-left"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table6-td9-1"> </td>
|
||||
<td className="inner-table6-td9-1"> </td>
|
||||
<td className="inner-table6-td13-1"> </td>
|
||||
<td className="inner-table6-td14-1"> </td>
|
||||
<td className="inner-table6-td14-1"> </td>
|
||||
<td className="inner-table6-td14-1"> </td>
|
||||
<td className="inner-table6-td15-1"> </td>
|
||||
<td className="p-cell-5 border-right-1 font-base text-xs-dark text-left"> </td>
|
||||
<td className="p-cell-5 border-right-1 font-base text-xs-dark text-left"> </td>
|
||||
<td className="p-cell-5 border-right-1 font-base text-xs-dark text-center"> </td>
|
||||
<td className="p-cell-5 border-right-1 font-base text-xs-dark text-right"> </td>
|
||||
<td className="p-cell-5 border-right-1 font-base text-xs-dark text-right"> </td>
|
||||
<td className="p-cell-5 border-right-1 font-base text-xs-dark text-right"> </td>
|
||||
<td className="p-cell-5 font-base text-xs-dark text-left"> </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -620,71 +687,100 @@ export const TaxInvoiceSample = ({
|
||||
<tr>
|
||||
<td className="table_wrap">
|
||||
<table
|
||||
className="inner-table6"
|
||||
role="presentation"
|
||||
cellPadding={0}
|
||||
cellSpacing={0}
|
||||
className="w-full"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="inner-table4-td2">
|
||||
<td className="p-content">
|
||||
<table
|
||||
className="inner-table15"
|
||||
role="presentation"
|
||||
cellPadding={0}
|
||||
cellSpacing={0}
|
||||
className="final-section-border w-full"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="inner-table15-td1">
|
||||
<td
|
||||
className="p-0 v-top border-right-1"
|
||||
style={{width:'463px'}}
|
||||
>
|
||||
<table
|
||||
className="inner-table6"
|
||||
role="presentation"
|
||||
cellPadding={0}
|
||||
cellSpacing={0}
|
||||
width="100%"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="inner-table15-td2">합계금액</td>
|
||||
<td className="inner-table15-td2">현금</td>
|
||||
<td className="inner-table15-td2">수표</td>
|
||||
<td className="inner-table15-td2">어음</td>
|
||||
<td className="inner-table15-td4">외상미수금</td>
|
||||
<td className="header-cell-bordered font-base">합계금액</td>
|
||||
<td className="header-cell-bordered font-base">현금</td>
|
||||
<td className="header-cell-bordered font-base">수표</td>
|
||||
<td className="header-cell-bordered font-base">어음</td>
|
||||
<td className="p-cell-5 border-bottom-1 bg-gray font-base text-xs-gray text-center">외상미수금</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table15-td3">
|
||||
<NumericFormat
|
||||
value={ totalAmount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat>
|
||||
<td className="p-cell-5 border-right-1 font-base text-xs-dark text-right">
|
||||
{ totalAmount ?
|
||||
<NumericFormat
|
||||
value={ totalAmount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat>
|
||||
: returnNbsp()
|
||||
}
|
||||
</td>
|
||||
<td className="inner-table15-td3">
|
||||
<NumericFormat
|
||||
value={ 0 }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat>
|
||||
<td className="p-cell-5 border-right-1 font-base text-xs-dark text-right">
|
||||
{ paymentInfo?.cash ?
|
||||
<NumericFormat
|
||||
value={ paymentInfo?.cash }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat>
|
||||
: returnNbsp()
|
||||
}
|
||||
</td>
|
||||
<td className="inner-table15-td3">
|
||||
<NumericFormat
|
||||
value={ 0 }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat>
|
||||
<td className="p-cell-5 border-right-1 font-base text-xs-dark text-right">
|
||||
{ paymentInfo?.check ?
|
||||
<NumericFormat
|
||||
value={ paymentInfo?.check }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat>
|
||||
: returnNbsp()
|
||||
}
|
||||
</td>
|
||||
<td className="inner-table15-td3">
|
||||
<NumericFormat
|
||||
value={ 0 }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat>
|
||||
<td className="p-cell-5 border-right-1 font-base text-xs-dark text-right">
|
||||
{ paymentInfo?.promissoryNote ?
|
||||
<NumericFormat
|
||||
value={ paymentInfo?.promissoryNote }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat>
|
||||
: returnNbsp()
|
||||
}
|
||||
</td>
|
||||
<td className="p-cell-5 font-base text-xs-dark text-right">
|
||||
{ paymentInfo?.accountsReceivable ?
|
||||
<NumericFormat
|
||||
value={ paymentInfo?.accountsReceivable }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat>
|
||||
: returnNbsp()
|
||||
}
|
||||
</td>
|
||||
<td className="inner-table15-td5"><NumericFormat
|
||||
value={ 0 }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<td className="inner-table15-td6">
|
||||
<span className="inner-table15-td7">이금액을 청구함</span>
|
||||
<td
|
||||
className="w-157 v-middle text-center"
|
||||
style={{padding:'2px 0'}}
|
||||
>
|
||||
<span className="font-base text-block">이금액을 청구함</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -700,15 +796,17 @@ export const TaxInvoiceSample = ({
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="inner-table4-td4">
|
||||
<td style={{padding: '20px 0 20px 0'}}>
|
||||
<table
|
||||
className="inner-table14"
|
||||
role="presentation"
|
||||
role="presentation"
|
||||
cellPadding={0}
|
||||
cellSpacing={0}
|
||||
width='100%'
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
className="inner-table4-td2"
|
||||
className="p-content"
|
||||
style={{ verticalAlign: 'top'}}
|
||||
>
|
||||
<img
|
||||
|
||||
@@ -130,13 +130,17 @@ export interface VatReturnTaxInvoiceParams {
|
||||
taxInvoiceNumber: string;
|
||||
}
|
||||
export interface VatReturnTaxInvoiceResponse {
|
||||
managementNumber?: string | number | null;
|
||||
approvalNumber?: string | number | null;
|
||||
supplierInfo?: SupplierInfo;
|
||||
recipientInfo?: RecipientInfo;
|
||||
issueDate?: string;
|
||||
supplyAmount?: number;
|
||||
taxAmount?: number;
|
||||
totalAmount?: number;
|
||||
remark?: string | null;
|
||||
transactionDetails?: TransactionDetails;
|
||||
paymentInfo?: PaymentInfo;
|
||||
};
|
||||
|
||||
export interface SupplierInfo {
|
||||
@@ -166,6 +170,12 @@ export interface TransactionDetails {
|
||||
taxAmount: number;
|
||||
remarks: string;
|
||||
};
|
||||
export interface PaymentInfo {
|
||||
cash?: number | null;
|
||||
check?: number | null;
|
||||
promissoryNote?: number | null;
|
||||
accountsReceivable?: number | null;
|
||||
};
|
||||
export interface VatReturnDownloadExcelParams {
|
||||
email: string;
|
||||
mid: string;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import moment from 'moment';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { RecipientInfo, SupplierInfo, TransactionDetails, VatReturnDetailResponse, VatReturnTaxInvoiceParams, VatReturnTaxInvoiceResponse, VatReturnTaxInvoiceSendEmailParams, VatReturnTaxInvoiceSendEmailResponse } from '../../model/types';
|
||||
import { PaymentInfo, RecipientInfo, SupplierInfo, TransactionDetails, VatReturnDetailResponse, VatReturnTaxInvoiceParams, VatReturnTaxInvoiceResponse, VatReturnTaxInvoiceSendEmailParams, VatReturnTaxInvoiceSendEmailResponse } from '../../model/types';
|
||||
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
|
||||
import SlideDown from 'react-slidedown';
|
||||
import 'react-slidedown/lib/slidedown.css';
|
||||
@@ -26,13 +26,17 @@ export const AmountSection = ({
|
||||
|
||||
const [taxInvoiceSampleOn, setTaxInvoiceSampleOn] = useState<boolean>(false);
|
||||
|
||||
const [managementNumber, setManagementNumber] = useState<string | number | null>();
|
||||
const [approvalNumber, setApprovalNumber] = useState<string | number | null>();
|
||||
const [supplierInfo, setSupplierInfo] = useState<SupplierInfo>();
|
||||
const [recipientInfo, setRecipientInfo] = useState<RecipientInfo>();
|
||||
const [issueDate, setIssueDate] = useState<string>();
|
||||
const [supplyAmount, setSupplyAmount] = useState<number>();
|
||||
const [taxAmount, setTaxAmount] = useState<number>();
|
||||
const [totalAmount, setTotalAmount] = useState<number>();
|
||||
const [remark, setRemark] = useState<string | null>();
|
||||
const [transactionDetails, setTransactionDetails] = useState<TransactionDetails>();
|
||||
const [paymentInfo, setPaymentInfo] = useState<PaymentInfo>();
|
||||
|
||||
const { mutateAsync: vatReturnTaxInvoice } = useVatReturnTaxInvoiceMutation();
|
||||
const { mutateAsync: vatReturnTaxInvoiceSendEmail } = useVatReturnTaxInvoiceSendEmailMutation();
|
||||
@@ -72,13 +76,17 @@ export const AmountSection = ({
|
||||
};
|
||||
vatReturnTaxInvoice(params).then((rs: VatReturnTaxInvoiceResponse) => {
|
||||
|
||||
setManagementNumber(rs?.managementNumber);
|
||||
setApprovalNumber(rs?.approvalNumber);
|
||||
setSupplierInfo(rs?.supplierInfo);
|
||||
setRecipientInfo(rs?.recipientInfo);
|
||||
setIssueDate(rs?.issueDate);
|
||||
setSupplyAmount(rs?.supplyAmount);
|
||||
setTaxAmount(rs?.taxAmount);
|
||||
setTotalAmount(rs?.totalAmount);
|
||||
setRemark(rs?.remark);
|
||||
setTransactionDetails(rs?.transactionDetails);
|
||||
setPaymentInfo(rs?.paymentInfo);
|
||||
|
||||
setTaxInvoiceSampleOn(true);
|
||||
});
|
||||
@@ -155,13 +163,17 @@ export const AmountSection = ({
|
||||
<TaxInvoiceSample
|
||||
taxInvoiceSampleOn={ taxInvoiceSampleOn }
|
||||
setTaxInvoiceSampleOn={ setTaxInvoiceSampleOn }
|
||||
managementNumber={ managementNumber }
|
||||
approvalNumber={ approvalNumber }
|
||||
supplierInfo={ supplierInfo }
|
||||
recipientInfo={ recipientInfo }
|
||||
issueDate={ issueDate }
|
||||
supplyAmount={ supplyAmount }
|
||||
taxAmount={ taxAmount }
|
||||
totalAmount={ totalAmount }
|
||||
remark={ remark }
|
||||
transactionDetails={ transactionDetails }
|
||||
paymentInfo={ paymentInfo }
|
||||
></TaxInvoiceSample>
|
||||
}
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user