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
aria-labelledby="tableTitle"
hoverRow
className="min-w-[960px] text-slate-700"
className="min-w-240 text-slate-700"
sx={{
"--TableCell-headBackground": "transparent",
"--TableCell-selectedBackground": (theme) =>
frontend/src/pages/ViewProduct.tsx
+117 -8
View File
@@ -7,6 +7,9 @@ import {
Option,
Input,
Button,
Chip,
Divider,
Box,
} from "@mui/joy";
import { useTranslation } from "react-i18next";
import { useEffect } from "react";
@@ -93,16 +96,41 @@ export const ViewProduct = (props: ViewProductProps) => {
return (
<>
<Typography level="h2">{t("product-details")}</Typography>
<div className="space-y-6">
<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 && (
<>
<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
className="space-y-6"
onSubmit={(e) => {
e.preventDefault();
form.handleSubmit();
}}
>
<div className="grid gap-5 lg:grid-cols-[1.2fr_1fr]">
<div className="space-y-4">
<div className="space-y-1">
<Typography level="title-md" className="text-slate-900">
{t("product-name")}
</Typography>
<form.Field name="name">
{(field) => (
<Input
@@ -110,9 +138,17 @@ export const ViewProduct = (props: ViewProductProps) => {
value={field.state.value}
onChange={(e) => field.handleChange(e.target.value)}
onBlur={field.handleBlur}
size="lg"
variant="outlined"
className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
/>
)}
</form.Field>
</div>
<div className="space-y-1">
<Typography level="title-md" className="text-slate-900">
{t("description")}
</Typography>
<form.Field name="description">
{(field) => (
<Input
@@ -120,10 +156,18 @@ export const ViewProduct = (props: ViewProductProps) => {
value={field.state.value}
onChange={(e) => field.handleChange(e.target.value)}
onBlur={field.handleBlur}
size="lg"
variant="outlined"
className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
/>
)}
</form.Field>
</div>
<div className="grid gap-4 md:grid-cols-2">
<div className="space-y-1">
<Typography level="title-md" className="text-slate-900">
{t("expiry-date")}
</Typography>
<form.Field name="expiry_date">
{(field) => (
<Input
@@ -131,10 +175,17 @@ export const ViewProduct = (props: ViewProductProps) => {
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>
</div>
<div className="space-y-1">
<Typography level="title-md" className="text-slate-900">
{t("bottling-date")}
</Typography>
<form.Field name="bottling_date">
{(field) => (
<Input
@@ -142,9 +193,26 @@ export const ViewProduct = (props: ViewProductProps) => {
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>
</div>
</div>
</div>
<div className="space-y-4">
<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)]">
<Typography level="title-md" className="text-slate-900">
{t("inventory")}
</Typography>
<Divider className="my-3" />
<div className="grid gap-4">
<div className="space-y-1">
<Typography level="title-md" className="text-slate-900">
{t("amount")}
</Typography>
<form.Field name="amount">
{(field) => (
<Input
@@ -154,14 +222,23 @@ export const ViewProduct = (props: ViewProductProps) => {
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);
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
@@ -169,29 +246,61 @@ export const ViewProduct = (props: ViewProductProps) => {
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 ?? "")}
onChange={(_event, value) =>
field.handleChange(value ?? "")
}
size="lg"
variant="outlined"
className="rounded-2xl bg-white/90"
>
{storages?.map((storage: { uuid: string; name: string }) => (
{storages?.map(
(storage: { uuid: string; name: string }) => (
<Option key={storage.uuid} value={storage.uuid}>
{storage.name}
</Option>
))}
),
)}
</Select>
)}
</form.Field>
<Button type="submit" loading={isPending}>
</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>
</>
</Box>
)}
</>
);