From a2cb6b5a1b29e8b81098d006cf42118dcd227a94 Mon Sep 17 00:00:00 2001 From: Aji Kamaludin Date: Fri, 31 Dec 2021 15:56:57 +0700 Subject: [PATCH] print nota --- app/Http/Controllers/UserController.php | 4 +- package-lock.json | 21 + package.json | 1 + public/css/app.css | 9 +- public/js/app.js | 591 +++++++++++++++++------- resources/js/Pages/Payrolls/Create.js | 37 +- resources/js/Pages/Payrolls/Edit.js | 50 +- resources/js/Pages/Payrolls/Print.js | 94 ++++ 8 files changed, 604 insertions(+), 203 deletions(-) create mode 100644 resources/js/Pages/Payrolls/Print.js diff --git a/app/Http/Controllers/UserController.php b/app/Http/Controllers/UserController.php index a65bfcd..54cb112 100644 --- a/app/Http/Controllers/UserController.php +++ b/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', ]); diff --git a/package-lock.json b/package-lock.json index fc7273e..9f64f7f 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 674a157..9869f2d 100644 --- a/package.json +++ b/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" } diff --git a/public/css/app.css b/public/css/app.css index 7e0a9bc..b327812 100644 --- a/public/css/app.css +++ b/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; } diff --git a/public/js/app.js b/public/js/app.js index edfb56b..d7a4e3f 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -8813,19 +8813,22 @@ __webpack_require__.r(__webpack_exports__); /* harmony export */ "default": () => (/* binding */ Create) /* harmony export */ }); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js"); -/* harmony import */ var react_datepicker__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! react-datepicker */ "./node_modules/react-datepicker/dist/react-datepicker.min.js"); -/* harmony import */ var react_datepicker__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(react_datepicker__WEBPACK_IMPORTED_MODULE_12__); +/* harmony import */ var react_datepicker__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! react-datepicker */ "./node_modules/react-datepicker/dist/react-datepicker.min.js"); +/* harmony import */ var react_datepicker__WEBPACK_IMPORTED_MODULE_14___default = /*#__PURE__*/__webpack_require__.n(react_datepicker__WEBPACK_IMPORTED_MODULE_14__); /* harmony import */ var react_number_format__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-number-format */ "./node_modules/react-number-format/dist/react-number-format.es.js"); -/* harmony import */ var _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @inertiajs/inertia */ "./node_modules/@inertiajs/inertia/dist/index.js"); -/* harmony import */ var react_use__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! react-use */ "./node_modules/react-use/esm/usePrevious.js"); -/* harmony import */ var react_toastify__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-toastify */ "./node_modules/react-toastify/dist/react-toastify.esm.js"); -/* harmony import */ var _inertiajs_inertia_react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @inertiajs/inertia-react */ "./node_modules/@inertiajs/inertia-react/dist/index.js"); -/* harmony import */ var _Layouts_Authenticated__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/Layouts/Authenticated */ "./resources/js/Layouts/Authenticated.js"); -/* harmony import */ var _Components_Pagination__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @/Components/Pagination */ "./resources/js/Components/Pagination.js"); -/* harmony import */ var _Components_CloseIcon__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @/Components/CloseIcon */ "./resources/js/Components/CloseIcon.js"); -/* harmony import */ var _Selects_EmployeeSelectInput__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @/Selects/EmployeeSelectInput */ "./resources/js/Selects/EmployeeSelectInput.js"); -/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @/utils */ "./resources/js/utils.js"); -/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js"); +/* harmony import */ var react_to_print__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-to-print */ "./node_modules/react-to-print/lib/index.js"); +/* harmony import */ var react_to_print__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_to_print__WEBPACK_IMPORTED_MODULE_2__); +/* harmony import */ var _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @inertiajs/inertia */ "./node_modules/@inertiajs/inertia/dist/index.js"); +/* harmony import */ var react_use__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! react-use */ "./node_modules/react-use/esm/usePrevious.js"); +/* harmony import */ var react_toastify__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react-toastify */ "./node_modules/react-toastify/dist/react-toastify.esm.js"); +/* harmony import */ var _inertiajs_inertia_react__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @inertiajs/inertia-react */ "./node_modules/@inertiajs/inertia-react/dist/index.js"); +/* harmony import */ var _Layouts_Authenticated__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @/Layouts/Authenticated */ "./resources/js/Layouts/Authenticated.js"); +/* harmony import */ var _Components_Pagination__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @/Components/Pagination */ "./resources/js/Components/Pagination.js"); +/* harmony import */ var _Components_CloseIcon__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @/Components/CloseIcon */ "./resources/js/Components/CloseIcon.js"); +/* harmony import */ var _Selects_EmployeeSelectInput__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @/Selects/EmployeeSelectInput */ "./resources/js/Selects/EmployeeSelectInput.js"); +/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @/utils */ "./resources/js/utils.js"); +/* harmony import */ var _Pages_Payrolls_Print__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @/Pages/Payrolls/Print */ "./resources/js/Pages/Payrolls/Print.js"); +/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js"); function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } @@ -8858,6 +8861,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } + + function Create(props) { var _jsx2, _jsx3, _jsx4; @@ -8867,10 +8872,11 @@ function Create(props) { var _search = props._search, _page = props._page; - var _useForm = (0,_inertiajs_inertia_react__WEBPACK_IMPORTED_MODULE_4__.useForm)({ + var _useForm = (0,_inertiajs_inertia_react__WEBPACK_IMPORTED_MODULE_5__.useForm)({ date: new Date(), employee_id: null, employee_name: '', + employee: null, cuts: 0, bonus: 0, items: [] @@ -8891,12 +8897,14 @@ function Create(props) { search = _useState4[0], setSearch = _useState4[1]; - var preValue = (0,react_use__WEBPACK_IMPORTED_MODULE_11__["default"])(search); + var preValue = (0,react_use__WEBPACK_IMPORTED_MODULE_13__["default"])(search); + var componentToPrint = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(); var handleSelectedEmployee = function handleSelectedEmployee(employee) { setData(_objectSpread(_objectSpread({}, data), {}, { employee_id: employee.id, - employee_name: "".concat(employee.name, " - ").concat(employee.whatsapp) + employee_name: "".concat(employee.name, " - ").concat(employee.whatsapp), + employee: employee })); }; @@ -8948,7 +8956,7 @@ function Create(props) { post(route('payrolls.store'), { onSuccess: function onSuccess() { - return Promise.all([handleReset(), react_toastify__WEBPACK_IMPORTED_MODULE_3__.toast.success('The Data has been saved')]); + return Promise.all([handleReset(), react_toastify__WEBPACK_IMPORTED_MODULE_4__.toast.success('The Data has been saved')]); } }); }; @@ -8960,7 +8968,7 @@ function Create(props) { (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () { if (preValue) { setLoading(true); - _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_2__.Inertia.get(route(route().current()), { + _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_3__.Inertia.get(route(route().current()), { q: search, page: _page }, { @@ -8972,28 +8980,28 @@ function Create(props) { }); } }, [search]); - return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(_Layouts_Authenticated__WEBPACK_IMPORTED_MODULE_5__["default"], { + return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)(_Layouts_Authenticated__WEBPACK_IMPORTED_MODULE_6__["default"], { auth: props.auth, errors: props.errors, - header: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("h2", { + header: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("h2", { className: "font-semibold text-xl text-gray-800 leading-tight", children: "Gaji" }), - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_inertiajs_inertia_react__WEBPACK_IMPORTED_MODULE_4__.Head, { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_inertiajs_inertia_react__WEBPACK_IMPORTED_MODULE_5__.Head, { title: "Payrolls" - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("div", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", { className: "py-12", - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("div", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", { className: "flex flex-col md:flex-row w-full sm:px-6 lg:px-8 space-y-4 md:space-x-4 md:space-y-0", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("div", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", { className: "card bg-white w-full md:w-2/3", - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("div", { + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", { className: "p-4", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("div", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", { className: "flex flex-row justify-end mb-2", - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("div", { + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", { className: "form-control", - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("input", { + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("input", { type: "text", className: "input input-bordered", value: search, @@ -9003,35 +9011,35 @@ function Create(props) { placeholder: "Search" }) }) - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("div", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", { className: "grid grid-cols-4 gap-4 ".concat(loading && 'opacity-70'), children: products.map(function (product) { - return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("div", { + return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", { className: "rounded bg-white shadow-md", onClick: function onClick() { return addItem(product); }, - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("img", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("img", { src: product.photo_url, style: { height: '100px' } - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("div", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", { className: "p-4 flex flex-col justify-items-center items-center space-y-4", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("div", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", { className: "font-bold text-center", children: product.name - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("div", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", { className: "badge", - children: (0,_utils__WEBPACK_IMPORTED_MODULE_9__.formatIDR)(product.price) + children: (0,_utils__WEBPACK_IMPORTED_MODULE_10__.formatIDR)(product.price) })] })] }, product.id); }) - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("div", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", { className: "flex flex-col items-center", - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("div", { - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_Components_Pagination__WEBPACK_IMPORTED_MODULE_6__["default"], { + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", { + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_Components_Pagination__WEBPACK_IMPORTED_MODULE_7__["default"], { links: links, params: { q: search @@ -9040,12 +9048,12 @@ function Create(props) { }) })] }) - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("div", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", { className: "card bg-white w-full md:w-1/3", - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("div", { + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", { className: "flex flex-col p-2 mb-4", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("div", { - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)((react_datepicker__WEBPACK_IMPORTED_MODULE_12___default()), { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)((react_datepicker__WEBPACK_IMPORTED_MODULE_14___default()), { selected: data.date, onChange: function onChange(date) { return setData('date', date); @@ -9054,54 +9062,54 @@ function Create(props) { className: "input input-bordered ".concat(errors.date ? 'input-error' : ''), nextMonthButtonLabel: ">", previousMonthButtonLabel: "<" - }), errors.date && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("label", { + }), errors.date && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("label", { className: "label", - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("span", { + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("span", { className: "label-text-alt", children: errors.date }) })] - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("div", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", { className: "w-full", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_Selects_EmployeeSelectInput__WEBPACK_IMPORTED_MODULE_8__["default"], { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_Selects_EmployeeSelectInput__WEBPACK_IMPORTED_MODULE_9__["default"], { value: data.employee_name, onItemSelected: handleSelectedEmployee, invalid: errors.employee_id ? true : false - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("label", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("label", { className: "label", - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("span", { + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("span", { className: "label-text-alt", children: errors.employee_id }) })] - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("div", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", { className: "overflow-x-auto", style: { minHeight: '280px' }, - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("table", { + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("table", { className: "table w-full", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("thead", { - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("tr", { - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("th", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("thead", { + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("tr", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("th", { children: "Barang" - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("th", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("th", { children: "Qty" - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("th", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("th", { children: "Subtotal" - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("th", {})] + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("th", {})] }) - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("tbody", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("tbody", { children: data.items.map(function (item) { - return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("tr", { - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("td", { + return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("tr", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("td", { children: item.name - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("td", { - children: (0,_utils__WEBPACK_IMPORTED_MODULE_9__.formatIDR)(item.quantity) - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("td", { - children: (0,_utils__WEBPACK_IMPORTED_MODULE_9__.formatIDR)(item.quantity * item.price) - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("td", { - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_Components_CloseIcon__WEBPACK_IMPORTED_MODULE_7__["default"], { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("td", { + children: (0,_utils__WEBPACK_IMPORTED_MODULE_10__.formatIDR)(item.quantity) + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("td", { + children: (0,_utils__WEBPACK_IMPORTED_MODULE_10__.formatIDR)(item.quantity * item.price) + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("td", { + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_Components_CloseIcon__WEBPACK_IMPORTED_MODULE_8__["default"], { className: "btn btn-outline btn-sm px-0.5", onClick: function onClick() { return remoteItem(item); @@ -9112,15 +9120,15 @@ function Create(props) { }) })] }) - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("div", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", { className: "card-actions", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("div", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", { className: "form-control w-full", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("label", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("label", { className: "input-group w-full", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("span", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("span", { children: "Potongan" - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(react_number_format__WEBPACK_IMPORTED_MODULE_1__["default"], (_jsx2 = { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(react_number_format__WEBPACK_IMPORTED_MODULE_1__["default"], (_jsx2 = { thousandSeparator: true, className: "input input-bordered w-full text-right ".concat(errors.cuts ? 'input-error' : ''), value: data.cuts @@ -9128,20 +9136,20 @@ function Create(props) { var value = _ref.value; return setData('cuts', value); }), _defineProperty(_jsx2, "placeholder", "potongan"), _jsx2))] - }), errors.cuts && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("label", { + }), errors.cuts && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("label", { className: "label", - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("span", { + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("span", { className: "label-text-alt", children: errors.cuts }) })] - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("div", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", { className: "form-control w-full", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("label", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("label", { className: "input-group w-full", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("span", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("span", { children: "Bonus" - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(react_number_format__WEBPACK_IMPORTED_MODULE_1__["default"], (_jsx3 = { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(react_number_format__WEBPACK_IMPORTED_MODULE_1__["default"], (_jsx3 = { thousandSeparator: true, className: "input input-bordered w-full text-right ".concat(errors.bonus ? 'input-error' : ''), value: data.bonus @@ -9149,42 +9157,62 @@ function Create(props) { var value = _ref2.value; return setData('bonus', value); }), _defineProperty(_jsx3, "placeholder", "bonus"), _jsx3))] - }), errors.bonus && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("label", { + }), errors.bonus && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("label", { className: "label", - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("span", { + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("span", { className: "label-text-alt", children: errors.bonus }) })] - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("div", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", { className: "form-control w-full mt-2", - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("label", { + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("label", { className: "input-group w-full", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("span", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("span", { children: "Total" - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(react_number_format__WEBPACK_IMPORTED_MODULE_1__["default"], (_jsx4 = { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(react_number_format__WEBPACK_IMPORTED_MODULE_1__["default"], (_jsx4 = { thousandSeparator: true, className: "input input-bordered w-full text-right", value: totalAmount }, _defineProperty(_jsx4, "thousandSeparator", "."), _defineProperty(_jsx4, "decimalSeparator", ","), _defineProperty(_jsx4, "readOnly", true), _defineProperty(_jsx4, "placeholder", "total"), _jsx4))] }) - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("div", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", { className: "grid grid-cols-2 gap-2 w-full", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("div", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", { className: "btn btn-primary", disabled: processing, onClick: handleSubmit, children: "Simpan" - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("div", { - className: "btn btn-primary", - disabled: processing, - children: "Cetak" + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)((react_to_print__WEBPACK_IMPORTED_MODULE_2___default()), { + trigger: function trigger() { + return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", { + className: "btn btn-primary", + disabled: processing, + children: "Cetak" + }); + }, + content: function content() { + return componentToPrint.current; + } })] })] })] }) })] - }) + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", { + className: "hidden", + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_Pages_Payrolls_Print__WEBPACK_IMPORTED_MODULE_11__["default"], { + 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 + }) + })] })] }); } @@ -9203,19 +9231,22 @@ __webpack_require__.r(__webpack_exports__); /* harmony export */ "default": () => (/* binding */ Edit) /* harmony export */ }); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js"); -/* harmony import */ var react_datepicker__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! react-datepicker */ "./node_modules/react-datepicker/dist/react-datepicker.min.js"); -/* harmony import */ var react_datepicker__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(react_datepicker__WEBPACK_IMPORTED_MODULE_12__); +/* harmony import */ var react_datepicker__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! react-datepicker */ "./node_modules/react-datepicker/dist/react-datepicker.min.js"); +/* harmony import */ var react_datepicker__WEBPACK_IMPORTED_MODULE_14___default = /*#__PURE__*/__webpack_require__.n(react_datepicker__WEBPACK_IMPORTED_MODULE_14__); /* harmony import */ var react_number_format__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-number-format */ "./node_modules/react-number-format/dist/react-number-format.es.js"); -/* harmony import */ var _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @inertiajs/inertia */ "./node_modules/@inertiajs/inertia/dist/index.js"); -/* harmony import */ var react_use__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! react-use */ "./node_modules/react-use/esm/usePrevious.js"); -/* harmony import */ var react_toastify__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-toastify */ "./node_modules/react-toastify/dist/react-toastify.esm.js"); -/* harmony import */ var _inertiajs_inertia_react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @inertiajs/inertia-react */ "./node_modules/@inertiajs/inertia-react/dist/index.js"); -/* harmony import */ var _Layouts_Authenticated__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/Layouts/Authenticated */ "./resources/js/Layouts/Authenticated.js"); -/* harmony import */ var _Components_Pagination__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @/Components/Pagination */ "./resources/js/Components/Pagination.js"); -/* harmony import */ var _Components_CloseIcon__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @/Components/CloseIcon */ "./resources/js/Components/CloseIcon.js"); -/* harmony import */ var _Selects_EmployeeSelectInput__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @/Selects/EmployeeSelectInput */ "./resources/js/Selects/EmployeeSelectInput.js"); -/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @/utils */ "./resources/js/utils.js"); -/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js"); +/* harmony import */ var react_to_print__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-to-print */ "./node_modules/react-to-print/lib/index.js"); +/* harmony import */ var react_to_print__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_to_print__WEBPACK_IMPORTED_MODULE_2__); +/* harmony import */ var _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @inertiajs/inertia */ "./node_modules/@inertiajs/inertia/dist/index.js"); +/* harmony import */ var react_use__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! react-use */ "./node_modules/react-use/esm/usePrevious.js"); +/* harmony import */ var react_toastify__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react-toastify */ "./node_modules/react-toastify/dist/react-toastify.esm.js"); +/* harmony import */ var _inertiajs_inertia_react__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @inertiajs/inertia-react */ "./node_modules/@inertiajs/inertia-react/dist/index.js"); +/* harmony import */ var _Layouts_Authenticated__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @/Layouts/Authenticated */ "./resources/js/Layouts/Authenticated.js"); +/* harmony import */ var _Components_Pagination__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @/Components/Pagination */ "./resources/js/Components/Pagination.js"); +/* harmony import */ var _Components_CloseIcon__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @/Components/CloseIcon */ "./resources/js/Components/CloseIcon.js"); +/* harmony import */ var _Selects_EmployeeSelectInput__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @/Selects/EmployeeSelectInput */ "./resources/js/Selects/EmployeeSelectInput.js"); +/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @/utils */ "./resources/js/utils.js"); +/* harmony import */ var _Pages_Payrolls_Print__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @/Pages/Payrolls/Print */ "./resources/js/Pages/Payrolls/Print.js"); +/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js"); function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } @@ -9248,6 +9279,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope + + function Edit(props) { var _jsx2, _jsx3, _jsx4; @@ -9258,10 +9291,11 @@ function Edit(props) { _search = props._search, _page = props._page; - var _useForm = (0,_inertiajs_inertia_react__WEBPACK_IMPORTED_MODULE_4__.useForm)({ + var _useForm = (0,_inertiajs_inertia_react__WEBPACK_IMPORTED_MODULE_5__.useForm)({ date: new Date(payroll.date), employee_id: payroll.employee_id, employee_name: "".concat(payroll.employee.name, " - ").concat(payroll.employee.whatsapp), + employee: payroll.employee, cuts: payroll.cuts, bonus: payroll.bonus, items: payroll.items.map(function (item) { @@ -9287,12 +9321,14 @@ function Edit(props) { search = _useState4[0], setSearch = _useState4[1]; - var preValue = (0,react_use__WEBPACK_IMPORTED_MODULE_11__["default"])(search); + var preValue = (0,react_use__WEBPACK_IMPORTED_MODULE_13__["default"])(search); + var componentToPrint = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(); var handleSelectedEmployee = function handleSelectedEmployee(employee) { setData(_objectSpread(_objectSpread({}, data), {}, { employee_id: employee.id, - employee_name: "".concat(employee.name, " - ").concat(employee.whatsapp) + employee_name: "".concat(employee.name, " - ").concat(employee.whatsapp), + employee: employee })); }; @@ -9344,7 +9380,7 @@ function Edit(props) { put(route('payrolls.update', payroll), { onSuccess: function onSuccess() { - return Promise.all([handleReset(), react_toastify__WEBPACK_IMPORTED_MODULE_3__.toast.success('The Data has been saved')]); + return Promise.all([handleReset(), react_toastify__WEBPACK_IMPORTED_MODULE_4__.toast.success('The Data has been saved')]); } }); }; @@ -9356,7 +9392,7 @@ function Edit(props) { (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () { if (preValue) { setLoading(true); - _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_2__.Inertia.get(route(route().current(), payroll), { + _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_3__.Inertia.get(route(route().current(), payroll), { q: search, page: _page }, { @@ -9368,28 +9404,28 @@ function Edit(props) { }); } }, [search]); - return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(_Layouts_Authenticated__WEBPACK_IMPORTED_MODULE_5__["default"], { + return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)(_Layouts_Authenticated__WEBPACK_IMPORTED_MODULE_6__["default"], { auth: props.auth, errors: props.errors, - header: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("h2", { + header: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("h2", { className: "font-semibold text-xl text-gray-800 leading-tight", children: "Gaji" }), - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_inertiajs_inertia_react__WEBPACK_IMPORTED_MODULE_4__.Head, { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_inertiajs_inertia_react__WEBPACK_IMPORTED_MODULE_5__.Head, { title: "Payrolls" - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("div", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", { className: "py-12", - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("div", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", { className: "flex flex-col md:flex-row w-full sm:px-6 lg:px-8 space-y-4 md:space-x-4 md:space-y-0", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("div", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", { className: "card bg-white w-full md:w-2/3", - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("div", { + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", { className: "p-4", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("div", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", { className: "flex flex-row justify-end mb-2", - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("div", { + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", { className: "form-control", - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("input", { + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("input", { type: "text", className: "input input-bordered", value: search, @@ -9399,35 +9435,35 @@ function Edit(props) { placeholder: "Search" }) }) - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("div", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", { className: "grid grid-cols-4 gap-4 ".concat(loading && 'opacity-70'), children: products.map(function (product) { - return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("div", { + return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", { className: "rounded bg-white shadow-md", onClick: function onClick() { return addItem(product); }, - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("img", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("img", { src: product.photo_url, style: { height: '100px' } - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("div", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", { className: "p-4 flex flex-col justify-items-center items-center space-y-4", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("div", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", { className: "font-bold text-center", children: product.name - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("div", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", { className: "badge", - children: (0,_utils__WEBPACK_IMPORTED_MODULE_9__.formatIDR)(product.price) + children: (0,_utils__WEBPACK_IMPORTED_MODULE_10__.formatIDR)(product.price) })] })] }, product.id); }) - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("div", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", { className: "flex flex-col items-center", - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("div", { - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_Components_Pagination__WEBPACK_IMPORTED_MODULE_6__["default"], { + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", { + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_Components_Pagination__WEBPACK_IMPORTED_MODULE_7__["default"], { links: links, params: { q: search @@ -9436,12 +9472,12 @@ function Edit(props) { }) })] }) - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("div", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", { className: "card bg-white w-full md:w-1/3", - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("div", { + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", { className: "flex flex-col p-2 mb-4", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("div", { - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)((react_datepicker__WEBPACK_IMPORTED_MODULE_12___default()), { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)((react_datepicker__WEBPACK_IMPORTED_MODULE_14___default()), { selected: data.date, onChange: function onChange(date) { return setData('date', date); @@ -9450,54 +9486,54 @@ function Edit(props) { className: "input input-bordered ".concat(errors.date ? 'input-error' : ''), nextMonthButtonLabel: ">", previousMonthButtonLabel: "<" - }), errors.date && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("label", { + }), errors.date && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("label", { className: "label", - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("span", { + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("span", { className: "label-text-alt", children: errors.date }) })] - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("div", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", { className: "w-full", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_Selects_EmployeeSelectInput__WEBPACK_IMPORTED_MODULE_8__["default"], { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_Selects_EmployeeSelectInput__WEBPACK_IMPORTED_MODULE_9__["default"], { value: data.employee_name, onItemSelected: handleSelectedEmployee, invalid: errors.employee_id ? true : false - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("label", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("label", { className: "label", - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("span", { + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("span", { className: "label-text-alt", children: errors.employee_id }) })] - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("div", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", { className: "overflow-x-auto", style: { minHeight: '280px' }, - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("table", { + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("table", { className: "table w-full", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("thead", { - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("tr", { - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("th", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("thead", { + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("tr", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("th", { children: "Barang" - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("th", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("th", { children: "Qty" - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("th", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("th", { children: "Subtotal" - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("th", {})] + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("th", {})] }) - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("tbody", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("tbody", { children: data.items.map(function (item) { - return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("tr", { - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("td", { + return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("tr", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("td", { children: item.name - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("td", { - children: (0,_utils__WEBPACK_IMPORTED_MODULE_9__.formatIDR)(item.quantity) - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("td", { - children: (0,_utils__WEBPACK_IMPORTED_MODULE_9__.formatIDR)(item.quantity * item.price) - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("td", { - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_Components_CloseIcon__WEBPACK_IMPORTED_MODULE_7__["default"], { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("td", { + children: (0,_utils__WEBPACK_IMPORTED_MODULE_10__.formatIDR)(item.quantity) + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("td", { + children: (0,_utils__WEBPACK_IMPORTED_MODULE_10__.formatIDR)(item.quantity * item.price) + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("td", { + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_Components_CloseIcon__WEBPACK_IMPORTED_MODULE_8__["default"], { className: "btn btn-outline btn-sm px-0.5", onClick: function onClick() { return remoteItem(item); @@ -9508,79 +9544,99 @@ function Edit(props) { }) })] }) - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("div", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", { className: "card-actions", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("div", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", { className: "form-control w-full", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("label", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("label", { className: "input-group w-full", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("span", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("span", { children: "Potongan" - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(react_number_format__WEBPACK_IMPORTED_MODULE_1__["default"], (_jsx2 = { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(react_number_format__WEBPACK_IMPORTED_MODULE_1__["default"], (_jsx2 = { thousandSeparator: true, className: "input input-bordered w-full text-right ".concat(errors.cuts ? 'input-error' : ''), - value: (0,_utils__WEBPACK_IMPORTED_MODULE_9__.formatIDR)(data.cuts) + value: (0,_utils__WEBPACK_IMPORTED_MODULE_10__.formatIDR)(data.cuts) }, _defineProperty(_jsx2, "thousandSeparator", "."), _defineProperty(_jsx2, "decimalSeparator", ","), _defineProperty(_jsx2, "onValueChange", function onValueChange(_ref) { var value = _ref.value; return setData('cuts', value); }), _defineProperty(_jsx2, "placeholder", "potongan"), _jsx2))] - }), errors.cuts && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("label", { + }), errors.cuts && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("label", { className: "label", - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("span", { + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("span", { className: "label-text-alt", children: errors.cuts }) })] - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("div", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", { className: "form-control w-full", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("label", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("label", { className: "input-group w-full", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("span", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("span", { children: "Bonus" - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(react_number_format__WEBPACK_IMPORTED_MODULE_1__["default"], (_jsx3 = { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(react_number_format__WEBPACK_IMPORTED_MODULE_1__["default"], (_jsx3 = { thousandSeparator: true, className: "input input-bordered w-full text-right ".concat(errors.bonus ? 'input-error' : ''), - value: (0,_utils__WEBPACK_IMPORTED_MODULE_9__.formatIDR)(data.bonus) + value: (0,_utils__WEBPACK_IMPORTED_MODULE_10__.formatIDR)(data.bonus) }, _defineProperty(_jsx3, "thousandSeparator", "."), _defineProperty(_jsx3, "decimalSeparator", ","), _defineProperty(_jsx3, "onValueChange", function onValueChange(_ref2) { var value = _ref2.value; return setData('bonus', value); }), _defineProperty(_jsx3, "placeholder", "bonus"), _jsx3))] - }), errors.bonus && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("label", { + }), errors.bonus && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("label", { className: "label", - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("span", { + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("span", { className: "label-text-alt", children: errors.bonus }) })] - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("div", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", { className: "form-control w-full mt-2", - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("label", { + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("label", { className: "input-group w-full", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("span", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("span", { children: "Total" - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(react_number_format__WEBPACK_IMPORTED_MODULE_1__["default"], (_jsx4 = { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(react_number_format__WEBPACK_IMPORTED_MODULE_1__["default"], (_jsx4 = { thousandSeparator: true, className: "input input-bordered w-full text-right", value: totalAmount }, _defineProperty(_jsx4, "thousandSeparator", "."), _defineProperty(_jsx4, "decimalSeparator", ","), _defineProperty(_jsx4, "readOnly", true), _defineProperty(_jsx4, "placeholder", "total"), _jsx4))] }) - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("div", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", { className: "grid grid-cols-2 gap-2 w-full", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("div", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", { className: "btn btn-primary", disabled: processing, onClick: handleSubmit, children: "Simpan" - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("div", { - className: "btn btn-primary", - disabled: processing, - children: "Cetak" + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)((react_to_print__WEBPACK_IMPORTED_MODULE_2___default()), { + trigger: function trigger() { + return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", { + className: "btn btn-primary", + disabled: processing, + children: "Cetak" + }); + }, + content: function content() { + return componentToPrint.current; + } })] })] })] }) })] - }) + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", { + className: "hidden", + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_Pages_Payrolls_Print__WEBPACK_IMPORTED_MODULE_11__["default"], { + 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 + }) + })] })] }); } @@ -9854,6 +9910,172 @@ function Payrolls(props) { /***/ }), +/***/ "./resources/js/Pages/Payrolls/Print.js": +/*!**********************************************!*\ + !*** ./resources/js/Pages/Payrolls/Print.js ***! + \**********************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export */ __webpack_require__.d(__webpack_exports__, { +/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) +/* harmony export */ }); +/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js"); +/* harmony import */ var _inertiajs_inertia_react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @inertiajs/inertia-react */ "./node_modules/@inertiajs/inertia-react/dist/index.js"); +/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/utils */ "./resources/js/utils.js"); +/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js"); + + + + + + + +var Td = function Td(_ref) { + var children = _ref.children, + colSpan = _ref.colSpan, + className = _ref.className; + return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("td", { + className: "border p-2 ".concat(className), + colSpan: colSpan, + children: children + }); +}; + +var Print = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.forwardRef(function (props, ref) { + var user = props.user, + date = props.date, + employee = props.employee, + items = props.items, + amount = props.amount, + cuts = props.cuts, + bonus = props.bonus, + total = props.total; + return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.Fragment, { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_inertiajs_inertia_react__WEBPACK_IMPORTED_MODULE_1__.Head, { + title: "Print" + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", { + ref: ref, + className: "p-4", + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("table", { + className: "border-collapse border border-gray-400 w-full", + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("thead", { + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("tr", { + className: "text-center border", + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("th", { + colSpan: 4, + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", { + className: "flex text-md justify-center items-center font-bold text-4xl py-4", + children: "GAJIAN KONVEKSI" + }) + }) + }) + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("tbody", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("tr", { + className: "border", + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, { + children: "Nama Tukang" + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, { + children: employee === null || employee === void 0 ? void 0 : employee.name + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, { + children: "Nomer Telpon" + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, { + children: employee === null || employee === void 0 ? void 0 : employee.whatsapp + })] + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("tr", { + className: "border", + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, { + children: "Tanggal Pembuatan" + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, { + children: (0,_utils__WEBPACK_IMPORTED_MODULE_2__.formatDate)(date) + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, { + children: "Dibuat Oleh" + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, { + children: user === null || user === void 0 ? void 0 : user.name + })] + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("tr", { + className: "border text-center", + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("th", { + colSpan: 4, + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", { + className: "flex text-md justify-center items-center font-bold text-3xl py-4", + children: "Detail Gajian" + }) + }) + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("tr", { + className: "border", + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, { + className: "max-w-sm", + children: "#" + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, { + children: "Nama Barang" + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, { + children: "Harga" + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, { + children: "Jumlah" + })] + }), items === null || items === void 0 ? void 0 : items.map(function (item, index) { + return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("tr", { + className: "border", + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, { + className: "max-w-sm", + children: index + 1 + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, { + children: item === null || item === void 0 ? void 0 : item.name + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, { + children: (0,_utils__WEBPACK_IMPORTED_MODULE_2__.formatIDR)(item === null || item === void 0 ? void 0 : item.price) + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, { + children: (0,_utils__WEBPACK_IMPORTED_MODULE_2__.formatIDR)(item === null || item === void 0 ? void 0 : item.quantity) + })] + }, index); + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("tr", { + className: "border", + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, { + colSpan: 3, + className: "text-right", + children: "Total" + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, { + children: (0,_utils__WEBPACK_IMPORTED_MODULE_2__.formatIDR)(amount) + })] + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("tr", { + className: "border", + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, { + colSpan: 3, + className: "text-right", + children: "Potongan/Pinjaman" + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, { + children: (0,_utils__WEBPACK_IMPORTED_MODULE_2__.formatIDR)(cuts) + })] + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("tr", { + className: "border", + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, { + colSpan: 3, + className: "text-right", + children: "Bonus" + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, { + children: (0,_utils__WEBPACK_IMPORTED_MODULE_2__.formatIDR)(bonus) + })] + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("tr", { + className: "border", + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, { + colSpan: 3, + className: "text-right", + children: "Total Diterima" + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, { + className: "font-bold", + children: (0,_utils__WEBPACK_IMPORTED_MODULE_2__.formatIDR)(total) + })] + })] + })] + }) + })] + }); +}); +/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Print); + +/***/ }), + /***/ "./resources/js/Pages/Products.js": /*!****************************************!*\ !*** ./resources/js/Pages/Products.js ***! @@ -92854,6 +93076,17 @@ var useIsomorphicLayoutEffect = typeof window !== 'undefined' && window.document /***/ }), +/***/ "./node_modules/react-to-print/lib/index.js": +/*!**************************************************!*\ + !*** ./node_modules/react-to-print/lib/index.js ***! + \**************************************************/ +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { + +/*! For license information please see index.js.LICENSE.txt */ +!function(e,t){ true?module.exports=t(__webpack_require__(/*! react */ "./node_modules/react/index.js"),__webpack_require__(/*! react-dom */ "./node_modules/react-dom/index.js")):0}("undefined"!=typeof self?self:this,(function(e,t){return function(){"use strict";var n={655:function(e,t,n){n.r(t),n.d(t,{__extends:function(){return o},__assign:function(){return i},__rest:function(){return a},__decorate:function(){return l},__param:function(){return c},__metadata:function(){return u},__awaiter:function(){return s},__generator:function(){return f},__createBinding:function(){return d},__exportStar:function(){return p},__values:function(){return h},__read:function(){return y},__spread:function(){return b},__spreadArrays:function(){return v},__spreadArray:function(){return g},__await:function(){return m},__asyncGenerator:function(){return w},__asyncDelegator:function(){return _},__asyncValues:function(){return P},__makeTemplateObject:function(){return S},__importStar:function(){return x},__importDefault:function(){return A},__classPrivateFieldGet:function(){return T},__classPrivateFieldSet:function(){return j}});var r=function(e,t){return r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},r(e,t)};function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var i=function(){return i=Object.assign||function(e){for(var t,n=1,r=arguments.length;n=0;l--)(o=e[l])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}function c(e,t){return function(n,r){t(n,r,e)}}function u(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function s(e,t,n,r){return new(n||(n=Promise))((function(o,i){function a(e){try{c(r.next(e))}catch(e){i(e)}}function l(e){try{c(r.throw(e))}catch(e){i(e)}}function c(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,l)}c((r=r.apply(e,t||[])).next())}))}function f(e,t){var n,r,o,i,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function l(i){return function(l){return function(i){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,r&&(o=2&i[0]?r.return:i[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,i[1])).done)return o;switch(r=0,o&&(i=[2&i[0],o.value]),i[0]){case 0:case 1:o=i;break;case 4:return a.label++,{value:i[1],done:!1};case 5:a.label++,r=i[1],i=[0];continue;case 7:i=a.ops.pop(),a.trys.pop();continue;default:if(!((o=(o=a.trys).length>0&&o[o.length-1])||6!==i[0]&&2!==i[0])){a=0;continue}if(3===i[0]&&(!o||i[1]>o[0]&&i[1]=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function y(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,o,i=n.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(r=i.next()).done;)a.push(r.value)}catch(e){o={error:e}}finally{try{r&&!r.done&&(n=i.return)&&n.call(i)}finally{if(o)throw o.error}}return a}function b(){for(var e=[],t=0;t1||l(e,t)}))})}function l(e,t){try{(n=o[e](t)).value instanceof m?Promise.resolve(n.value.v).then(c,u):s(i[0][2],n)}catch(e){s(i[0][3],e)}var n}function c(e){l("next",e)}function u(e){l("throw",e)}function s(e,t){e(t),i.shift(),i.length&&l(i[0][0],i[0][1])}}function _(e){var t,n;return t={},r("next"),r("throw",(function(e){throw e})),r("return"),t[Symbol.iterator]=function(){return this},t;function r(r,o){t[r]=e[r]?function(t){return(n=!n)?{value:m(e[r](t)),done:"return"===r}:o?o(t):t}:o}}function P(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,n=e[Symbol.asyncIterator];return n?n.call(e):(e=h(e),t={},r("next"),r("throw"),r("return"),t[Symbol.asyncIterator]=function(){return this},t);function r(n){t[n]=e[n]&&function(t){return new Promise((function(r,o){!function(e,t,n,r){Promise.resolve(r).then((function(t){e({value:t,done:n})}),t)}(r,o,(t=e[n](t)).done,t.value)}))}}}function S(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var O=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t};function x(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&d(t,e,n);return O(t,e),t}function A(e){return e&&e.__esModule?e:{default:e}}function T(e,t,n,r){if("a"===n&&!r)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!r:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?r:"a"===n?r.call(e):r?r.value:t.get(e)}function j(e,t,n,r,o){if("m"===r)throw new TypeError("Private method is not writable");if("a"===r&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===r?o.call(e,n):o?o.value=n:t.set(e,n),n}},156:function(t){t.exports=e},111:function(e){e.exports=t}},r={};function o(e){var t=r[e];if(void 0!==t)return t.exports;var i=r[e]={exports:{}};return n[e](i,i.exports,o),i.exports}o.d=function(e,t){for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};return function(){var e=i;Object.defineProperty(e,"__esModule",{value:!0}),e.useReactToPrint=e.PrintContextConsumer=void 0;var t=o(655),n=o(156),r=o(111),a=Object.prototype.hasOwnProperty.call(n,"createContext"),l=Object.prototype.hasOwnProperty.call(n,"useMemo")&&Object.prototype.hasOwnProperty.call(n,"useCallback"),c=a?n.createContext({}):null;e.PrintContextConsumer=c?c.Consumer:function(){return null};var u={copyStyles:!0,pageStyle:"@page { size: auto; margin: 0mm; } @media print { body { -webkit-print-color-adjust: exact; } }",removeAfterPrint:!1,suppressErrors:!1},s=function(e){function o(){var n=null!==e&&e.apply(this,arguments)||this;return n.startPrint=function(e){var t=n.props,r=t.onAfterPrint,o=t.onPrintError,i=t.print,a=t.documentTitle;setTimeout((function(){var t,l;if(e.contentWindow){if(e.contentWindow.focus(),i)i(e).then(n.handleRemoveIframe).catch((function(e){o?o("print",e):n.logMessages(["An error was thrown by the specified `print` function"])}));else if(e.contentWindow.print){var c=null!==(l=null===(t=e.contentDocument)||void 0===t?void 0:t.title)&&void 0!==l?l:"",u=e.ownerDocument.title;a&&(e.ownerDocument.title=a,e.contentDocument&&(e.contentDocument.title=a)),e.contentWindow.print(),a&&(e.ownerDocument.title=u,e.contentDocument&&(e.contentDocument.title=c)),r&&r()}else n.logMessages(["Printing for this browser is not currently possible: the browser does not have a `print` method available for iframes."]);n.handleRemoveIframe()}else n.logMessages(["Printing failed because the `contentWindow` of the print iframe did not load. This is possibly an error with `react-to-print`. Please file an issue: https://github.com/gregnb/react-to-print/issues/"])}),500)},n.triggerPrint=function(e){var t=n.props,r=t.onBeforePrint,o=t.onPrintError;if(r){var i=r();i&&"function"==typeof i.then?i.then((function(){n.startPrint(e)})).catch((function(e){o&&o("onBeforePrint",e)})):n.startPrint(e)}else n.startPrint(e)},n.handleClick=function(){var e=n.props,t=e.onBeforeGetContent,r=e.onPrintError;if(t){var o=t();o&&"function"==typeof o.then?o.then(n.handlePrint).catch((function(e){r&&r("onBeforeGetContent",e)})):n.handlePrint()}else n.handlePrint()},n.handlePrint=function(){var e=n.props,o=e.bodyClass,i=e.content,a=e.copyStyles,l=e.fonts,c=e.pageStyle,u=e.nonce,s=i();if(void 0!==s)if(null!==s){var f=document.createElement("iframe");f.style.position="absolute",f.style.top="-1000px",f.style.left="-1000px",f.id="printWindow";var d=(0,r.findDOMNode)(s);if(d){var p=d.cloneNode(!0),h=p instanceof Text,y=document.querySelectorAll("link[rel='stylesheet']"),b=h?[]:p.querySelectorAll("img"),v=h?[]:p.querySelectorAll("video");n.linkTotal=y.length+b.length+v.length,n.linksLoaded=[],n.linksErrored=[],n.fontsLoaded=[],n.fontsErrored=[];var g=function(e,t){t?n.linksLoaded.push(e):(n.logMessages(['"react-to-print" was unable to load a linked node. It may be invalid. "react-to-print" will continue attempting to print the page. The linked node that errored was:',e]),n.linksErrored.push(e)),n.linksLoaded.length+n.linksErrored.length+n.fontsLoaded.length+n.fontsErrored.length===n.linkTotal&&n.triggerPrint(f)};f.onload=function(){var e,r,i,s;f.onload=null;var y=f.contentDocument||(null===(r=f.contentWindow)||void 0===r?void 0:r.document);if(y){y.body.appendChild(p),l&&((null===(i=f.contentDocument)||void 0===i?void 0:i.fonts)&&(null===(s=f.contentWindow)||void 0===s?void 0:s.FontFace)?l.forEach((function(e){var t=new FontFace(e.family,e.source);f.contentDocument.fonts.add(t),t.loaded.then((function(e){n.fontsLoaded.push(e)})).catch((function(e){n.fontsErrored.push(t),n.logMessages(['"react-to-print" was unable to load a font. "react-to-print" will continue attempting to print the page. The font that failed to load is:',t,"The error from loading the font is:",e])}))})):n.logMessages(['"react-to-print" is not able to load custom fonts because the browser does not support the FontFace API']));var m="function"==typeof c?c():c;if("string"!=typeof m)n.logMessages(['"react-to-print" expected a "string" from `pageStyle` but received "'.concat(typeof m,'". Styles from `pageStyle` will not be applied.')]);else{var w=y.createElement("style");u&&(w.setAttribute("nonce",u),y.head.setAttribute("nonce",u)),w.appendChild(y.createTextNode(m)),y.head.appendChild(w)}if(o&&(e=y.body.classList).add.apply(e,(0,t.__spreadArray)([],(0,t.__read)(o.split(" ")),!1)),!h){for(var _=y.querySelectorAll("canvas"),P=d.querySelectorAll("canvas"),S=0,O=_.length;S tag with an empty "src" attribute. It will not attempt to pre-load it. The is:',A],"warning"),g(A,!1)}var k=function(e){var t=v[e];t.preload="auto";var n=t.getAttribute("poster");if(n){var r=new Image;r.onload=g.bind(null,t,!0),r.onerror=g.bind(null,t,!1),r.src=n}else t.readyState>=2?g(t,!0):(t.onloadeddata=g.bind(null,t,!0),t.onerror=function(){console.log("Video with no poster error"),g.bind(null,t,!1)()},t.onstalled=function(){console.log("Video with no poster stalled"),g.bind(null,t,!1)()})};for(S=0;S tag with an empty "href" attribute. In addition to being invalid HTML, this can cause problems in many browsers, and so the was not loaded. The is:',B],"warning"),g(B,!0)}}0!==n.linkTotal&&a||n.triggerPrint(f)},n.handleRemoveIframe(!0),document.body.appendChild(f)}else n.logMessages(['"react-to-print" could not locate the DOM node corresponding with the `content` prop'])}else n.logMessages(['There is nothing to print because the "content" prop returned "null". Please ensure "content" is renderable before allowing "react-to-print" to be called.']);else n.logMessages(["To print a functional component ensure it is wrapped with `React.forwardRef`, and ensure the forwarded ref is used. See the README for an example: https://github.com/gregnb/react-to-print#examples"])},n.handleRemoveIframe=function(e){var t=n.props.removeAfterPrint;if(e||t){var r=document.getElementById("printWindow");r&&document.body.removeChild(r)}},n.logMessages=function(e,t){void 0===t&&(t="error"),n.props.suppressErrors||("error"===t?console.error(e):"warning"===t&&console.warn(e))},n}return(0,t.__extends)(o,e),o.prototype.render=function(){var e=this.props,t=e.children,r=e.trigger;if(r)return n.cloneElement(r(),{onClick:this.handleClick});if(!c)return this.logMessages(['"react-to-print" requires React ^16.3.0 to be able to use "PrintContext"']),null;var o={handlePrint:this.handleClick};return n.createElement(c.Provider,{value:o},t)},o.defaultProps=u,o}(n.Component);e.default=s,e.useReactToPrint=function(e){if(!l)return e.suppressErrors||console.error('"react-to-print" requires React ^16.8.0 to be able to use "useReactToPrint"'),function(){throw new Error('"react-to-print" requires React ^16.8.0 to be able to use "useReactToPrint"')};var r=n.useMemo((function(){return new s((0,t.__assign)((0,t.__assign)({},u),e))}),[e]);return n.useCallback((function(){return r.handleClick()}),[r])}}(),i}()})); + +/***/ }), + /***/ "./node_modules/react-toastify/dist/react-toastify.esm.js": /*!****************************************************************!*\ !*** ./node_modules/react-toastify/dist/react-toastify.esm.js ***! @@ -99564,6 +99797,8 @@ var map = { "./Payrolls/Edit.js": "./resources/js/Pages/Payrolls/Edit.js", "./Payrolls/Index": "./resources/js/Pages/Payrolls/Index.js", "./Payrolls/Index.js": "./resources/js/Pages/Payrolls/Index.js", + "./Payrolls/Print": "./resources/js/Pages/Payrolls/Print.js", + "./Payrolls/Print.js": "./resources/js/Pages/Payrolls/Print.js", "./Products": "./resources/js/Pages/Products.js", "./Products.js": "./resources/js/Pages/Products.js", "./Report": "./resources/js/Pages/Report.js", diff --git a/resources/js/Pages/Payrolls/Create.js b/resources/js/Pages/Payrolls/Create.js index 2570827..cdf2624 100644 --- a/resources/js/Pages/Payrolls/Create.js +++ b/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 -
- Cetak -
+ ( +
+ Cetak +
+ )} + content={() => componentToPrint.current} + /> +
+ +
) diff --git a/resources/js/Pages/Payrolls/Edit.js b/resources/js/Pages/Payrolls/Edit.js index 8a7d411..6747440 100644 --- a/resources/js/Pages/Payrolls/Edit.js +++ b/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 => { - return { - product_id: item.product_id, - quantity: item.quantity, - ...item.product, - } + items: payroll.items.map((item) => { + return { + product_id: item.product_id, + quantity: item.quantity, + ...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 -
- Cetak -
+ ( +
+ Cetak +
+ )} + content={() => componentToPrint.current} + /> +
+ +
) diff --git a/resources/js/Pages/Payrolls/Print.js b/resources/js/Pages/Payrolls/Print.js new file mode 100644 index 0000000..393e52a --- /dev/null +++ b/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 ( + + {children} + + ) +} + +const Print = React.forwardRef((props, ref) => { + const {user, date, employee, items, amount, cuts, bonus, total} = props + return ( + <> + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + {items?.map((item, index) => ( + + + + + + + ))} + + + + + + + + + + + + + + + + + +
+
+ GAJIAN KONVEKSI +
+
Nama Tukang{employee?.name}Nomer Telpon{employee?.whatsapp}
Tanggal Pembuatan{formatDate(date)}Dibuat Oleh{user?.name}
+
+ Detail Gajian +
+
#Nama BarangHargaJumlah
{index + 1}{item?.name}{formatIDR(item?.price)}{formatIDR(item?.quantity)}
+ Total + {formatIDR(amount)}
+ Potongan/Pinjaman + {formatIDR(cuts)}
+ Bonus + {formatIDR(bonus)}
+ Total Diterima + {formatIDR(total)}
+
+ + ) +}) + +export default Print