vat_wms/resources/js/Pages/StorageSetup.tsx

81 lines
3.3 KiB
TypeScript

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<any>(null);
// Modal ref
const dialogRef = useRef<HTMLDialogElement>(null);
const openModal = () => dialogRef.current?.showModal();
const closeModal = () => dialogRef.current?.close();
return (
<AppLayout title="Storage setup" renderHeader={() => <h2 className="font-semibold text-xl">Storage setup</h2>}>
<Head title="Storage setup"/>
<Toaster position="top-center"/>
<div className="py-12">
<div className="p-6">
<div className="flex justify-between items-center mb-4">
<h1 className="text-2xl font-bold">Rooms</h1>
<button onClick={() => {setShowNew(true); openModal();}} className="btn btn-primary">
+ New Room
</button>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
{rooms.map(room => (
<div
key={room.room_id}
className="card p-4 cursor-pointer hover:shadow"
onClick={() => {setEditingRoom(room); openModal();}}
>
<h2 className="text-lg font-medium">{room.room_name}</h2>
<p className="text-sm text-gray-500">{room.room_symbol}</p>
</div>
))}
{rooms.length === 0 && (
<p className="italic text-gray-500">No rooms defined yet.</p>
)}
</div>
</div>
<dialog ref={dialogRef} className="modal">
{showNew && (
<NewRoomModal
onClose={() => {setShowNew(false); closeModal();}}
onSaved={() => {
Inertia.reload();
setShowNew(false);
}}
/>
)}
{editingRoom && (
<EditRoomModal
room={editingRoom}
onClose={() => {setEditingRoom(null); closeModal();}}
onUpdated={() => {
Inertia.reload();
setEditingRoom(null);
}}
/>
)}
</dialog>
</div>
</AppLayout>
);
}