95 lines
4.3 KiB
TypeScript
95 lines
4.3 KiB
TypeScript
import React, {useEffect, useState} from "react";
|
|
import axios from "axios";
|
|
import {Head} from "@inertiajs/react";
|
|
import {Toaster} from "react-hot-toast";
|
|
import AppLayout from "@/Layouts/AppLayout";
|
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
|
import {faCircleXmark, faSquareCheck} from "@fortawesome/free-solid-svg-icons";
|
|
|
|
export default function ShippingBatchList() {
|
|
const [batches, setBatches] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
axios
|
|
.get("/api/batchListWMS")
|
|
.then((response) => {
|
|
console.log(response.data.batches);
|
|
setBatches(response.data.batches);
|
|
setLoading(false);
|
|
})
|
|
.catch((error) => {
|
|
console.error("Error fetching batches:", error);
|
|
setLoading(false);
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<AppLayout
|
|
title="Expedice batches"
|
|
renderHeader={() => (
|
|
<h2 className="font-semibold text-xl">Expedice batches</h2>
|
|
)}
|
|
>
|
|
<Head title="Expedice batches"/>
|
|
<Toaster position="top-center"/>
|
|
|
|
<div className="p-4">
|
|
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
|
|
|
{loading ? (
|
|
<div className="p-4">Loading...</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="table">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Carrier</th>
|
|
<th>Results</th>
|
|
<th>Created At</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{batches.filter(b => b.item_count > 0).map((batch) => (
|
|
<tr key={batch.id} onClick={() => window.location.href = `/expedice/${batch.id}`}>
|
|
<td>{batch.id}</td>
|
|
<td>
|
|
<div className="flex gap-3 items-center">
|
|
<div className="avatar">
|
|
<div className="w-8 rounded-2">
|
|
<img
|
|
src={`https://www.dalkove-ovladace.cz/includes/templates/vat_responsive/images/shipping/small_icons/${batch.carrier_master.img}`}/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
{batch.carrier_master.shortname}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div className="flex gap-4 flex-col">
|
|
<div className="flex gap-3 items-center text-green-500">
|
|
<FontAwesomeIcon icon={faSquareCheck} />
|
|
{batch.item_count}
|
|
</div>
|
|
|
|
<div className="flex gap-3 items-center text-red-400">
|
|
<FontAwesomeIcon icon={faCircleXmark} />
|
|
{batch.error_count}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>{batch.created_at}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
}
|