print nota

app/Http/Controllers/UserController.php

@@ -35,7 +35,7 @@ class UserController extends Controller
     {
         $request->validate([
             'name' => 'required|string',
-            'email' => 'required|email',
+            'email' => 'required|email|unique:users,email',
             'password' => 'required|string|min:6',
         ]);
 
@@ -55,7 +55,7 @@ class UserController extends Controller
     {
         $request->validate([
             'name' => 'required|string',
-            'email' => 'required|email',
+            'email' => 'required|email|unique:users,email,'.$user->id,
             'password' => 'nullable|string|min:6',
         ]);
 

package-lock.json

@@ -10,6 +10,7 @@
                 "qs": "^6.10.2",
                 "react-datepicker": "^4.5.0",
                 "react-number-format": "^4.9.0",
+                "react-to-print": "^2.14.3",
                 "react-toastify": "^8.1.0",
                 "react-use": "^17.3.1"
             },
@@ -8035,6 +8036,18 @@
                 "react": "^16.8.0 || ^17"
             }
         },
+        "node_modules/react-to-print": {
+            "version": "2.14.3",
+            "resolved": "https://registry.npmjs.org/react-to-print/-/react-to-print-2.14.3.tgz",
+            "integrity": "sha512-j0EAplQGcw4ujSLfUQoIhf1PgrSLrWRh4NSAiKZdWm6YNXMioHW56cGpbKEJkCpYN1E5g3tvFVHRADn0mTKGzg==",
+            "dependencies": {
+                "prop-types": "^15.8.0"
+            },
+            "peerDependencies": {
+                "react": "^15.0.0 || ^16.0.0 || ^17.0.0",
+                "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0"
+            }
+        },
         "node_modules/react-toastify": {
             "version": "8.1.0",
             "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-8.1.0.tgz",
@@ -16179,6 +16192,14 @@
                 "warning": "^4.0.2"
             }
         },
+        "react-to-print": {
+            "version": "2.14.3",
+            "resolved": "https://registry.npmjs.org/react-to-print/-/react-to-print-2.14.3.tgz",
+            "integrity": "sha512-j0EAplQGcw4ujSLfUQoIhf1PgrSLrWRh4NSAiKZdWm6YNXMioHW56cGpbKEJkCpYN1E5g3tvFVHRADn0mTKGzg==",
+            "requires": {
+                "prop-types": "^15.8.0"
+            }
+        },
         "react-toastify": {
             "version": "8.1.0",
             "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-8.1.0.tgz",

package.json

@@ -32,6 +32,7 @@
         "qs": "^6.10.2",
         "react-datepicker": "^4.5.0",
         "react-number-format": "^4.9.0",
+        "react-to-print": "^2.14.3",
         "react-toastify": "^8.1.0",
         "react-use": "^17.3.1"
     }

public/css/app.css

@@ -2837,9 +2837,6 @@ html {
 .w-4 {
   width: 1rem;
 }
-.w-1\/6 {
-  width: 16.666667%;
-}
 .max-w-xl {
   max-width: 36rem;
 }
@@ -2849,12 +2846,18 @@ html {
 .max-w-7xl {
   max-width: 80rem;
 }
+.max-w-sm {
+  max-width: 24rem;
+}
 .flex-1 {
   flex: 1 1 0%;
 }
 .shrink-0 {
   flex-shrink: 0;
 }
+.border-collapse {
+  border-collapse: collapse;
+}
 .origin-top {
   transform-origin: top;
 }

resources/js/Pages/Payrolls/Create.js

@@ -1,6 +1,7 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import DatePicker from 'react-datepicker'
 import NumberFormat from 'react-number-format'
+import ReactToPrint from 'react-to-print'
 import { Inertia } from '@inertiajs/inertia'
 import { usePrevious } from 'react-use'
 import { toast } from 'react-toastify'
@@ -11,6 +12,7 @@ import Pagination from '@/Components/Pagination'
 import CloseIcon from '@/Components/CloseIcon'
 import EmployeeSelectInput from '@/Selects/EmployeeSelectInput'
 import { formatIDR } from '@/utils'
+import Print from '@/Pages/Payrolls/Print'
 
 export default function Create(props) {
   const { data: products, links } = props.products
@@ -19,6 +21,7 @@ export default function Create(props) {
       date: new Date(),
       employee_id: null,
       employee_name: '',
+      employee: null,
       cuts: 0,
       bonus: 0,
       items: [],
@@ -29,11 +32,14 @@ export default function Create(props) {
   const [search, setSearch] = useState(_search)
   const preValue = usePrevious(search)
 
+  const componentToPrint = useRef()
+
   const handleSelectedEmployee = (employee) => {
     setData({
         ...data,
         employee_id: employee.id,
         employee_name: `${employee.name} - ${employee.whatsapp}`,
+        employee: employee,
     })
   }
 
@@ -316,17 +322,34 @@ export default function Create(props) {
                                   >
                                       Simpan
                                   </div>
-                                  <div
+                                  <ReactToPrint
-                                      className="btn btn-primary"
+                                      trigger={() => (
-                                      disabled={processing}
+                                          <div
-                                  >
+                                              className="btn btn-primary"
-                                      Cetak
+                                              disabled={processing}
-                                  </div>
+                                          >
+                                              Cetak
+                                          </div>
+                                      )}
+                                      content={() => componentToPrint.current}
+                                  />
                               </div>
                           </div>
                       </div>
                   </div>
               </div>
+              <div className="hidden">
+                  <Print 
+                    user={props.auth.user}
+                    date={data.date}
+                    employee={data.employee}
+                    items={data.items}
+                    amount={itemAmount}
+                    cuts={data.cuts}
+                    bonus={data.bonus}
+                    total={totalAmount}
+                    ref={componentToPrint} />
+              </div>
           </div>
       </Authenticated>
   )

resources/js/Pages/Payrolls/Edit.js

@@ -1,6 +1,7 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import DatePicker from 'react-datepicker'
 import NumberFormat from 'react-number-format'
+import ReactToPrint from 'react-to-print'
 import { Inertia } from '@inertiajs/inertia'
 import { usePrevious } from 'react-use'
 import { toast } from 'react-toastify'
@@ -11,6 +12,7 @@ import Pagination from '@/Components/Pagination'
 import CloseIcon from '@/Components/CloseIcon'
 import EmployeeSelectInput from '@/Selects/EmployeeSelectInput'
 import { formatIDR } from '@/utils'
+import Print from '@/Pages/Payrolls/Print'
 
 export default function Edit(props) {
     const { data: products, links } = props.products
@@ -19,14 +21,15 @@ export default function Edit(props) {
         date: new Date(payroll.date),
         employee_id: payroll.employee_id,
         employee_name: `${payroll.employee.name} - ${payroll.employee.whatsapp}`,
+        employee: payroll.employee,
         cuts: payroll.cuts,
         bonus: payroll.bonus,
-        items: payroll.items.map(item => {
+        items: payroll.items.map((item) => {
-          return {
+            return {
-            product_id: item.product_id,
+                product_id: item.product_id,
-            quantity: item.quantity,
+                quantity: item.quantity,
-            ...item.product,
+                ...item.product,
-          }
+            }
         }),
     })
 
@@ -35,11 +38,14 @@ export default function Edit(props) {
     const [search, setSearch] = useState(_search)
     const preValue = usePrevious(search)
 
+  const componentToPrint = useRef()
+
     const handleSelectedEmployee = (employee) => {
         setData({
             ...data,
             employee_id: employee.id,
             employee_name: `${employee.name} - ${employee.whatsapp}`,
+            employee: employee
         })
     }
 
@@ -336,17 +342,35 @@ export default function Edit(props) {
                                     >
                                         Simpan
                                     </div>
-                                    <div
+                                    <ReactToPrint
-                                        className="btn btn-primary"
+                                        trigger={() => (
-                                        disabled={processing}
+                                            <div
-                                    >
+                                                className="btn btn-primary"
-                                        Cetak
+                                                disabled={processing}
-                                    </div>
+                                            >
+                                                Cetak
+                                            </div>
+                                        )}
+                                        content={() => componentToPrint.current}
+                                    />
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
+                <div className="hidden">
+                    <Print
+                        user={props.auth.user}
+                        date={data.date}
+                        employee={data.employee}
+                        items={data.items}
+                        amount={itemAmount}
+                        cuts={data.cuts}
+                        bonus={data.bonus}
+                        total={totalAmount}
+                        ref={componentToPrint}
+                    />
+                </div>
             </div>
         </Authenticated>
     )

resources/js/Pages/Payrolls/Print.js

@@ -0,0 +1,94 @@
+import React from 'react'
+import { Head } from '@inertiajs/inertia-react'
+import { formatDate, formatIDR } from '@/utils'
+
+const Td = ({ children, colSpan, className }) => {
+  return (
+      <td className={`border p-2 ${className}`} colSpan={colSpan}>
+          {children}
+      </td>
+  )
+}
+
+const Print = React.forwardRef((props, ref) => {
+    const {user, date, employee, items, amount, cuts, bonus, total} = props
+    return (
+        <>
+            <Head title="Print" />
+            <div ref={ref} className="p-4">
+                <table className="border-collapse border border-gray-400 w-full">
+                    <thead>
+                        <tr className="text-center border">
+                            <th colSpan={4}>
+                                <div className="flex text-md justify-center items-center font-bold text-4xl py-4">
+                                    GAJIAN KONVEKSI
+                                </div>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr className="border">
+                            <Td>Nama Tukang</Td>
+                            <Td>{employee?.name}</Td>
+                            <Td>Nomer Telpon</Td>
+                            <Td>{employee?.whatsapp}</Td>
+                        </tr>
+                        <tr className="border">
+                            <Td>Tanggal Pembuatan</Td>
+                            <Td>{formatDate(date)}</Td>
+                            <Td>Dibuat Oleh</Td>
+                            <Td>{user?.name}</Td>
+                        </tr>
+                        <tr className="border text-center">
+                            <th colSpan={4}>
+                                <div className="flex text-md justify-center items-center font-bold text-3xl py-4">
+                                    Detail Gajian
+                                </div>
+                            </th>
+                        </tr>
+                        <tr className="border">
+                            <Td className="max-w-sm">#</Td>
+                            <Td>Nama Barang</Td>
+                            <Td>Harga</Td>
+                            <Td>Jumlah</Td>
+                        </tr>
+                        {items?.map((item, index) => (
+                            <tr className="border" key={index}>
+                                <Td className="max-w-sm">{index + 1}</Td>
+                                <Td>{item?.name}</Td>
+                                <Td>{formatIDR(item?.price)}</Td>
+                                <Td>{formatIDR(item?.quantity)}</Td>
+                            </tr>
+                        ))}
+                        <tr className="border">
+                            <Td colSpan={3} className="text-right">
+                                Total
+                            </Td>
+                            <Td>{formatIDR(amount)}</Td>
+                        </tr>
+                        <tr className="border">
+                            <Td colSpan={3} className="text-right">
+                                Potongan/Pinjaman
+                            </Td>
+                            <Td>{formatIDR(cuts)}</Td>
+                        </tr>
+                        <tr className="border">
+                            <Td colSpan={3} className="text-right">
+                                Bonus
+                            </Td>
+                            <Td>{formatIDR(bonus)}</Td>
+                        </tr>
+                        <tr className="border">
+                            <Td colSpan={3} className="text-right">
+                                Total Diterima
+                            </Td>
+                            <Td className="font-bold">{formatIDR(total)}</Td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    )
+})
+
+export default Print