From 3d0e43dbf875854e5a9d1a285f7c1dfc0d6b98b0 Mon Sep 17 00:00:00 2001
From: Aji Kamaludin <aji19kamaludin@gmail.com>
Date: Sun, 9 Jan 2022 11:52:12 +0700
Subject: [PATCH] update subtotal on print

---
 public/js/app.js                     | 18 ++++++++++++------
 resources/js/Pages/Payrolls/Print.js | 25 ++++++++++++++++---------
 resources/views/payroll.blade.php    | 22 ++++++++++++++--------
 3 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/public/js/app.js b/public/js/app.js
index b3c945b..3490c86 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -10269,7 +10269,7 @@ var Print = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.forwardRef(function
           children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("tr", {
             className: "text-center border",
             children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("th", {
-              colSpan: 4,
+              colSpan: 5,
               children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div", {
                 className: "flex text-md justify-center items-center font-bold text-4xl py-4",
                 children: "GAJIAN KONVEKSI"
@@ -10286,6 +10286,7 @@ var Print = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.forwardRef(function
             }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
               children: "Nomer Telpon"
             }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
+              colSpan: 2,
               children: employee === null || employee === void 0 ? void 0 : employee.whatsapp
             })]
           }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("tr", {
@@ -10297,12 +10298,13 @@ var Print = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.forwardRef(function
             }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
               children: "Dibuat Oleh"
             }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
+              colSpan: 2,
               children: user === null || user === void 0 ? void 0 : user.name
             })]
           }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("tr", {
             className: "border text-center",
             children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("th", {
-              colSpan: 4,
+              colSpan: 5,
               children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div", {
                 className: "flex text-md justify-center items-center font-bold text-3xl py-4",
                 children: "Detail Gajian"
@@ -10319,6 +10321,8 @@ var Print = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.forwardRef(function
               children: "Harga"
             }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
               children: "Jumlah"
+            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
+              children: "Subtotal"
             })]
           }), items === null || items === void 0 ? void 0 : items.map(function (item, index) {
             return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("tr", {
@@ -10332,12 +10336,14 @@ var Print = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.forwardRef(function
                 children: (0,_utils__WEBPACK_IMPORTED_MODULE_1__.formatIDR)(item === null || item === void 0 ? void 0 : item.price)
               }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
                 children: (0,_utils__WEBPACK_IMPORTED_MODULE_1__.formatIDR)(item === null || item === void 0 ? void 0 : item.quantity)
+              }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
+                children: (0,_utils__WEBPACK_IMPORTED_MODULE_1__.formatIDR)((item === null || item === void 0 ? void 0 : item.quantity) * (item === null || item === void 0 ? void 0 : item.price))
               })]
             }, index);
           }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("tr", {
             className: "border",
             children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
-              colSpan: 3,
+              colSpan: 4,
               className: "text-right",
               children: "Total"
             }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
@@ -10346,7 +10352,7 @@ var Print = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.forwardRef(function
           }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("tr", {
             className: "border",
             children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
-              colSpan: 3,
+              colSpan: 4,
               className: "text-right",
               children: "Potongan/Pinjaman"
             }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
@@ -10355,7 +10361,7 @@ var Print = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.forwardRef(function
           }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("tr", {
             className: "border",
             children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
-              colSpan: 3,
+              colSpan: 4,
               className: "text-right",
               children: "Bonus"
             }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
@@ -10364,7 +10370,7 @@ var Print = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.forwardRef(function
           }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("tr", {
             className: "border",
             children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
-              colSpan: 3,
+              colSpan: 4,
               className: "text-right",
               children: "Total Diterima"
             }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
diff --git a/resources/js/Pages/Payrolls/Print.js b/resources/js/Pages/Payrolls/Print.js
index 3234a44..9626c1c 100644
--- a/resources/js/Pages/Payrolls/Print.js
+++ b/resources/js/Pages/Payrolls/Print.js
@@ -14,10 +14,13 @@ const Print = React.forwardRef((props, ref) => {
     return (
         <>
             <div ref={ref} className="p-4">
-                <table className="border-collapse border border-black w-full" border="1">
+                <table
+                    className="border-collapse border border-black w-full"
+                    border="1"
+                >
                     <thead>
                         <tr className="text-center border">
-                            <th colSpan={4}>
+                            <th colSpan={5}>
                                 <div className="flex text-md justify-center items-center font-bold text-4xl py-4">
                                     GAJIAN KONVEKSI
                                 </div>
@@ -29,16 +32,16 @@ const Print = React.forwardRef((props, ref) => {
                             <Td>Nama Tukang</Td>
                             <Td>{employee?.name}</Td>
                             <Td>Nomer Telpon</Td>
-                            <Td>{employee?.whatsapp}</Td>
+                            <Td colSpan={2}>{employee?.whatsapp}</Td>
                         </tr>
                         <tr className="border">
                             <Td>Tanggal Pembuatan</Td>
                             <Td>{formatDate(date)}</Td>
                             <Td>Dibuat Oleh</Td>
-                            <Td>{user?.name}</Td>
+                            <Td colSpan={2}>{user?.name}</Td>
                         </tr>
                         <tr className="border text-center">
-                            <th colSpan={4}>
+                            <th colSpan={5}>
                                 <div className="flex text-md justify-center items-center font-bold text-3xl py-4">
                                     Detail Gajian
                                 </div>
@@ -49,6 +52,7 @@ const Print = React.forwardRef((props, ref) => {
                             <Td>Nama Barang</Td>
                             <Td>Harga</Td>
                             <Td>Jumlah</Td>
+                            <Td>Subtotal</Td>
                         </tr>
                         {items?.map((item, index) => (
                             <tr className="border" key={index}>
@@ -56,28 +60,31 @@ const Print = React.forwardRef((props, ref) => {
                                 <Td>{item?.name}</Td>
                                 <Td>{formatIDR(item?.price)}</Td>
                                 <Td>{formatIDR(item?.quantity)}</Td>
+                                <Td>
+                                    {formatIDR(item?.quantity * item?.price)}
+                                </Td>
                             </tr>
                         ))}
                         <tr className="border">
-                            <Td colSpan={3} className="text-right">
+                            <Td colSpan={4} className="text-right">
                                 Total
                             </Td>
                             <Td>{formatIDR(amount)}</Td>
                         </tr>
                         <tr className="border">
-                            <Td colSpan={3} className="text-right">
+                            <Td colSpan={4} className="text-right">
                                 Potongan/Pinjaman
                             </Td>
                             <Td>{formatIDR(cuts)}</Td>
                         </tr>
                         <tr className="border">
-                            <Td colSpan={3} className="text-right">
+                            <Td colSpan={4} className="text-right">
                                 Bonus
                             </Td>
                             <Td>{formatIDR(bonus)}</Td>
                         </tr>
                         <tr className="border">
-                            <Td colSpan={3} className="text-right">
+                            <Td colSpan={4} className="text-right">
                                 Total Diterima
                             </Td>
                             <Td className="font-bold">{formatIDR(total)}</Td>
diff --git a/resources/views/payroll.blade.php b/resources/views/payroll.blade.php
index 2cdc551..fbb5f03 100644
--- a/resources/views/payroll.blade.php
+++ b/resources/views/payroll.blade.php
@@ -75,7 +75,7 @@ function formatIDR($output) {
     <table class="border-collapse border border-gray-400 w-full" border="1">
         <thead>
             <tr class="text-center border">
-                <th colspan="4">
+                <th colspan="5">
                     <div class="flex text-md justify-center items-center font-bold text-4xl py-4">
                         GAJIAN KONVEKSI
                     </div>
@@ -93,7 +93,7 @@ function formatIDR($output) {
                 <td class="border p-2">
                     Nomer Telpon
                 </td>
-                <td class="border p-2">
+                <td class="border p-2" colspan="2">
                     {{ $payroll->employee->whatsapp }}
                 </td>
             </tr>
@@ -107,12 +107,12 @@ function formatIDR($output) {
                 <td class="border p-2">
                     Dibuat Oleh
                 </td>
-                <td class="border p-2">
+                <td class="border p-2" colspan="2">
                     {{ $user->name }}
                 </td>
             </tr>
             <tr class="border text-center">
-                <th colspan="4">
+                <th colspan="5">
                     <div class="flex text-md justify-center items-center font-bold text-3xl py-4">
                         Detail Gajian
                     </div>
@@ -131,6 +131,9 @@ function formatIDR($output) {
                 <td class="border p-2">
                     Jumlah
                 </td>
+                <td class="border p-2">
+                    Subtotal
+                </td>
             </tr>
             @foreach($payroll->items as $item)
             <tr class="border">
@@ -146,10 +149,13 @@ function formatIDR($output) {
                 <td class="border p-2">
                     {{ formatIDR($item->quantity) }}
                 </td>
+                <td class="border p-2">
+                    {{ formatIDR($item->price * $item->quantity) }}
+                </td>
             </tr>
             @endforeach
             <tr class="border">
-                <td class="border p-2 text-right" colspan="3">
+                <td class="border p-2 text-right" colspan="4">
                     Total
                 </td>
                 <td class="border p-2">
@@ -157,7 +163,7 @@ function formatIDR($output) {
                 </td>
             </tr>
             <tr class="border">
-                <td class="border p-2 text-right" colspan="3">
+                <td class="border p-2 text-right" colspan="4">
                     Potongan/Pinjaman
                 </td>
                 <td class="border p-2">
@@ -165,7 +171,7 @@ function formatIDR($output) {
                 </td>
             </tr>
             <tr class="border">
-                <td class="border p-2 text-right" colspan="3">
+                <td class="border p-2 text-right" colspan="4">
                     Bonus
                 </td>
                 <td class="border p-2">
@@ -173,7 +179,7 @@ function formatIDR($output) {
                 </td>
             </tr>
             <tr class="border">
-                <td class="border p-2 text-right" colspan="3">
+                <td class="border p-2 text-right" colspan="4">
                     Total Diterima
                 </td>
                 <td class="border p-2 font-bold">