theis.gaedigk/stockhome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

added design to storage table

Browse Source
This commit is contained in:
Theis Gaedigk
2026-05-29 18:01:47 +02:00
parent 214941ed7a
commit 67b46a759d
3 changed files with 107 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/StorageRow.tsx
+33 -17
View File
@@ -44,7 +44,7 @@ export const StorageRow = ({ storage }: StorageRowProps) => {
(values.description ?? "") !== (storage.description ?? "");
return (
<tr key={storage.uuid}>
<tr key={storage.uuid} className="align-top">
<td>
<form.Field name="name">
{(field) => (
@@ -53,6 +53,8 @@ export const StorageRow = ({ storage }: StorageRowProps) => {
onChange={(e) => field.handleChange(e.target.value)}
onBlur={field.handleBlur}
size="sm"
variant="outlined"
className="rounded-xl bg-white/90 shadow-[0_8px_18px_rgba(15,23,42,0.06)]"
/>
)}
</form.Field>
@@ -65,27 +67,41 @@ export const StorageRow = ({ storage }: StorageRowProps) => {
onChange={(e) => field.handleChange(e.target.value)}
onBlur={field.handleBlur}
size="sm"
variant="outlined"
className="rounded-xl bg-white/90 shadow-[0_8px_18px_rgba(15,23,42,0.06)]"
/>
)}
</form.Field>
</td>
<td>{formatDate(storage.created_at)}</td>
<td>{formatDate(storage.updated_at)}</td>
<td className="text-sm text-slate-500">
{formatDate(storage.created_at)}
</td>
<td className="text-sm text-slate-500">
{formatDate(storage.updated_at)}
</td>
<td>
<Button
color="primary"
onClick={form.handleSubmit}
disabled={!isDirty || mutation.isPending || deleteMutation.isPending}
>
{mutation.isPending ? "..." : "Save"}
</Button>
<Button
color="danger"
onClick={() => deleteMutation.mutateAsync(storage.uuid)}
disabled={mutation.isPending || deleteMutation.isPending}
>
{deleteMutation.isPending ? "..." : "Delete"}
</Button>
<div className="flex flex-wrap justify-end gap-2">
<Button
color="primary"
onClick={form.handleSubmit}
disabled={
!isDirty || mutation.isPending || deleteMutation.isPending
}
size="sm"
className="rounded-xl"
>
{mutation.isPending ? "..." : "Save"}
</Button>
<Button
color="danger"
onClick={() => deleteMutation.mutateAsync(storage.uuid)}
disabled={mutation.isPending || deleteMutation.isPending}
size="sm"
className="rounded-xl"
>
{deleteMutation.isPending ? "..." : "Delete"}
</Button>
</div>
</td>
</tr>
);
frontend/src/components/modals/AddStorageModal.tsx
+24 -6
View File
@@ -59,16 +59,20 @@ export const AddStorageModal = (props: AddStorageModalProps) => {
return (
<>
<Modal open={props.isOpen} onClose={() => props.setOpen(false)}>
<ModalDialog>
<DialogTitle>{t("new-storage-title")}</DialogTitle>
<DialogContent>{t("new-storage-content")}</DialogContent>
<ModalDialog className="rounded-3xl border border-white/70 bg-white/90 p-6 shadow-[0_30px_70px_rgba(12,38,78,0.2)] backdrop-blur">
<DialogTitle className="text-slate-900">
{t("new-storage-title")}
</DialogTitle>
<DialogContent className="text-slate-500">
{t("new-storage-content")}
</DialogContent>
<form
onSubmit={(e) => {
e.preventDefault();
form.handleSubmit();
}}
>
<Stack>
<Stack spacing={2} className="mt-4">
<form.Field name="name">
{(field) => (
<Input
@@ -76,6 +80,8 @@ export const AddStorageModal = (props: AddStorageModalProps) => {
onChange={(e) => field.handleChange(e.target.value)}
placeholder={t("storage-name")}
variant="outlined"
size="lg"
className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
/>
)}
</form.Field>
@@ -86,14 +92,26 @@ export const AddStorageModal = (props: AddStorageModalProps) => {
onChange={(e) => field.handleChange(e.target.value)}
placeholder={t("description")}
variant="outlined"
size="lg"
className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
/>
)}
</form.Field>
<Button type="submit">{t("submit")}</Button>
<Button
type="submit"
size="lg"
className="rounded-2xl bg-[#0b6bcb] text-white shadow-[0_16px_36px_rgba(11,107,203,0.35)] transition hover:-translate-y-0.5 hover:bg-[#095aa7]"
>
{t("submit")}
</Button>
</Stack>
</form>
{alert.isAlert && (
<Alert variant="soft" color={alert.type}>
<Alert
variant="soft"
color={alert.type}
className="mt-4 rounded-2xl border border-rose-200/70 bg-rose-50/80 text-rose-700 shadow-[0_12px_30px_rgba(220,38,38,0.12)]"
>
{alert.header}
<br />
{alert.text}