From 95fcd51b176c3a9e9c31b7c78577dc7fbf8062f7 Mon Sep 17 00:00:00 2001
From: Theis Gaedigk <theis.gaedigk@icloud.com>
Date: Wed, 27 May 2026 18:15:07 +0200
Subject: [PATCH] enhanced design

---
 frontend/src/pages/Inventory.tsx   |   2 +-
 frontend/src/pages/ViewProduct.tsx | 291 ++++++++++++++++++++---------
 2 files changed, 201 insertions(+), 92 deletions(-)

diff --git a/frontend/src/pages/Inventory.tsx b/frontend/src/pages/Inventory.tsx
index 2d617af..6930358 100644
--- a/frontend/src/pages/Inventory.tsx
+++ b/frontend/src/pages/Inventory.tsx
@@ -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) =>
diff --git a/frontend/src/pages/ViewProduct.tsx b/frontend/src/pages/ViewProduct.tsx
index 4821430..6313703 100644
--- a/frontend/src/pages/ViewProduct.tsx
+++ b/frontend/src/pages/ViewProduct.tsx
@@ -7,6 +7,9 @@ import {
   Option,
   Input,
   Button,
+  Chip,
+  Divider,
+  Box,
 } from "@mui/joy";
 import { useTranslation } from "react-i18next";
 import { useEffect } from "react";
@@ -93,105 +96,211 @@ export const ViewProduct = (props: ViewProductProps) => {
 
   return (
     <>
-      <Typography level="h2">{t("product-details")}</Typography>
-      {productDetailsLoading && <CircularProgress size="sm" />}
+      <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();
             }}
           >
-            <form.Field name="name">
-              {(field) => (
-                <Input
-                  type="text"
-                  value={field.state.value}
-                  onChange={(e) => field.handleChange(e.target.value)}
-                  onBlur={field.handleBlur}
-                />
-              )}
-            </form.Field>
-            <form.Field name="description">
-              {(field) => (
-                <Input
-                  type="text"
-                  value={field.state.value}
-                  onChange={(e) => field.handleChange(e.target.value)}
-                  onBlur={field.handleBlur}
-                />
-              )}
-            </form.Field>
-            {t("expiry-date")}
-            <form.Field name="expiry_date">
-              {(field) => (
-                <Input
-                  type="date"
-                  value={field.state.value}
-                  onChange={(e) => field.handleChange(e.target.value)}
-                  onBlur={field.handleBlur}
-                />
-              )}
-            </form.Field>
-            {t("bottling-date")}
-            <form.Field name="bottling_date">
-              {(field) => (
-                <Input
-                  type="date"
-                  value={field.state.value}
-                  onChange={(e) => field.handleChange(e.target.value)}
-                  onBlur={field.handleBlur}
-                />
-              )}
-            </form.Field>
-            <form.Field name="amount">
-              {(field) => (
-                <Input
-                  type="number"
-                  color="neutral"
-                  id="amountInput"
-                  placeholder={t("amount")}
-                  value={field.state.value}
-                  variant="soft"
-                  onChange={(e) => {
-                    const nextValue = Number(e.target.value);
-                    field.handleChange(Number.isNaN(nextValue) ? 0 : nextValue);
-                  }}
-                  onBlur={field.handleBlur}
-                />
-              )}
-            </form.Field>
-            <form.Field name="price">
-              {(field) => (
-                <Input
-                  type="text"
-                  value={field.state.value}
-                  onChange={(e) => field.handleChange(e.target.value)}
-                  onBlur={field.handleBlur}
-                />
-              )}
-            </form.Field>
-            {t("currency")}
-            <form.Field name="storage_location_uuid">
-              {(field) => (
-                <Select
-                  value={field.state.value}
-                  onChange={(_event, value) => field.handleChange(value ?? "")}
-                >
-                  {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}>
-              {t("save")}
-            </Button>
+            <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
+                        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 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
+                        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 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
+                          type="date"
+                          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
+                          type="date"
+                          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
+                            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>
-        </>
+        </Box>
       )}
     </>
   );