import React, {useEffect, useRef, useState} from 'react'; import {Inertia} from '@inertiajs/inertia'; import {Head, router, usePage} from '@inertiajs/react'; import NewRoomModal from '@/Components/modals/NewRoomModal'; import EditRoomModal from '@/Components/modals/EditRoomModal'; import axios from "axios"; import {Toaster} from "react-hot-toast"; import AppLayout from "@/Layouts/AppLayout"; import BatchInfoWindow from "@/Components/BatchInfoWindow"; export default function StorageSetup() { const {rooms} = usePage<{ rooms: any[] }>().props; const [showNew, setShowNew] = useState(false); const [editingRoom, setEditingRoom] = useState(null); // Modal ref const dialogRef = useRef(null); const openModal = () => dialogRef.current?.showModal(); const closeModal = () => dialogRef.current?.close(); return (

Storage setup

}>

Rooms

{rooms.map(room => (
{setEditingRoom(room); openModal();}} >

{room.room_name}

{room.room_symbol}

))} {rooms.length === 0 && (

No rooms defined yet.

)}
{showNew && ( {setShowNew(false); closeModal();}} onSaved={() => { Inertia.reload(); setShowNew(false); }} /> )} {editingRoom && ( {setEditingRoom(null); closeModal();}} onUpdated={() => { Inertia.reload(); setEditingRoom(null); }} /> )}
); }