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

enhanced design

Browse Source
This commit is contained in:
Theis Gaedigk
2026-05-27 18:15:07 +02:00
parent 11b490b2e5
commit 95fcd51b17
2 changed files with 201 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Inventory.tsx
+1 -1
View File
@@ -361,7 +361,7 @@ export const InventoryPage = () => {
<Table <Table
aria-labelledby="tableTitle" aria-labelledby="tableTitle"
hoverRow hoverRow
className="min-w-[960px] text-slate-700" className="min-w-240 text-slate-700"
sx={{ sx={{
"--TableCell-headBackground": "transparent", "--TableCell-headBackground": "transparent",
"--TableCell-selectedBackground": (theme) => "--TableCell-selectedBackground": (theme) =>
frontend/src/pages/ViewProduct.tsx
+200 -91
View File
@@ -7,6 +7,9 @@ import {
Option, Option,
Input, Input,
Button, Button,
Chip,
Divider,
Box,
} from "@mui/joy"; } from "@mui/joy";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useEffect } from "react"; import { useEffect } from "react";
@@ -93,105 +96,211 @@ export const ViewProduct = (props: ViewProductProps) => {
return ( return (
<> <>
<Typography level="h2">{t("product-details")}</Typography> <div className="space-y-6">
{productDetailsLoading && <CircularProgress size="sm" />} <div className="flex flex-wrap items-center gap-3">
<div className="space-y-1">
<Typography level="h2" className="text-slate-900">
{t("product-details")}
</Typography>
<Typography level="body-lg" className="text-slate-500">
{t("inventory-header")}
</Typography>
</div>
<Chip
variant="soft"
color="primary"
className="ml-auto rounded-full px-3"
>
{t("details")}
</Chip>
</div>
{productDetailsLoading && <CircularProgress size="sm" />}
</div>
{isSuccess && ( {isSuccess && (
<> <Box className="mt-6 rounded-3xl border border-white/70 bg-white/80 p-6 shadow-[0_24px_60px_rgba(12,38,78,0.12)] backdrop-blur">
<form <form
className="space-y-6"
onSubmit={(e) => { onSubmit={(e) => {
e.preventDefault(); e.preventDefault();
form.handleSubmit(); form.handleSubmit();
}} }}
> >
<form.Field name="name"> <div className="grid gap-5 lg:grid-cols-[1.2fr_1fr]">
{(field) => ( <div className="space-y-4">
<Input <div className="space-y-1">
type="text" <Typography level="title-md" className="text-slate-900">
value={field.state.value} {t("product-name")}
onChange={(e) => field.handleChange(e.target.value)} </Typography>
onBlur={field.handleBlur} <form.Field name="name">
/> {(field) => (
)} <Input
</form.Field> type="text"
<form.Field name="description"> value={field.state.value}
{(field) => ( onChange={(e) => field.handleChange(e.target.value)}
<Input onBlur={field.handleBlur}
type="text" size="lg"
value={field.state.value} variant="outlined"
onChange={(e) => field.handleChange(e.target.value)} className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
onBlur={field.handleBlur} />
/> )}
)} </form.Field>
</form.Field> </div>
{t("expiry-date")} <div className="space-y-1">
<form.Field name="expiry_date"> <Typography level="title-md" className="text-slate-900">
{(field) => ( {t("description")}
<Input </Typography>
type="date" <form.Field name="description">
value={field.state.value} {(field) => (
onChange={(e) => field.handleChange(e.target.value)} <Input
onBlur={field.handleBlur} type="text"
/> value={field.state.value}
)} onChange={(e) => field.handleChange(e.target.value)}
</form.Field> onBlur={field.handleBlur}
{t("bottling-date")} size="lg"
<form.Field name="bottling_date"> variant="outlined"
{(field) => ( className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
<Input />
type="date" )}
value={field.state.value} </form.Field>
onChange={(e) => field.handleChange(e.target.value)} </div>
onBlur={field.handleBlur} <div className="grid gap-4 md:grid-cols-2">
/> <div className="space-y-1">
)} <Typography level="title-md" className="text-slate-900">
</form.Field> {t("expiry-date")}
<form.Field name="amount"> </Typography>
{(field) => ( <form.Field name="expiry_date">
<Input {(field) => (
type="number" <Input
color="neutral" type="date"
id="amountInput" value={field.state.value}
placeholder={t("amount")} onChange={(e) => field.handleChange(e.target.value)}
value={field.state.value} onBlur={field.handleBlur}
variant="soft" size="lg"
onChange={(e) => { variant="outlined"
const nextValue = Number(e.target.value); className="rounded-2xl bg-white/90"
field.handleChange(Number.isNaN(nextValue) ? 0 : nextValue); />
}} )}
onBlur={field.handleBlur} </form.Field>
/> </div>
)} <div className="space-y-1">
</form.Field> <Typography level="title-md" className="text-slate-900">
<form.Field name="price"> {t("bottling-date")}
{(field) => ( </Typography>
<Input <form.Field name="bottling_date">
type="text" {(field) => (
value={field.state.value} <Input
onChange={(e) => field.handleChange(e.target.value)} type="date"
onBlur={field.handleBlur} value={field.state.value}
/> onChange={(e) => field.handleChange(e.target.value)}
)} onBlur={field.handleBlur}
</form.Field> size="lg"
{t("currency")} variant="outlined"
<form.Field name="storage_location_uuid"> className="rounded-2xl bg-white/90"
{(field) => ( />
<Select )}
value={field.state.value} </form.Field>
onChange={(_event, value) => field.handleChange(value ?? "")} </div>
> </div>
{storages?.map((storage: { uuid: string; name: string }) => ( </div>
<Option key={storage.uuid} value={storage.uuid}> <div className="space-y-4">
{storage.name} <div className="rounded-2xl border border-white/70 bg-linear-to-br from-[#f7fbff] via-[#f2f6fb] to-[#eef3f9] p-5 shadow-[0_16px_40px_rgba(12,38,78,0.08)]">
</Option> <Typography level="title-md" className="text-slate-900">
))} {t("inventory")}
</Select> </Typography>
)} <Divider className="my-3" />
</form.Field> <div className="grid gap-4">
<Button type="submit" loading={isPending}> <div className="space-y-1">
{t("save")} <Typography level="title-md" className="text-slate-900">
</Button> {t("amount")}
</Typography>
<form.Field name="amount">
{(field) => (
<Input
type="number"
color="neutral"
id="amountInput"
placeholder={t("amount")}
value={field.state.value}
variant="soft"
size="lg"
onChange={(e) => {
const nextValue = Number(e.target.value);
field.handleChange(
Number.isNaN(nextValue) ? 0 : nextValue,
);
}}
onBlur={field.handleBlur}
className="rounded-2xl bg-white/80"
/>
)}
</form.Field>
</div>
<div className="space-y-1">
<Typography level="title-md" className="text-slate-900">
{t("price")}
</Typography>
<form.Field name="price">
{(field) => (
<Input
type="text"
value={field.state.value}
onChange={(e) => field.handleChange(e.target.value)}
onBlur={field.handleBlur}
size="lg"
variant="outlined"
className="rounded-2xl bg-white/90"
/>
)}
</form.Field>
<Typography level="body-sm" className="text-slate-500">
{t("currency")}
</Typography>
</div>
<div className="space-y-1">
<Typography level="title-md" className="text-slate-900">
{t("storage-place")}
</Typography>
<form.Field name="storage_location_uuid">
{(field) => (
<Select
value={field.state.value}
onChange={(_event, value) =>
field.handleChange(value ?? "")
}
size="lg"
variant="outlined"
className="rounded-2xl bg-white/90"
>
{storages?.map(
(storage: { uuid: string; name: string }) => (
<Option key={storage.uuid} value={storage.uuid}>
{storage.name}
</Option>
),
)}
</Select>
)}
</form.Field>
</div>
</div>
</div>
</div>
</div>
<div className="flex flex-wrap items-center justify-between gap-3">
<Typography level="body-sm" className="text-slate-500">
{t("product-details")}
</Typography>
<Button
type="submit"
loading={isPending}
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("save")}
</Button>
</div>
</form> </form>
</> </Box>
)} )}
</> </>
); );