update patch

app/Http/Controllers/SantriController.php

@@ -13,13 +13,10 @@ class SantriController extends Controller
      */
     public function index()
     {
-        $santri = Santri::all(); // Ambil semua data santri
+        $santri = Santri::all();
-        return Inertia::render('list-admin/santri/IndexSantri', compact('santri')); // Sesuaikan path
+        return Inertia::render('list-admin/santri/IndexSantri', compact('santri'));
-    }
-    public function create()
-    {
-        //
     }
+    public function create() {}
 
     /**
      * Store a newly created resource in storage.

package-lock.json

@@ -11,6 +11,7 @@
                 "@vitejs/plugin-react": "^4.2.0",
                 "autoprefixer": "^10.4.12",
                 "axios": "^1.1.2",
+                "daisyui": "^4.12.23",
                 "laravel-vite-plugin": "^0.7.2",
                 "postcss": "^8.4.31",
                 "react": "^18.2.0",
@@ -1234,6 +1235,16 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/css-selector-tokenizer": {
+            "version": "0.8.0",
+            "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
+            "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
+            "dev": true,
+            "dependencies": {
+                "cssesc": "^3.0.0",
+                "fastparse": "^1.1.2"
+            }
+        },
         "node_modules/cssesc": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1246,6 +1257,34 @@
                 "node": ">=4"
             }
         },
+        "node_modules/culori": {
+            "version": "3.3.0",
+            "resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
+            "integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==",
+            "dev": true,
+            "engines": {
+                "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+            }
+        },
+        "node_modules/daisyui": {
+            "version": "4.12.23",
+            "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.23.tgz",
+            "integrity": "sha512-EM38duvxutJ5PD65lO/AFMpcw+9qEy6XAZrTpzp7WyaPeO/l+F/Qiq0ECHHmFNcFXh5aVoALY4MGrrxtCiaQCQ==",
+            "dev": true,
+            "dependencies": {
+                "css-selector-tokenizer": "^0.8",
+                "culori": "^3",
+                "picocolors": "^1",
+                "postcss-js": "^4"
+            },
+            "engines": {
+                "node": ">=16.9.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/daisyui"
+            }
+        },
         "node_modules/debug": {
             "version": "4.4.0",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
@@ -1429,6 +1468,12 @@
                 "node": ">= 6"
             }
         },
+        "node_modules/fastparse": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
+            "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
+            "dev": true
+        },
         "node_modules/fastq": {
             "version": "1.18.0",
             "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.18.0.tgz",

package.json

@@ -11,6 +11,7 @@
         "@vitejs/plugin-react": "^4.2.0",
         "autoprefixer": "^10.4.12",
         "axios": "^1.1.2",
+        "daisyui": "^4.12.23",
         "laravel-vite-plugin": "^0.7.2",
         "postcss": "^8.4.31",
         "react": "^18.2.0",

resources/js/Components/Modal.jsx

@@ -1,57 +0,0 @@
-import { Fragment } from 'react';
-import { Dialog, Transition } from '@headlessui/react';
-
-export default function Modal({ children, show = false, maxWidth = '2xl', closeable = true, onClose = () => {} }) {
-    const close = () => {
-        if (closeable) {
-            onClose();
-        }
-    };
-
-    const maxWidthClass = {
-        sm: 'sm:max-w-sm',
-        md: 'sm:max-w-md',
-        lg: 'sm:max-w-lg',
-        xl: 'sm:max-w-xl',
-        '2xl': 'sm:max-w-2xl',
-    }[maxWidth];
-
-    return (
-        <Transition show={show} as={Fragment} leave="duration-200">
-            <Dialog
-                as="div"
-                id="modal"
-                className="fixed inset-0 flex overflow-y-auto px-4 py-6 sm:px-0 items-center z-50 transform transition-all"
-                onClose={close}
-            >
-                <Transition.Child
-                    as={Fragment}
-                    enter="ease-out duration-300"
-                    enterFrom="opacity-0"
-                    enterTo="opacity-100"
-                    leave="ease-in duration-200"
-                    leaveFrom="opacity-100"
-                    leaveTo="opacity-0"
-                >
-                    <div className="absolute inset-0 bg-gray-500/75" />
-                </Transition.Child>
-
-                <Transition.Child
-                    as={Fragment}
-                    enter="ease-out duration-300"
-                    enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                    enterTo="opacity-100 translate-y-0 sm:scale-100"
-                    leave="ease-in duration-200"
-                    leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                    leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                >
-                    <Dialog.Panel
-                        className={`mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto ${maxWidthClass}`}
-                    >
-                        {children}
-                    </Dialog.Panel>
-                </Transition.Child>
-            </Dialog>
-        </Transition>
-    );
-}

resources/js/Components/ModalInput.jsx

@@ -0,0 +1,61 @@
+import React, { useState } from "react"
+import { Inertia } from "@inertiajs/inertia"
+
+const ModalInput = () => {
+    const [status, setStatus] = useState('')
+    const [role, setRole] = useState('')
+    const [gender, setGender] = useState('')
+
+    const handleSubmit = () => {
+        const data = {
+            nama, alamat, status, role, jk, ttl
+        }
+
+        Inertia.post('/addSantri', data)
+    }
+
+    return (
+        <div>
+            <label htmlFor="my_modal_7" className="btn">open modal</label>
+            <form action="" method="post" encType="multipart/form-data">
+                <input type="checkbox" id="my_modal_7" className="modal-toggle" />
+                <div className="modal" role="dialog">
+                    <div className="modal-box">
+                        <h2 className="font-bold text-lg text-center mb-5">Add Santri</h2>
+                        <label className="input input-bordered input-secondary flex items-center gap-2 mb-2">
+                            Name
+                            <input type="text" name="nama" className="grow border-none focus:ring-0 " placeholder="Daisy" />
+                        </label>
+                        <label className="input input-bordered input-secondary flex items-center gap-2 mb-2">
+                            Alamat
+                            <input type="text" name="alamat" className="grow border-none focus:ring-0 " placeholder="Daisy" />
+                        </label>
+                        <select value={status} onChange={(e) => setStatus(e.target.value)} className="select select-bordered w-full select-secondary mb-2" name="status">
+                            <option disabled value="">Pilih Status</option>
+                            <option value={"boyong"}>Boyong</option>
+                            <option value={"aktif"}>Aktif</option>
+                        </select>
+                        <select value={role} onChange={(e) => setRole(e.target.value)} className="select select-bordered w-full select-secondary mb-2" name="role">
+                            <option disabled value={""}>Pilih Role Santri</option>
+                            <option value={"laki laki"}>Santri</option>
+                            <option value={"perempuan"}>Pengurus</option>
+                        </select>
+                        <select value={gender} onChange={(e) => setGender(e.target.value)} className="select select-bordered w-full select-secondary mb-2" name="gender">
+                            <option disabled value={""}>Pilih Gender</option>
+                            <option value={"laki laki"}>Laki Laki</option>
+                            <option value={"perempuan"}>Perempuan</option>
+                        </select>
+                        <label className="input input-bordered input-secondary flex items-center gap-2 mb-2">
+                            Tanggal Lahir
+                            <input type="date" name="ttl" className="grow border-none focus:ring-0 " placeholder="Daisy" />
+                        </label>
+                        <button typeof="submit" onClick={() => handleSubmit()} className="btn btn-secondary">Add Santri</button>
+                    </div>
+                    <label className="modal-backdrop" htmlFor="my_modal_7">Close</label>
+                </div>
+            </form>
+        </div>
+    )
+}
+
+export default ModalInput

resources/js/Pages/Profile/Partials/DeleteUserForm.jsx

@@ -2,7 +2,7 @@ import { useRef, useState } from 'react';
 import DangerButton from '@/Components/DangerButton';
 import InputError from '@/Components/InputError';
 import InputLabel from '@/Components/InputLabel';
-import Modal from '@/Components/Modal';
+import Modal from '@/Components/ModalInput';
 import SecondaryButton from '@/Components/SecondaryButton';
 import TextInput from '@/Components/TextInput';
 import { useForm } from '@inertiajs/react';

resources/js/Pages/list-admin/santri/IndexSantri.jsx

@@ -1,24 +1,27 @@
-import React from 'react';
+import React from 'react'
-import { Head } from '@inertiajs/react';
+import { Head } from '@inertiajs/react'
+import ModalInput from '@/Components/ModalInput'
 
 export default function IndexSantri({ santri }) {
-    console.log('Data Santri:', santri);
     return (
         <div className="text-red-900">
             <Head title="Daftar Santri" />
             <h1>Daftar Santri</h1>
-            {santri.map((item) => (
+            <ModalInput />
-                <div key={item.id}>
+            {santri ? santri.map((item, i) => {
-                    <p>Nama: {item.nama}</p>
+                return (
-                    <p>Alamat: {item.alamat}</p>
+                    <div key={i}>
-                    <p>Status: {item.status_santri}</p>
+                        <p>Nama: {item.nama}</p>
-                    <p>Role: {item.role_santri}</p>
+                        <p>Alamat: {item.alamat}</p>
-                    <p>Jenis Kelamin: {item.jk}</p>
+                        <p>Status: {item.status_santri}</p>
-                    <p>Tanggal Lahir: {item.tanggal_lahir}</p>
+                        <p>Role: {item.role_santri}</p>
-                    <p>Foto: {item.foto}</p>
+                        <p>Jenis Kelamin: {item.jk}</p>
-                    <hr />
+                        <p>Tanggal Lahir: {item.tanggal_lahir}</p>
-                </div>
+                        <p>Foto: {item.foto}</p>
-            ))}
+                        <hr />
+                    </div>
+                )
+            }) : ""}
         </div>
     );
 }

routes/web.php

@@ -27,6 +27,7 @@
 });
 
 Route::get('/data-santri', [SantriController::class, 'index'])->name('indexSantri');
+Route::post('/addSantri', [SantriController::class, 'store'])->name('storeSantri');
 
 Route::get('/dashboard', function () {
     return Inertia::render('Dashboard');

tailwind.config.js

@@ -18,5 +18,12 @@ export default {
         },
     },
 
-    plugins: [forms],
+    plugins: [
+        forms,
+        require('daisyui'),
+    ],
+
+    daisyui: {
+        themes: ['light']
+    }
 };