diff --git a/app/Http/Controllers/PayrollController.php b/app/Http/Controllers/PayrollController.php
index 734289d..3efb999 100644
--- a/app/Http/Controllers/PayrollController.php
+++ b/app/Http/Controllers/PayrollController.php
@@ -95,7 +95,7 @@ class PayrollController extends Controller
         DB::beginTransaction();
         $payroll = Payroll::create([
             'employee_id' => $request->employee_id,
-            'date' => $request->date,
+            'date' => \Carbon\Carbon::parse($request->date)->toDateString(),
             'amount' => $amount,
             'cuts' => $request->cuts,
             'bonus' => $request->bonus,
@@ -169,7 +169,7 @@ class PayrollController extends Controller
         DB::beginTransaction();
         $payroll->update([
             'employee_id' => $request->employee_id,
-            'date' => $request->date,
+            'date' => \Carbon\Carbon::parse($request->date)->toDateString(),
             'amount' => $amount,
             'cuts' => $request->cuts,
             'bonus' => $request->bonus,
diff --git a/app/Http/Controllers/ProductController.php b/app/Http/Controllers/ProductController.php
index 35051f0..1c52091 100644
--- a/app/Http/Controllers/ProductController.php
+++ b/app/Http/Controllers/ProductController.php
@@ -75,7 +75,7 @@ class ProductController extends Controller
         $photo = $request->file('photo');
         if ($photo != null) {
             if ($product->photo != null) {
-                Storage::delete('public/'.$product->photo);
+                // Storage::delete('public/'.$product->photo);
                 $product->photo = null;
             }
             $photo->store('public');
diff --git a/public/css/app.css b/public/css/app.css
index b327812..a76f382 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -589,845 +589,6 @@ html {
   --tab-border: 1px;
   --tab-radius: 0.5rem;
 }
-
-@media (prefers-color-scheme: dark) {
-
-  :root {
-    --p: 259 94% 61%;
-    --pf: 259 94.4% 51.2%;
-    --pc: 0 0% 100%;
-    --s: 314 100% 47.1%;
-    --sf: 314 100% 37.1%;
-    --sc: 0 0% 100%;
-    --a: 174 60% 51%;
-    --af: 174 59.8% 41%;
-    --ac: 0 0% 100%;
-    --n: 222 13.4% 19%;
-    --nf: 223 13.7% 10%;
-    --nc: 0 0% 100%;
-    --b1: 219 14.1% 27.8%;
-    --b2: 222 13.4% 19%;
-    --b3: 223 13.7% 10%;
-    --bc: 228 14.3% 93.1%;
-    --in: 202 100% 70%;
-    --su: 89 61.6% 52%;
-    --wa: 54 68.8% 63.5%;
-    --er: 0 100% 71.8%;
-    --border-color: var(--b3);
-    --rounded-box: 1rem;
-    --rounded-btn: 0.5rem;
-    --rounded-badge: 1.9rem;
-    --animation-btn: 0.25s;
-    --animation-input: .2s;
-    --btn-text-case: uppercase;
-    --btn-focus-scale: 0.95;
-    --navbar-padding: .5rem;
-    --border-btn: 1px;
-    --tab-border: 1px;
-    --tab-radius: 0.5rem;
-  }
-}
-
-[data-theme=light] {
-  --p: 259 94.4% 51.2%;
-  --pf: 259 94.3% 41%;
-  --pc: 0 0% 100%;
-  --s: 314 100% 47.1%;
-  --sf: 314 100% 37.1%;
-  --sc: 0 0% 100%;
-  --a: 174 60% 51%;
-  --af: 174 59.8% 41%;
-  --ac: 0 0% 100%;
-  --n: 219 14.1% 27.8%;
-  --nf: 222 13.4% 19%;
-  --nc: 0 0% 100%;
-  --b1: 0 0% 100%;
-  --b2: 210 20% 98%;
-  --b3: 216 12.2% 83.9%;
-  --bc: 215 27.9% 16.9%;
-  --in: 207 89.8% 53.9%;
-  --su: 174 100% 29%;
-  --wa: 36 100% 50%;
-  --er: 14 100% 57.1%;
-  --border-color: var(--b3);
-  --rounded-box: 1rem;
-  --rounded-btn: 0.5rem;
-  --rounded-badge: 1.9rem;
-  --animation-btn: 0.25s;
-  --animation-input: .2s;
-  --btn-text-case: uppercase;
-  --btn-focus-scale: 0.95;
-  --navbar-padding: .5rem;
-  --border-btn: 1px;
-  --tab-border: 1px;
-  --tab-radius: 0.5rem;
-}
-
-[data-theme=dark] {
-  --p: 259 94% 61%;
-  --pf: 259 94.4% 51.2%;
-  --pc: 0 0% 100%;
-  --s: 314 100% 47.1%;
-  --sf: 314 100% 37.1%;
-  --sc: 0 0% 100%;
-  --a: 174 60% 51%;
-  --af: 174 59.8% 41%;
-  --ac: 0 0% 100%;
-  --n: 222 13.4% 19%;
-  --nf: 223 13.7% 10%;
-  --nc: 0 0% 100%;
-  --b1: 219 14.1% 27.8%;
-  --b2: 222 13.4% 19%;
-  --b3: 223 13.7% 10%;
-  --bc: 228 14.3% 93.1%;
-  --in: 202 100% 70%;
-  --su: 89 61.6% 52%;
-  --wa: 54 68.8% 63.5%;
-  --er: 0 100% 71.8%;
-  --border-color: var(--b3);
-  --rounded-box: 1rem;
-  --rounded-btn: 0.5rem;
-  --rounded-badge: 1.9rem;
-  --animation-btn: 0.25s;
-  --animation-input: .2s;
-  --btn-text-case: uppercase;
-  --btn-focus-scale: 0.95;
-  --navbar-padding: .5rem;
-  --border-btn: 1px;
-  --tab-border: 1px;
-  --tab-radius: 0.5rem;
-}
-
-[data-theme=cupcake] {
-  --p: 183 47.4% 59%;
-  --pf: 183 47.2% 49%;
-  --pc: 0 0% 100%;
-  --s: 338 71.4% 78%;
-  --sf: 338 71.8% 68%;
-  --sc: 0 0% 100%;
-  --a: 39 84.1% 58%;
-  --af: 39 83.7% 48%;
-  --ac: 0 0% 100%;
-  --n: 280 46.5% 13.9%;
-  --nf: 279 46.4% 11%;
-  --nc: 0 0% 100%;
-  --b1: 24 33.3% 97.1%;
-  --b2: 27 22% 92%;
-  --b3: 22 14.3% 89%;
-  --bc: 280 46.5% 13.9%;
-  --in: 207 89.8% 53.9%;
-  --su: 174 100% 29%;
-  --wa: 36 100% 50%;
-  --er: 14 100% 57.1%;
-  --border-color: var(--b3);
-  --rounded-box: 1rem;
-  --rounded-btn: 1.9rem;
-  --rounded-badge: 1.9rem;
-  --animation-btn: 0.25s;
-  --animation-input: .2s;
-  --btn-text-case: uppercase;
-  --btn-focus-scale: 0.95;
-  --navbar-padding: .5rem;
-  --border-btn: 1px;
-  --tab-border: 2px;
-  --tab-radius: .5rem;
-}
-
-[data-theme=bumblebee] {
-  --p: 50 94.4% 58%;
-  --pf: 50 94.3% 47.8%;
-  --pc: 240 33.3% 14.1%;
-  --s: 41 74.2% 52.9%;
-  --sf: 41 73.6% 43.1%;
-  --sc: 0 0% 100%;
-  --a: 240 33.3% 14.1%;
-  --af: 240 33.3% 10%;
-  --ac: 0 0% 100%;
-  --n: 240 33.3% 14.1%;
-  --nf: 240 33.3% 10%;
-  --nc: 0 0% 100%;
-  --b1: 0 0% 100%;
-  --b2: 0 0% 96.1%;
-  --b3: 0 0% 89%;
-  --bc: 0 0% 0%;
-  --in: 207 89.8% 53.9%;
-  --su: 174 100% 29%;
-  --wa: 36 100% 50%;
-  --er: 14 100% 57.1%;
-  --border-color: var(--b3);
-  --rounded-box: 1rem;
-  --rounded-btn: 0.5rem;
-  --rounded-badge: 1.9rem;
-  --animation-btn: 0.25s;
-  --animation-input: .2s;
-  --btn-text-case: uppercase;
-  --btn-focus-scale: 0.95;
-  --navbar-padding: .5rem;
-  --border-btn: 1px;
-  --tab-border: 1px;
-  --tab-radius: 0.5rem;
-}
-
-[data-theme=emerald] {
-  --p: 141 50% 60%;
-  --pf: 141 49.8% 50%;
-  --pc: 210 20% 98%;
-  --s: 219 96.1% 60%;
-  --sf: 219 96.1% 50%;
-  --sc: 210 20% 98%;
-  --a: 10 81.2% 56.1%;
-  --af: 10 81.2% 45.9%;
-  --ac: 210 20% 98%;
-  --n: 219 20.3% 25.1%;
-  --nf: 220 19.5% 15.1%;
-  --nc: 210 20% 98%;
-  --b1: 0 0% 100%;
-  --b2: 210 20% 98%;
-  --b3: 0 0% 94.9%;
-  --bc: 219 20.3% 25.1%;
-  --in: 207 89.8% 53.9%;
-  --su: 174 100% 29%;
-  --wa: 36 100% 50%;
-  --er: 14 100% 57.1%;
-  --border-color: var(--b3);
-  --rounded-box: 1rem;
-  --rounded-btn: 0.5rem;
-  --rounded-badge: 1.9rem;
-  --animation-btn: 0;
-  --animation-input: 0;
-  --btn-text-case: uppercase;
-  --btn-focus-scale: 1;
-  --navbar-padding: .5rem;
-  --border-btn: 1px;
-  --tab-border: 1px;
-  --tab-radius: 0.5rem;
-}
-
-[data-theme=corporate] {
-  --p: 229 95.7% 63.9%;
-  --pf: 229 95.7% 53.9%;
-  --pc: 233 27.3% 12.9%;
-  --s: 215 26.3% 59%;
-  --sf: 214 26.1% 48.8%;
-  --sc: 233 27.3% 12.9%;
-  --a: 154 49% 60%;
-  --af: 154 49% 50%;
-  --ac: 233 27.3% 12.9%;
-  --n: 233 27.3% 12.9%;
-  --nf: 240 25% 3.1%;
-  --nc: 210 38.5% 94.9%;
-  --b1: 0 0% 100%;
-  --b2: 210 60% 98%;
-  --b3: 210 38.5% 94.9%;
-  --bc: 233 27.3% 12.9%;
-  --in: 207 89.8% 53.9%;
-  --su: 174 100% 29%;
-  --wa: 36 100% 50%;
-  --er: 14 100% 57.1%;
-  --border-color: var(--b3);
-  --rounded-box: 1rem;
-  --rounded-btn: 0.5rem;
-  --rounded-badge: 1.9rem;
-  --animation-btn: 0;
-  --animation-input: 0;
-  --btn-text-case: uppercase;
-  --btn-focus-scale: 1;
-  --navbar-padding: .5rem;
-  --border-btn: 1px;
-  --tab-border: 1px;
-  --tab-radius: 0.5rem;
-}
-
-[data-theme=synthwave] {
-  --p: 321 69.6% 69%;
-  --pf: 321 70.3% 59%;
-  --pc: 257 63.2% 17.1%;
-  --sf: 197 87.4% 75.1%;
-  --s: 197 86.6% 64.9%;
-  --sc: 257 63.2% 17.1%;
-  --af: 48 89.3% 67.1%;
-  --a: 48 89% 57.1%;
-  --ac: 257 63.2% 17.1%;
-  --n: 253 60.8% 19%;
-  --nf: 257 64.3% 11%;
-  --nc: 260 60% 98%;
-  --b1: 254 59.1% 25.9%;
-  --b2: 253 60.8% 19%;
-  --b3: 257 64.3% 11%;
-  --bc: 260 60% 98%;
-  --in: 199 87% 63.9%;
-  --su: 168 74.2% 68%;
-  --wa: 48 89% 57.1%;
-  --er: 352 73.6% 56.9%;
-  --border-color: var(--b3);
-  --rounded-box: 1rem;
-  --rounded-btn: 0.5rem;
-  --rounded-badge: 1.9rem;
-  --animation-btn: 0.25s;
-  --animation-input: .2s;
-  --btn-text-case: uppercase;
-  --btn-focus-scale: 0.95;
-  --navbar-padding: .5rem;
-  --border-btn: 1px;
-  --tab-border: 1px;
-  --tab-radius: 0.5rem;
-}
-
-[data-theme=retro] {
-  font-family: uisecondaryerif,Georgia,Cambria,Times New Roman,Times,serif;
-  --p: 3 73.8% 76.1%;
-  --pf: 3 73.6% 65.9%;
-  --pc: 345 5.3% 14.9%;
-  --s: 145 27.3% 72%;
-  --sf: 145 26.8% 62%;
-  --sc: 345 5.3% 14.9%;
-  --a: 49 67.2% 76.1%;
-  --af: 49 66.7% 65.9%;
-  --ac: 345 5.3% 14.9%;
-  --n: 42 16.8% 42%;
-  --nf: 41 13.1% 23.9%;
-  --nc: 45 47.1% 80%;
-  --b1: 45 47.1% 80%;
-  --b2: 45 37.1% 72%;
-  --b3: 42 36% 65.1%;
-  --bc: 345 5.3% 14.9%;
-  --in: 207 89.8% 53.9%;
-  --su: 174 100% 29%;
-  --wa: 36 100% 50%;
-  --er: 14 100% 57.1%;
-  --border-color: var(--b3);
-  --rounded-box: 0.4rem;
-  --rounded-btn: 0.4rem;
-  --rounded-badge: 0.4rem;
-  --animation-btn: 0.25s;
-  --animation-input: .2s;
-  --btn-text-case: uppercase;
-  --btn-focus-scale: 0.95;
-  --navbar-padding: .5rem;
-  --border-btn: 1px;
-  --tab-border: 1px;
-  --tab-radius: 0.5rem;
-}
-
-[data-theme=cyberpunk] {
-  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
-  --p: 345 100% 72.9%;
-  --pf: 344 100% 67.1%;
-  --pc: 0 0% 0%;
-  --s: 195 80.4% 70%;
-  --sf: 194 65.8% 61%;
-  --sc: 0 0% 0%;
-  --a: 276 74.3% 71%;
-  --af: 276 75.7% 62.9%;
-  --ac: 0 0% 0%;
-  --n: 57 100% 12.9%;
-  --nf: 60 80% 2%;
-  --nc: 56 100% 50%;
-  --b1: 56 100% 50%;
-  --b2: 56 100% 42.9%;
-  --b3: 56 100% 36.1%;
-  --bc: 0 0% 0%;
-  --in: 207 89.8% 53.9%;
-  --su: 174 100% 29%;
-  --wa: 36 100% 50%;
-  --er: 14 100% 57.1%;
-  --border-color: var(--b3);
-  --rounded-box: 0;
-  --rounded-btn: 0;
-  --rounded-badge: 0;
-  --animation-btn: 0.25s;
-  --animation-input: .2s;
-  --btn-text-case: uppercase;
-  --btn-focus-scale: 0.95;
-  --navbar-padding: .5rem;
-  --border-btn: 1px;
-  --tab-border: 1px;
-  --tab-radius: 0;
-}
-
-[data-theme=valentine] {
-  --p: 353 73.8% 67.1%;
-  --pf: 353 73.6% 56.9%;
-  --pc: 0 0% 100%;
-  --s: 254 86.4% 76.9%;
-  --sf: 254 86.9% 67.1%;
-  --sc: 0 0% 100%;
-  --a: 181 55.6% 70%;
-  --af: 181 54.9% 60%;
-  --ac: 0 0% 100%;
-  --n: 336 42.9% 48%;
-  --nf: 340 40.2% 38%;
-  --nc: 318 46.4% 89%;
-  --b1: 318 46.4% 89%;
-  --b2: 315 58.9% 79%;
-  --b3: 316 62.3% 72.9%;
-  --bc: 344 38.5% 28%;
-  --in: 207 89.8% 53.9%;
-  --su: 174 100% 29%;
-  --wa: 36 100% 50%;
-  --er: 14 100% 57.1%;
-  --border-color: var(--b3);
-  --rounded-box: 1rem;
-  --rounded-btn: 1.9rem;
-  --rounded-badge: 1.9rem;
-  --animation-btn: 0.25s;
-  --animation-input: .2s;
-  --btn-text-case: uppercase;
-  --btn-focus-scale: 0.95;
-  --navbar-padding: .5rem;
-  --border-btn: 1px;
-  --tab-border: 1px;
-  --tab-radius: 0.5rem;
-}
-
-[data-theme=halloween] {
-  --p: 32 89.3% 52.2%;
-  --pf: 32 88.8% 42%;
-  --pc: 180 7.3% 8%;
-  --s: 271 45.8% 42%;
-  --sf: 271 46% 32%;
-  --sc: 0 0% 100%;
-  --a: 91 100% 32.9%;
-  --af: 91 100% 22.9%;
-  --ac: 0 0% 100%;
-  --n: 180 3.6% 11%;
-  --nf: 180 7.3% 8%;
-  --nc: 0 0% 100%;
-  --b1: 0 0% 12.9%;
-  --b2: 180 3.6% 11%;
-  --b3: 180 7.3% 8%;
-  --bc: 0 0% 100%;
-  --in: 202 100% 70%;
-  --su: 89 61.6% 52%;
-  --wa: 54 68.8% 63.5%;
-  --er: 0 100% 71.8%;
-  --border-color: var(--b3);
-  --rounded-box: 1rem;
-  --rounded-btn: 0.5rem;
-  --rounded-badge: 1.9rem;
-  --animation-btn: 0.25s;
-  --animation-input: .2s;
-  --btn-text-case: uppercase;
-  --btn-focus-scale: 0.95;
-  --navbar-padding: .5rem;
-  --border-btn: 1px;
-  --tab-border: 1px;
-  --tab-radius: 0.5rem;
-}
-
-[data-theme=garden] {
-  --p: 139 16% 42.9%;
-  --pf: 137 14.8% 33.1%;
-  --pc: 0 0% 100%;
-  --s: 97 37.1% 93.1%;
-  --sf: 98 36.3% 82.2%;
-  --sc: 96 32.5% 15.1%;
-  --a: 0 67.7% 93.9%;
-  --af: 0 71.1% 85.1%;
-  --ac: 0 22% 16.1%;
-  --n: 0 3.9% 35.1%;
-  --nf: 0 3.7% 15.9%;
-  --nc: 0 4.3% 91%;
-  --b1: 0 4.3% 91%;
-  --b2: 0 5.2% 81%;
-  --b3: 0 5.4% 71%;
-  --bc: 0 3.2% 6.1%;
-  --in: 207 89.8% 53.9%;
-  --su: 174 100% 29%;
-  --wa: 36 100% 50%;
-  --er: 14 100% 57.1%;
-  --border-color: var(--b3);
-  --rounded-box: 1rem;
-  --rounded-btn: 0.5rem;
-  --rounded-badge: 1.9rem;
-  --animation-btn: 0.25s;
-  --animation-input: .2s;
-  --btn-text-case: uppercase;
-  --btn-focus-scale: 0.95;
-  --navbar-padding: .5rem;
-  --border-btn: 1px;
-  --tab-border: 1px;
-  --tab-radius: 0.5rem;
-}
-
-[data-theme=forest] {
-  --p: 141 72% 42%;
-  --pf: 141 71.8% 32%;
-  --pc: 0 0% 100%;
-  --s: 141 74.7% 48%;
-  --sf: 141 75.3% 38%;
-  --sc: 0 0% 100%;
-  --a: 35 69% 52%;
-  --af: 35 69.2% 42%;
-  --ac: 0 0% 100%;
-  --n: 0 9.7% 6.1%;
-  --nf: 0 20% 2%;
-  --nc: 0 0% 100%;
-  --b1: 0 12.2% 8%;
-  --b2: 0 9.7% 6.1%;
-  --b3: 0 20% 2%;
-  --bc: 0 0% 100%;
-  --rounded-btn: 0.5rem;
-  --in: 202 100% 70%;
-  --su: 89 61.6% 52%;
-  --wa: 54 68.8% 63.5%;
-  --er: 0 100% 71.8%;
-  --border-color: var(--b3);
-  --rounded-box: 1rem;
-  --rounded-badge: 1.9rem;
-  --animation-btn: 0.25s;
-  --animation-input: .2s;
-  --btn-text-case: uppercase;
-  --btn-focus-scale: 0.95;
-  --navbar-padding: .5rem;
-  --border-btn: 1px;
-  --tab-border: 1px;
-  --tab-radius: 0.5rem;
-}
-
-[data-theme=aqua] {
-  --p: 189 100% 62.9%;
-  --pf: 189 100% 52.9%;
-  --pc: 0 0% 0%;
-  --s: 274 30.9% 56.9%;
-  --sf: 274 30.8% 47.1%;
-  --sc: 0 0% 100%;
-  --a: 47 100% 80%;
-  --af: 47 100% 70%;
-  --ac: 0 0% 100%;
-  --n: 231 77.4% 32.9%;
-  --nf: 231 67.6% 29%;
-  --nc: 0 0% 100%;
-  --b1: 231 88.7% 38%;
-  --b2: 231 77.4% 32.9%;
-  --b3: 231 67.6% 29%;
-  --bc: 0 0% 100%;
-  --in: 207 89.8% 53.9%;
-  --su: 174 100% 29%;
-  --wa: 36 100% 50%;
-  --er: 14 100% 57.1%;
-  --border-color: var(--b3);
-  --rounded-box: 1rem;
-  --rounded-btn: 0.5rem;
-  --rounded-badge: 1.9rem;
-  --animation-btn: 0.25s;
-  --animation-input: .2s;
-  --btn-text-case: uppercase;
-  --btn-focus-scale: 0.95;
-  --navbar-padding: .5rem;
-  --border-btn: 1px;
-  --tab-border: 1px;
-  --tab-radius: 0.5rem;
-}
-
-[data-theme=lofi] {
-  --p: 0 0% 50.2%;
-  --pf: 0 0% 45.1%;
-  --pc: 240 4% 95.1%;
-  --s: 0 0% 30.2%;
-  --sf: 0 0% 25.1%;
-  --sc: 240 4% 95.1%;
-  --a: 0 0% 10.2%;
-  --af: 0 0% 5.1%;
-  --ac: 240 4% 95.1%;
-  --n: 240 4% 95.1%;
-  --nf: 240 5.9% 90%;
-  --nc: 0 0% 30.2%;
-  --b1: 0 0% 100%;
-  --b2: 0 0% 100%;
-  --b3: 0 0% 100%;
-  --bc: 0 0% 49%;
-  --in: 207 89.8% 53.9%;
-  --su: 174 100% 29%;
-  --wa: 36 100% 50%;
-  --er: 14 100% 57.1%;
-  --border-color: #e6e6e6;
-  --rounded-box: 0;
-  --rounded-btn: 0;
-  --rounded-badge: 0;
-  --animation-btn: 0;
-  --animation-input: 0;
-  --btn-text-case: uppercase;
-  --btn-focus-scale: 1;
-  --navbar-padding: .5rem;
-  --border-btn: 1px;
-  --tab-border: 1px;
-  --tab-radius: 0;
-}
-
-[data-theme=lofi] *:where(.btn) {
-  border-color: var(--border-color) !important;
-  --tw-border-opacity: 1 !important;
-  --tw-text-opacity: 1 !important;
-  --tw-shadow: 0 0 0 1px var(--border-color) !important;
-}
-
-[data-theme=lofi] *:where(.badge) {
-  border-color: var(--border-color) !important;
-  --tw-border-opacity: 1 !important;
-  --tw-text-opacity: 1 !important;
-  --tw-shadow: 0 0 0 1px var(--border-color) !important;
-}
-
-[data-theme=lofi] *:where(.card) {
-  border-color: var(--border-color) !important;
-  --tw-border-opacity: 1 !important;
-  --tw-text-opacity: 1 !important;
-  --tw-shadow: 0 0 0 1px var(--border-color) !important;
-}
-
-[data-theme=pastel] {
-  --p: 284 21.6% 80%;
-  --pf: 282 21.6% 70%;
-  --pc: 0 0% 0%;
-  --s: 352 70.5% 88%;
-  --sf: 352 69.6% 78%;
-  --sc: 0 0% 100%;
-  --a: 158 54.6% 81%;
-  --af: 158 55.4% 71%;
-  --ac: 0 0% 100%;
-  --n: 199 43.7% 61%;
-  --nf: 199 44% 51%;
-  --nc: 0 0% 100%;
-  --b1: 0 0% 100%;
-  --b2: 210 20% 98%;
-  --b3: 216 12.2% 83.9%;
-  --bc: 206 3.1% 55.1%;
-  --in: 207 89.8% 53.9%;
-  --su: 174 100% 29%;
-  --wa: 36 100% 50%;
-  --er: 14 100% 57.1%;
-  --rounded-box: 1rem;
-  --rounded-btn: 1.9rem;
-  --rounded-badge: 1.9rem;
-  --border-color: var(--b3);
-  --animation-btn: 0.25s;
-  --animation-input: .2s;
-  --btn-text-case: uppercase;
-  --btn-focus-scale: 0.95;
-  --navbar-padding: .5rem;
-  --border-btn: 1px;
-  --tab-border: 1px;
-  --tab-radius: 0.5rem;
-}
-
-[data-theme=fantasy] {
-  --p: 296 82.8% 25.1%;
-  --pf: 296 81.8% 15.1%;
-  --pc: 0 0% 100%;
-  --s: 200 100% 37.1%;
-  --sf: 200 100% 27.1%;
-  --sc: 0 0% 100%;
-  --a: 31 94.4% 51.2%;
-  --af: 31 94.3% 41%;
-  --ac: 0 0% 100%;
-  --n: 215 27.9% 16.9%;
-  --nf: 221 39.3% 11%;
-  --nc: 0 0% 100%;
-  --b1: 0 0% 100%;
-  --b2: 210 20% 98%;
-  --b3: 216 12.2% 83.9%;
-  --bc: 215 27.9% 16.9%;
-  --in: 207 89.8% 53.9%;
-  --su: 174 100% 29%;
-  --wa: 36 100% 50%;
-  --er: 14 100% 57.1%;
-  --border-color: var(--b3);
-  --rounded-box: 1rem;
-  --rounded-btn: 0.5rem;
-  --rounded-badge: 1.9rem;
-  --animation-btn: 0.25s;
-  --animation-input: .2s;
-  --btn-text-case: uppercase;
-  --btn-focus-scale: 0.95;
-  --navbar-padding: .5rem;
-  --border-btn: 1px;
-  --tab-border: 1px;
-  --tab-radius: 0.5rem;
-}
-
-[data-theme=wireframe] {
-  font-family: Chalkboard,comic sans ms,"sanssecondaryerif";
-  --p: 0 0% 72.2%;
-  --pf: 0 0% 72.2%;
-  --pc: 0 0% 0%;
-  --s: 0 0% 72.2%;
-  --sf: 0 0% 72.2%;
-  --sc: 0 0% 0%;
-  --a: 0 0% 72.2%;
-  --af: 0 0% 72.2%;
-  --ac: 0 0% 0%;
-  --b1: 0 0% 100%;
-  --b2: 0 0% 93.3%;
-  --b3: 0 0% 86.7%;
-  --bc: 0 0% 0%;
-  --n: 0 0% 92.2%;
-  --nf: 0 0% 92.2%;
-  --nc: 0 0% 0%;
-  --in: 240 100% 50%;
-  --su: 120 100% 25.1%;
-  --wa: 60 30.2% 50%;
-  --er: 0 100% 50%;
-  --border-color: #000000;
-  --rounded-box: 0.2rem;
-  --rounded-btn: 0.2rem;
-  --rounded-badge: 0.2rem;
-  --animation-btn: 0.25s;
-  --animation-input: .2s;
-  --btn-text-case: uppercase;
-  --btn-focus-scale: 0.95;
-  --navbar-padding: .5rem;
-  --border-btn: 1px;
-  --tab-border: 1px;
-  --tab-radius: 0.2rem;
-}
-
-[data-theme=wireframe] * {
-  border-color: var(--border-color) !important;
-  --tw-border-opacity: 1 !important;
-  --tw-text-opacity: 1 !important;
-  --tw-shadow: 0 0 0 1px var(--border-color) !important;
-}
-
-[data-theme=black] {
-  --p: 0 0% 100%;
-  --pf: 0 0% 100%;
-  --pc: 0 0% 0%;
-  --s: 0 0% 100%;
-  --sf: 0 0% 100%;
-  --sc: 0 0% 0%;
-  --a: 0 0% 100%;
-  --af: 0 0% 100%;
-  --ac: 0 0% 0%;
-  --b1: 0 0% 0%;
-  --b2: 0 0% 20%;
-  --b3: 0 0% 30.2%;
-  --bc: 0 0% 100%;
-  --n: 0 0% 20%;
-  --nf: 0 0% 30.2%;
-  --nc: 0 0% 100%;
-  --in: 240 100% 50%;
-  --su: 120 100% 25.1%;
-  --wa: 60 100% 50%;
-  --er: 0 100% 50%;
-  --border-color: var(--b3);
-  --rounded-box: 0;
-  --rounded-btn: 0;
-  --rounded-badge: 0;
-  --animation-btn: 0;
-  --animation-input: 0;
-  --btn-text-case: lowercase;
-  --btn-focus-scale: 1;
-  --navbar-padding: .5rem;
-  --border-btn: 1px;
-  --tab-border: 1px;
-  --tab-radius: 0;
-}
-
-[data-theme=luxury] {
-  --p: 0 0% 100%;
-  --pf: 0 0% 90.2%;
-  --pc: 0 0% 0%;
-  --s: 218 54.3% 18%;
-  --sf: 219 56.1% 8%;
-  --sc: 0 0% 100%;
-  --a: 319 21.8% 26.1%;
-  --af: 320 22% 16.1%;
-  --ac: 0 0% 100%;
-  --n: 270 4.3% 9%;
-  --nf: 270 2.2% 18%;
-  --nc: 37 67.3% 58%;
-  --b1: 240 10% 3.9%;
-  --b2: 270 4.3% 9%;
-  --b3: 270 2.2% 18%;
-  --bc: 37 67.3% 58%;
-  --in: 202 100% 70%;
-  --su: 89 61.6% 52%;
-  --wa: 54 68.8% 63.5%;
-  --er: 0 100% 71.8%;
-  --border-color: var(--b3);
-  --rounded-box: 1rem;
-  --rounded-btn: 0.5rem;
-  --rounded-badge: 1.9rem;
-  --animation-btn: 0.25s;
-  --animation-input: .2s;
-  --btn-text-case: uppercase;
-  --btn-focus-scale: 0.95;
-  --navbar-padding: .5rem;
-  --border-btn: 1px;
-  --tab-border: 1px;
-  --tab-radius: 0.5rem;
-}
-
-[data-theme=dracula] {
-  --p: 330 100% 85.1%;
-  --pf: 330 100% 75.1%;
-  --pc: 233 12.1% 12.9%;
-  --s: 115 100% 85.1%;
-  --sf: 115 100% 75.1%;
-  --sc: 233 12.1% 12.9%;
-  --a: 60 100% 85.1%;
-  --af: 60 100% 75.1%;
-  --ac: 233 12.1% 12.9%;
-  --n: 245 14.3% 15.1%;
-  --nf: 233 12.1% 12.9%;
-  --nc: 251 100% 90%;
-  --b1: 244 13% 21.2%;
-  --b2: 245 14.3% 15.1%;
-  --b3: 233 12.1% 12.9%;
-  --bc: 251 100% 90%;
-  --in: 207 89.8% 53.9%;
-  --su: 174 100% 29%;
-  --wa: 36 100% 50%;
-  --er: 14 100% 57.1%;
-  --border-color: var(--b3);
-  --rounded-box: 1rem;
-  --rounded-btn: 0.5rem;
-  --rounded-badge: 1.9rem;
-  --animation-btn: 0.25s;
-  --animation-input: .2s;
-  --btn-text-case: uppercase;
-  --btn-focus-scale: 0.95;
-  --navbar-padding: .5rem;
-  --border-btn: 1px;
-  --tab-border: 1px;
-  --tab-radius: 0.5rem;
-}
-
-[data-theme=cmyk] {
-  --p: 203 83.3% 60.2%;
-  --pf: 203 65.1% 53.9%;
-  --pc: 0 0% 0%;
-  --s: 335 77.7% 59.6%;
-  --sf: 335 59.2% 52.9%;
-  --sc: 0 0% 0%;
-  --a: 56 100% 59.8%;
-  --af: 56 72.2% 52%;
-  --ac: 0 0% 0%;
-  --n: 0 0% 10.2%;
-  --nf: 0 0% 0%;
-  --nc: 0 0% 100%;
-  --b1: 0 0% 100%;
-  --b2: 0 0% 96.1%;
-  --b3: 0 0% 92.2%;
-  --bc: 0 0% 0%;
-  --in: 192 48.4% 52.2%;
-  --su: 291 48.5% 38%;
-  --wa: 25 84.6% 56.7%;
-  --er: 4 80.5% 55.7%;
-  --border-color: var(--b3);
-  --rounded-box: 1rem;
-  --rounded-btn: 0.5rem;
-  --rounded-badge: 1.9rem;
-  --animation-btn: 0.25s;
-  --animation-input: .2s;
-  --btn-text-case: uppercase;
-  --btn-focus-scale: 0.95;
-  --navbar-padding: .5rem;
-  --border-btn: 1px;
-  --tab-border: 1px;
-  --tab-radius: 0.5rem;
-}
 *, ::before, ::after {
   --tw-translate-x: 0;
   --tw-translate-y: 0;
diff --git a/public/js/app.js b/public/js/app.js
index f9c1562..924ac9f 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -7412,7 +7412,7 @@ function FormEmployeeModal(props) {
       className: "modal-box",
       children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("h1", {
         className: "font-bold text-2xl pb-8",
-        children: "Barang"
+        children: "Karyawan"
       }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
         className: "form-control",
         children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("label", {
@@ -7614,10 +7614,11 @@ function FormProductModal(props) {
     style: isOpen ? {
       opacity: 1,
       pointerEvents: 'auto',
-      visibility: 'visible'
+      visibility: 'visible',
+      overflowY: 'initial'
     } : {},
     children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
-      className: "modal-box",
+      className: "modal-box overflow-y-auto max-h-screen",
       children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("h1", {
         className: "font-bold text-2xl pb-8",
         children: "Barang"
@@ -7824,10 +7825,11 @@ function FormUserModal(props) {
     style: isOpen ? {
       opacity: 1,
       pointerEvents: 'auto',
-      visibility: 'visible'
+      visibility: 'visible',
+      overflowY: 'initial'
     } : {},
     children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", {
-      className: "modal-box",
+      className: "modal-box overflow-y-auto max-h-screen",
       children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("h1", {
         className: "font-bold text-2xl pb-8",
         children: "User"
@@ -9022,7 +9024,9 @@ function Create(props) {
                   children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("img", {
                     src: product.photo_url,
                     style: {
-                      height: '100px'
+                      height: '100px',
+                      objectFit: 'cover',
+                      width: '100%'
                     }
                   }), /*#__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",
@@ -9180,14 +9184,14 @@ function Create(props) {
                 className: "grid grid-cols-2 gap-2 w-full",
                 children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", {
                   className: "btn btn-primary",
-                  disabled: processing,
+                  disabled: !processing ? data.employee_id === null || data.items.length === 0 : processing,
                   onClick: handleSubmit,
                   children: "Simpan"
                 }), /*#__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,
+                      disabled: data.employee_id === null || data.items.length === 0,
                       children: "Cetak"
                     });
                   },
@@ -9446,7 +9450,9 @@ function Edit(props) {
                   children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("img", {
                     src: product.photo_url,
                     style: {
-                      height: '100px'
+                      height: '100px',
+                      objectFit: 'cover',
+                      width: '100%'
                     }
                   }), /*#__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",
@@ -9922,10 +9928,8 @@ __webpack_require__.r(__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");
-
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @/utils */ "./resources/js/utils.js");
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js");
 
 
 
@@ -9936,7 +9940,7 @@ 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", {
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("td", {
     className: "border p-2 ".concat(className),
     colSpan: colSpan,
     children: children
@@ -9952,124 +9956,122 @@ var Print = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.forwardRef(function
       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", {
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment, {
+    children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div", {
       ref: ref,
       className: "p-4",
-      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("table", {
+      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.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", {
+        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("thead", {
+          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("tr", {
             className: "text-center border",
-            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("th", {
+            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("th", {
               colSpan: 4,
-              children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", {
+              children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div", {
                 className: "flex text-md justify-center items-center font-bold text-4xl py-4",
                 children: "GAJIAN KONVEKSI"
               })
             })
           })
-        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("tbody", {
-          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("tr", {
+        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("tbody", {
+          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("tr", {
             className: "border",
-            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, {
+            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
               children: "Nama Tukang"
-            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, {
+            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
               children: employee === null || employee === void 0 ? void 0 : employee.name
-            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, {
+            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
               children: "Nomer Telpon"
-            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, {
+            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
               children: employee === null || employee === void 0 ? void 0 : employee.whatsapp
             })]
-          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("tr", {
+          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("tr", {
             className: "border",
-            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, {
+            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.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, {
+            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
+              children: (0,_utils__WEBPACK_IMPORTED_MODULE_1__.formatDate)(date)
+            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
               children: "Dibuat Oleh"
-            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, {
+            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
               children: user === null || user === void 0 ? void 0 : user.name
             })]
-          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("tr", {
+          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("tr", {
             className: "border text-center",
-            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("th", {
+            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("th", {
               colSpan: 4,
-              children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", {
+              children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div", {
                 className: "flex text-md justify-center items-center font-bold text-3xl py-4",
                 children: "Detail Gajian"
               })
             })
-          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("tr", {
+          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("tr", {
             className: "border",
-            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, {
+            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
               className: "max-w-sm",
               children: "#"
-            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, {
+            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
               children: "Nama Barang"
-            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, {
+            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
               children: "Harga"
-            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, {
+            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.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", {
+            return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("tr", {
               className: "border",
-              children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, {
+              children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
                 className: "max-w-sm",
                 children: index + 1
-              }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, {
+              }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.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)
+              }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
+                children: (0,_utils__WEBPACK_IMPORTED_MODULE_1__.formatIDR)(item === null || item === void 0 ? void 0 : item.price)
+              }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
+                children: (0,_utils__WEBPACK_IMPORTED_MODULE_1__.formatIDR)(item === null || item === void 0 ? void 0 : item.quantity)
               })]
             }, index);
-          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("tr", {
+          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("tr", {
             className: "border",
-            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, {
+            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.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_2__.jsx)(Td, {
+              children: (0,_utils__WEBPACK_IMPORTED_MODULE_1__.formatIDR)(amount)
             })]
-          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("tr", {
+          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("tr", {
             className: "border",
-            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, {
+            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.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_2__.jsx)(Td, {
+              children: (0,_utils__WEBPACK_IMPORTED_MODULE_1__.formatIDR)(cuts)
             })]
-          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("tr", {
+          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("tr", {
             className: "border",
-            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, {
+            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.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_2__.jsx)(Td, {
+              children: (0,_utils__WEBPACK_IMPORTED_MODULE_1__.formatIDR)(bonus)
             })]
-          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("tr", {
+          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("tr", {
             className: "border",
-            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, {
+            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
               colSpan: 3,
               className: "text-right",
               children: "Total Diterima"
-            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Td, {
+            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Td, {
               className: "font-bold",
-              children: (0,_utils__WEBPACK_IMPORTED_MODULE_2__.formatIDR)(total)
+              children: (0,_utils__WEBPACK_IMPORTED_MODULE_1__.formatIDR)(total)
             })]
           })]
         })]
       })
-    })]
+    })
   });
 });
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Print);
diff --git a/resources/js/Modals/FormEmployeeModal.js b/resources/js/Modals/FormEmployeeModal.js
index 45dfa7a..8823b5a 100644
--- a/resources/js/Modals/FormEmployeeModal.js
+++ b/resources/js/Modals/FormEmployeeModal.js
@@ -83,7 +83,7 @@ export default function FormEmployeeModal(props) {
             }
         >
             <div className="modal-box">
-                <h1 className="font-bold text-2xl pb-8">Barang</h1>
+                <h1 className="font-bold text-2xl pb-8">Karyawan</h1>
                 <div className="form-control">
                     <label className="label">
                         <span className="label-text">Nama</span>
diff --git a/resources/js/Modals/FormProductModal.js b/resources/js/Modals/FormProductModal.js
index a4f7cd4..dce93c0 100644
--- a/resources/js/Modals/FormProductModal.js
+++ b/resources/js/Modals/FormProductModal.js
@@ -76,14 +76,15 @@ export default function FormProductModal(props) {
             style={
                 isOpen
                     ? {
-                        opacity: 1,
-                        pointerEvents: 'auto',
-                        visibility: 'visible',
-                    }
+                          opacity: 1,
+                          pointerEvents: 'auto',
+                          visibility: 'visible',
+                          overflowY: 'initial',
+                      }
                     : {}
             }
         >
-            <div className="modal-box">
+            <div className="modal-box overflow-y-auto max-h-screen">
                 <h1 className="font-bold text-2xl pb-8">Barang</h1>
                 <div className="form-control">
                     <label className="label">
@@ -149,8 +150,12 @@ export default function FormProductModal(props) {
                         className={`input input-bordered ${
                             errors.photo && 'input-error'
                         }`}
-                        onClick={() => {console.log(inputPhoto.current.click())}}
-                    >{data.photo ? data.photo.name : ''}</div>
+                        onClick={() => {
+                            console.log(inputPhoto.current.click())
+                        }}
+                    >
+                        {data.photo ? data.photo.name : ''}
+                    </div>
                     <input
                         ref={inputPhoto}
                         type="file"
@@ -164,9 +169,7 @@ export default function FormProductModal(props) {
                     </label>
                 </div>
                 <div className="form-control">
-                    {data.img_alt !== null && (
-                        <img src={data.img_alt}/>
-                    )}
+                    {data.img_alt !== null && <img src={data.img_alt} />}
                 </div>
                 <div className="modal-action">
                     <div
diff --git a/resources/js/Modals/FormUserModal.js b/resources/js/Modals/FormUserModal.js
index c08eb5e..a645618 100644
--- a/resources/js/Modals/FormUserModal.js
+++ b/resources/js/Modals/FormUserModal.js
@@ -63,11 +63,12 @@ export default function FormUserModal(props) {
                           opacity: 1,
                           pointerEvents: 'auto',
                           visibility: 'visible',
+                          overflowY: 'initial',
                       }
                     : {}
             }
         >
-            <div className="modal-box">
+            <div className="modal-box overflow-y-auto max-h-screen">
                 <h1 className="font-bold text-2xl pb-8">User</h1>
                 <div className="form-control">
                     <label className="label">
@@ -120,7 +121,9 @@ export default function FormUserModal(props) {
                         onChange={handleOnChange}
                     />
                     <label className="label">
-                        <span className="label-text-alt">{errors.password}</span>
+                        <span className="label-text-alt">
+                            {errors.password}
+                        </span>
                     </label>
                 </div>
                 <div className="modal-action">
diff --git a/resources/js/Pages/Payrolls/Create.js b/resources/js/Pages/Payrolls/Create.js
index cdf2624..bb2c2c4 100644
--- a/resources/js/Pages/Payrolls/Create.js
+++ b/resources/js/Pages/Payrolls/Create.js
@@ -155,7 +155,11 @@ export default function Create(props) {
                                   >
                                       <img
                                           src={product.photo_url}
-                                          style={{ height: '100px' }}
+                                          style={{
+                                              height: '100px',
+                                              objectFit: 'cover',
+                                              width: '100%',
+                                          }}
                                       />
                                       <div className="p-4 flex flex-col justify-items-center items-center space-y-4">
                                           <div className="font-bold text-center">
@@ -317,7 +321,9 @@ export default function Create(props) {
                               <div className="grid grid-cols-2 gap-2 w-full">
                                   <div
                                       className="btn btn-primary"
-                                      disabled={processing}
+                                      disabled={
+                                          !processing ? (data.employee_id === null || data.items.length === 0) : processing
+                                      }
                                       onClick={handleSubmit}
                                   >
                                       Simpan
@@ -326,7 +332,9 @@ export default function Create(props) {
                                       trigger={() => (
                                           <div
                                               className="btn btn-primary"
-                                              disabled={processing}
+                                              disabled={
+                                                  (data.employee_id === null || data.items.length === 0)
+                                              }
                                           >
                                               Cetak
                                           </div>
@@ -339,16 +347,17 @@ export default function Create(props) {
                   </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} />
+                  <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>
diff --git a/resources/js/Pages/Payrolls/Edit.js b/resources/js/Pages/Payrolls/Edit.js
index 6747440..ba67bd1 100644
--- a/resources/js/Pages/Payrolls/Edit.js
+++ b/resources/js/Pages/Payrolls/Edit.js
@@ -172,7 +172,11 @@ export default function Edit(props) {
                                     >
                                         <img
                                             src={product.photo_url}
-                                            style={{ height: '100px' }}
+                                            style={{
+                                                height: '100px',
+                                                objectFit: 'cover',
+                                                width: '100%',
+                                            }}
                                         />
                                         <div className="p-4 flex flex-col justify-items-center items-center space-y-4">
                                             <div className="font-bold text-center">
diff --git a/resources/js/Pages/Payrolls/Print.js b/resources/js/Pages/Payrolls/Print.js
index 393e52a..7a4a58f 100644
--- a/resources/js/Pages/Payrolls/Print.js
+++ b/resources/js/Pages/Payrolls/Print.js
@@ -1,5 +1,4 @@
 import React from 'react'
-import { Head } from '@inertiajs/inertia-react'
 import { formatDate, formatIDR } from '@/utils'
 
 const Td = ({ children, colSpan, className }) => {
@@ -14,7 +13,6 @@ 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>
diff --git a/tailwind.config.js b/tailwind.config.js
index 94ce802..d674039 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -16,5 +16,11 @@ module.exports = {
         },
     },
 
+    daisyui: {
+        styled: true,
+        themes: false,
+        rtl: false,
+    },
+
     plugins: [require('@tailwindcss/forms'), require('daisyui')],
 }