update firebase template & upload picture

.gitignore

@@ -1,4 +1,5 @@
 /node_modules
+/public/image
 /public/build
 /public/hot
 /public/storage

app/Http/Controllers/GeneralController.php

@@ -3,6 +3,7 @@
 namespace App\Http\Controllers;
 
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Storage;
 use Inertia\Inertia;
 
 class GeneralController extends Controller
@@ -46,4 +47,16 @@ class GeneralController extends Controller
     {
         return Inertia::render('Gaji/UserGaji');
     }
+
+    public function uploadImage(Request $request)
+    {
+        $request->validate([
+            'profile' => 'required|image'
+        ]);
+
+        $file = $request->file('profile');
+        Storage::disk('public_pub')->put('image', $file);
+
+        return response()->json(['file_name' => $file->hashName()]);
+    }
 }

config/filesystems.php

@@ -36,6 +36,14 @@ return [
             'throw' => false,
         ],
 
+        'public_pub' => [
+            'driver' => 'local',
+            'root' => base_path('public'),
+            'url' => env('APP_URL'),
+            'visibility' => 'public',
+            'throw' => false,
+        ],
+
         'public' => [
             'driver' => 'local',
             'root' => storage_path('app/public'),

resources/js/Pages/Auth/Login.jsx

@@ -30,6 +30,11 @@ export default function Login({ status, canResetPassword }) {
                 username: user.username,
                 password: user.password,
                 is_admin: user.is_admin,
+                profile: user.profile,
+                jenisKelamin: user.jenisKelamin,
+                jabatan: user.jabatan.nama,
+                created_at: user.created_at,
+                status: user.status,
                 id: user.id
             })
         } else {
@@ -63,6 +68,7 @@ export default function Login({ status, canResetPassword }) {
                     jenisKelamin: "Laki-Laki",
                     status: "Karyawan Tetap",
                     is_admin: "true",
+                    created_at: new Date()
                 })
             }
         })

resources/js/Pages/Dashboard.jsx

@@ -1,8 +1,14 @@
 import React from 'react';
 import Authenticated from '@/Layouts/Authenticated';
 import { Head } from '@inertiajs/inertia-react';
+import { asset } from '@/Utils';
 
 export default function Dashboard(props) {
+    const user = props.auth.user
+
+    const created_at = new Date(user.created_at.seconds*1000)
+    const tglMasuk = `${created_at.getDate()}-${created_at.getMonth()}-${created_at.getFullYear()}`
+
     return (
         <Authenticated
             auth={props.auth}
@@ -13,10 +19,49 @@ export default function Dashboard(props) {
             <div className="py-0">
                 <div className="max-w-7xl sm:px-6">
                     <div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
-                        <div className="p-6 bg-white border-b border-gray-200">Hai, {props.auth.user.name}</div>
+                        <div className="p-6 bg-white border-b border-gray-200">Hai, {user.name}</div>
+                    </div>
+                    {props.auth.user.name != 'admin' ? (
+                        <div className="bg-white overflow-hidden shadow-sm sm:rounded-lg mt-1">
+                            <div className="p-6 bg-white border-b border-gray-200">
+                                <p className='font-bold'>Data Pegawai</p>
+                                <div className='flex flex-col md:flex-row space-x-1'>
+                                    <div className='w-full md:w-1/3'>
+                                        <img src={`${asset(user.profile)}`} />
+                                    </div>
+                                    <div>
+                                        <table className='w-full text-left text-gray-500 dark:text-gray-400'>
+                                            <tbody>
+                                                <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+                                                    <td className='px-6 py-4 font-bold'>Nama</td>
+                                                    <td className='px-6 py-4'>{user.name}</td>
+                                                </tr>
+                                                <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+                                                    <td className='px-6 py-4 font-bold'>Jenis Kelamin</td>
+                                                    <td className='px-6 py-4'>{user.jenisKelamin}</td>
+                                                </tr>
+                                                <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+                                                    <td className='px-6 py-4 font-bold'>Jabatan</td>
+                                                    <td className='px-6 py-4'>{user.jabatan}</td>
+                                                </tr>
+                                                <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+                                                    <td className='px-6 py-4 font-bold'>Tanggal Masuk</td>
+                                                    <td className='px-6 py-4'>{tglMasuk}</td>
+                                                </tr>
+                                                <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+                                                    <td className='px-6 py-4 font-bold'>Status</td>
+                                                    <td className='px-6 py-4'>{user.status}</td>
+                                                </tr>
+                                            </tbody>
+                                        </table>
                                     </div>
                                 </div>
                             </div>
+                        </div>
+                    ) : null}
+                    
+                </div>
+            </div>
         </Authenticated>
     );
 }

resources/js/Pages/Karyawan/FormModal.jsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useRef } from 'react'
 import { toast } from 'react-toastify'
 import { Modal } from '@/Components/Modal'
 import { useForm } from '@inertiajs/inertia-react'
 import Button from '@/Components/Button'
 import Input from '@/Components/Input'
-import { create, update } from '@/Services/Karyawan'
+import { create, update, uploadImage } from '@/Services/Karyawan'
 import { getAll as GetAllJabatan } from '@/Services/Jabatan'
 
 export default function FormModal({ modalState, refresh }) {
@@ -17,9 +17,11 @@ export default function FormModal({ modalState, refresh }) {
         jenisKelamin: "Laki-Laki",
         jabatan: '',
         status: 'Karyawan Tetap',
-        is_admin: false
+        is_admin: false,
+        created_at: new Date()
     })
-
+    const [profile, setProfile] = useState(null)
+    const inputProfile = useRef()
     const [jabatans, setJabatans] = useState([])
 
     useEffect(() => {
@@ -29,11 +31,13 @@ export default function FormModal({ modalState, refresh }) {
 
     useEffect(() => {
         if (modalState.isOpen === false) {
+            setProfile(null)
             reset()
             modalState.setData(null)
         }
         if (modalState.data !== null) {
             setData(modalState.data.data)
+            setProfile(modalState.data.data.profile)
         }
     }, [modalState])
 
@@ -61,11 +65,12 @@ export default function FormModal({ modalState, refresh }) {
         })
     }
 
-    const submit = (e) => {
-        e.preventDefault()
-        setLoading(true)
+    const UpdateOrSave = (image) => {
         if (modalState.data !== null) {
-            update(data, modalState.data.id)
+            update({
+                ...data,
+                profile: image
+            }, modalState.data.id)
             .finally(() => {
                 reset()
                 toast.success("berhasil update")
@@ -74,7 +79,10 @@ export default function FormModal({ modalState, refresh }) {
                 refresh()
             })
         } else {
-            create(data)
+            create({
+                ...data,
+                profile: image
+            })
             .then((id) => console.log(id))
             .finally(() => {
                 reset()
@@ -86,6 +94,26 @@ export default function FormModal({ modalState, refresh }) {
         }
     }
 
+    const submit = (e) => {
+        e.preventDefault()
+        setLoading(true)
+        console.log(typeof(profile))
+        if(typeof(profile) != "string") {
+            if (profile == null) {
+                alert('foto profile belum diisi')
+                return
+            }
+            uploadImage(route('upload.image'), profile)
+            .then(image => {
+                console.log(image.file_name)
+                UpdateOrSave(image.file_name)
+            })
+            .catch((err) => console.log(err))
+        } else {
+            UpdateOrSave(profile)
+        }
+    }
+
     return (
         <Modal isOpen={modalState.isOpen} toggleModal={modalState.toggle}>
             <div className="text-lg font-bold">Karyawan</div>
@@ -194,6 +222,27 @@ export default function FormModal({ modalState, refresh }) {
                     ))}
                 </select>
             </label>
+            <label className="block text-sm mt-4">
+                <div className="text-gray-700 dark:text-gray-400">
+                    Photo
+                </div>
+                <Button
+                    onClick={() => {
+                        console.log(inputProfile.current.click())
+                    }}
+                >
+                    {profile ? typeof(profile) == "string" ? `${data.name}.png` : profile.name : 'Choose File'}
+                </Button>
+                <input
+                    type='file'
+                    placeholder="John Doe"
+                    name="profile"
+                    ref={inputProfile}
+                    className="hidden"
+                    onChange={(e) => setProfile(e.target.files[0])}
+                    accept="image/png, image/jpeg, image/jpg"
+                />
+            </label>
             <label className="block text-sm mt-4">
                 <span className="text-gray-700 dark:text-gray-400">
                     Hak Akses

resources/js/Services/Karyawan.js

@@ -32,9 +32,27 @@ async function deleteById(id) {
   return result
 }
 
+async function uploadImage(url = '', profile) {
+  const formData = new FormData();
+
+  formData.append('profile', profile);
+  return await fetch(url, {
+  method: 'POST',
+  body: formData
+  })
+  .then(res => res.json())
+  .then(res => {
+    return res
+  })
+  .catch((error) => {
+    throw error
+  });
+}
+
 export {
   getAll,
   create,
   update,
-  deleteById
+  deleteById,
+  uploadImage
 }

resources/js/Utils/index.js

@@ -2,3 +2,7 @@ export function formatIDR(amount) {
     const idFormatter = new Intl.NumberFormat('id-ID')
     return idFormatter.format(amount)
 }
+
+export function asset(path) {
+    return `${window.location.protocol}/image/${path}`
+}

resources/js/firebase.js.example

@@ -19,3 +19,5 @@ const firebaseConfig = {
 // Initialize Firebase
 const app = initializeApp(firebaseConfig);
 const analytics = getAnalytics(app);
+const defaultFirestore = getFirestore(app)
+export default defaultFirestore

routes/api.php

@@ -2,6 +2,7 @@
 
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
+use App\Http\Controllers\GeneralController;
 
 /*
 |--------------------------------------------------------------------------
@@ -17,3 +18,4 @@ use Illuminate\Support\Facades\Route;
 Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
     return $request->user();
 });
+Route::post('/upload-image', [GeneralController::class, 'uploadImage'])->name('upload.image');