refactor: add custom alert component and remove all other Alert standard components in all components

This commit is contained in:
2026-07-09 11:23:41 +02:00
parent 925cb73c47
commit ef905fb30b
13 changed files with 213 additions and 222 deletions
+17 -11
View File
@@ -1,11 +1,12 @@
import { useForm } from "@tanstack/react-form";
import { Alert, Button, Input } from "@mui/joy";
import { Button, Input } from "@mui/joy";
import { useMutation } from "@tanstack/react-query";
import { signInUser } from "../utils/api/auth";
import { useTranslation } from "react-i18next";
import { useNavigate } from "@tanstack/react-router";
import { useState } from "react";
import { useEffect, useState } from "react";
import type { AlertInterface } from "../misc/interfaces";
import { MyAlert } from "./MyAlert.tsx";
export const LoginCard = () => {
const { t } = useTranslation();
@@ -17,6 +18,15 @@ export const LoginCard = () => {
text: "",
});
useEffect(() => {
setAlert({
isAlert: true,
type: "primary",
header: t("success"),
text: t("logout-success-text"),
});
}, []);
const form = useForm({
defaultValues: {
username: "",
@@ -77,15 +87,11 @@ export const LoginCard = () => {
}}
>
{alert.isAlert && (
<Alert
variant="soft"
color={alert.type}
className="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}
</Alert>
<MyAlert
type={alert.type}
header={alert.header}
text={alert.text}
/>
)}
<form.Field name="username">
{(field) => (
+21
View File
@@ -0,0 +1,21 @@
import { Alert } from "@mui/joy";
interface MyAlertProps {
type: "success" | "warning" | "danger" | "neutral" | "primary";
header: string;
text: string;
}
export const MyAlert = (props: MyAlertProps) => {
return (
<Alert
variant="soft"
color={props.type}
className="rounded-2xl drop-shadow-sm"
>
{props.header}
<br />
{props.text}
</Alert>
);
};
+6 -3
View File
@@ -50,7 +50,7 @@ export const Sidebar = () => {
<Button
variant="soft"
size="sm"
className="lg:hidden transition-transform duration-200 ease-out"
className="transition-transform duration-200 ease-out"
onClick={() => setIsOpen((open) => !open)}
startDecorator={
<span
@@ -61,7 +61,10 @@ export const Sidebar = () => {
{isOpen ? <CloseIcon /> : <MenuIcon />}
</span>
}
sx={{ display: { lg: "none" } }}
sx={{
display: "inline-flex",
"@media (min-width: 1024px)": { display: "none" },
}}
>
{isOpen ? t("close") : t("menu")}
</Button>
@@ -110,7 +113,7 @@ export const Sidebar = () => {
<Button
onClick={() => {
Cookies.remove("token");
handleNavigate("/login");
handleNavigate("/login?logout=true");
}}
color="danger"
startDecorator={<ExitToAppIcon />}
@@ -1,19 +1,11 @@
import {
Alert,
Button,
DialogContent,
DialogTitle,
Input,
Modal,
ModalDialog,
Stack,
} from "@mui/joy";
import { Button, DialogContent, DialogTitle, Input, Modal, ModalDialog, Stack, } from "@mui/joy";
import { useForm } from "@tanstack/react-form";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useTranslation } from "react-i18next";
import type { AlertInterface, NewStorage } from "../../misc/interfaces";
import { mutateNewStorage } from "../../utils/api/storages";
import { useState } from "react";
import { MyAlert } from "../MyAlert.tsx";
interface AddStorageModalProps {
isOpen: boolean;
@@ -107,15 +99,11 @@ export const AddStorageModal = (props: AddStorageModalProps) => {
</Stack>
</form>
{alert.isAlert && (
<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}
</Alert>
<MyAlert
type={alert.type}
header={alert.header}
text={alert.text}
/>
)}
</ModalDialog>
</Modal>
@@ -1,4 +1,11 @@
import { Alert, Button, DialogTitle, Input, Modal, ModalDialog, Stack, } from "@mui/joy";
import {
Button,
DialogTitle,
Input,
Modal,
ModalDialog,
Stack,
} from "@mui/joy";
import { useForm } from "@tanstack/react-form";
import { useMutation } from "@tanstack/react-query";
import { useTranslation } from "react-i18next";
@@ -6,6 +13,7 @@ import type { AlertInterface, ChangePasswordIntf } from "../../misc/interfaces";
import { mutatePassword } from "../../utils/api/auth";
import { useState } from "react";
import { USER_ERROR_CODE } from "@stockhome/shared";
import { MyAlert } from "../MyAlert.tsx";
interface ChangePasswordProps {
isOpen: boolean;
@@ -140,15 +148,11 @@ export const ChangePasswordModal = (props: ChangePasswordProps) => {
</Stack>
</form>
{alert.isAlert && (
<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}
</Alert>
<MyAlert
type={alert.type}
header={alert.header}
text={alert.text}
/>
)}
</ModalDialog>
</Modal>
+12 -26
View File
@@ -1,6 +1,5 @@
import { useMutation, useQuery } from "@tanstack/react-query";
import {
Alert,
Box,
Button,
Chip,
@@ -22,10 +21,10 @@ import type {
} from "../misc/interfaces";
import type { ApiError } from "../utils/api/apiError";
import Cookies from "js-cookie";
import { MyAlert } from "../components/MyAlert.tsx";
export const AddProduct = () => {
const { t } = useTranslation();
const [success, setSuccess] = useState(false);
const [alert, setAlert] = useState<AlertInterface>({
isAlert: false,
type: "neutral",
@@ -69,7 +68,6 @@ export const AddProduct = () => {
storage_location_uuid: "",
},
onSubmit: async ({ value }) => {
setSuccess(false);
mutate(value);
},
});
@@ -77,7 +75,12 @@ export const AddProduct = () => {
const { mutate, isPending } = useMutation({
mutationFn: (values: ProductFormValues) => createProduct(values),
onSuccess: () => {
setSuccess(true);
setAlert({
isAlert: true,
type: "success",
header: "",
text: "",
});
},
onError: showError,
});
@@ -287,28 +290,11 @@ export const AddProduct = () => {
</Button>
</div>
{alert.isAlert && (
<Alert
color={alert.type}
variant="soft"
className="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}
</Alert>
)}
{success && (
<Alert
color="success"
variant="soft"
className="rounded-2xl border border-emerald-200/70 bg-emerald-50/80 text-emerald-700 shadow-[0_14px_30px_rgba(16,185,129,0.18)]"
>
<div className="flex w-full items-center justify-between">
<Typography level="body-sm" className="text-emerald-700">
{t("success")}
</Typography>
</div>
</Alert>
<MyAlert
type={alert.type}
header={alert.header}
text={alert.text}
/>
)}
</form>
</Box>
+86 -56
View File
@@ -1,15 +1,5 @@
import { useEffect, useState } from "react";
import {
Alert,
Avatar,
Button,
Checkbox,
Chip,
CircularProgress,
Sheet,
Table,
Typography,
} from "@mui/joy";
import { Avatar, Button, Checkbox, Chip, CircularProgress, Sheet, Table, Typography, } from "@mui/joy";
import { useNavigate } from "@tanstack/react-router";
import { useTranslation } from "react-i18next";
import AddIcon from "@mui/icons-material/Add";
@@ -19,6 +9,8 @@ import { formatDate } from "../utils/uxFncs";
import Cookies from "js-cookie";
import type { AlertInterface, ProductRow } from "../misc/interfaces";
import type { ApiError } from "../utils/api/apiError";
import CategoryIcon from "@mui/icons-material/category";
import { MyAlert } from "../components/MyAlert.tsx";
export const InventoryPage = () => {
const { t } = useTranslation();
@@ -127,20 +119,12 @@ export const InventoryPage = () => {
{productsIsLoading && <CircularProgress size="sm" />}
</div>
{alert.isAlert && (
<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}
</Alert>
<MyAlert type={alert.type} header={alert.header} text={alert.text} />
)}
<Sheet
variant="outlined"
className="mt-6 flex min-h-0 flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white/80 shadow-sm sm:h-[calc(100vh-260px)]"
className="mt-6 flex min-h-0 w-full max-w-full flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white/80 shadow-sm sm:h-[calc(100vh-260px)]"
>
<div className="flex items-center justify-between border-b border-slate-200 px-6 py-4 text-slate-700">
<Typography level="body-lg" fontWeight="bold">
@@ -163,8 +147,9 @@ export const InventoryPage = () => {
stripe="odd"
variant="plain"
hoverRow
className="min-w-240 text-slate-700"
className="w-full text-slate-700"
sx={{
tableLayout: "fixed",
"--TableCell-headBackground":
"var(--joy-palette-background-surface)",
"& thead": {
@@ -176,23 +161,48 @@ export const InventoryPage = () => {
"& thead tr": {
backgroundColor: "rgb(248 250 252)",
},
"& thead th:nth-child(2)": {
width: "40%",
},
"& thead th:nth-child(3)": {
width: "14%",
},
"& thead th": {
zIndex: 2,
backgroundColor: "rgb(248 250 252)",
backgroundImage: "none",
},
"& thead th:nth-child(1)": {
width: "44px",
},
"& thead th:nth-child(2)": {
width: "22%",
minWidth: "160px",
},
"& thead th:nth-child(3)": {
width: "9%",
minWidth: "70px",
},
"& thead th:nth-child(4)": {
width: "12%",
minWidth: "90px",
},
"& thead th:nth-child(5)": {
width: "17%",
minWidth: "120px",
},
"& thead th:nth-child(6)": {
width: "13%",
minWidth: "100px",
},
"& thead th:nth-child(7)": {
width: "13%",
minWidth: "100px",
},
"& thead th:nth-child(8)": {
width: "14%",
minWidth: "100px",
},
"& tr > *:nth-child(n+4)": { textAlign: "left" },
}}
>
<thead>
<tr className="text-slate-600">
<th className="px-4 py-4">
<th className="px-2 py-4">
<Checkbox
checked={rows.length > 0 && selected.length === rows.length}
indeterminate={
@@ -203,13 +213,13 @@ export const InventoryPage = () => {
sx={{ verticalAlign: "sub" }}
/>
</th>
<th className="px-6 py-4">{t("product-name")}</th>
<th className="px-6 py-4">{t("price")}</th>
<th className="px-6 py-4">{t("stock")}</th>
<th className="px-6 py-4">{t("storage-place")}</th>
<th className="px-6 py-4">{t("expiry-date")}</th>
<th className="px-6 py-4">{t("bottling-date")}</th>
<th className="px-6 py-4 text-right">{t("actions")}</th>
<th className="px-3 py-4">{t("product-name")}</th>
<th className="px-3 py-4">{t("price")}</th>
<th className="px-3 py-4">{t("stock")}</th>
<th className="px-3 py-4">{t("storage-place")}</th>
<th className="px-3 py-4">{t("expiry-date")}</th>
<th className="px-3 py-4">{t("bottling-date")}</th>
<th className="px-3 py-4 text-right">{t("actions")}</th>
</tr>
</thead>
<tbody>
@@ -225,61 +235,81 @@ export const InventoryPage = () => {
aria-checked={isItemSelected}
tabIndex={-1}
>
<th scope="row" className="px-4 py-5">
<th scope="row" className="px-2 py-5">
<Checkbox
checked={isItemSelected}
slotProps={{ input: { "aria-labelledby": labelId } }}
sx={{ verticalAlign: "top" }}
/>
</th>
<th id={labelId} scope="row" className="px-6 py-5">
<div className="flex items-center gap-4">
<Avatar size="lg" variant="soft" src={row.imageUrl} />
<th
id={labelId}
scope="row"
className="px-3 py-5 overflow-hidden"
>
<div className="flex min-w-0 items-center gap-3">
<Avatar size="lg" variant="soft" className="shrink-0">
<CategoryIcon />
</Avatar>
<div className="min-w-0">
<Typography
level="title-md"
className="text-slate-900"
className="text-slate-900 truncate"
>
{row.name}
</Typography>
<Typography
level="body-sm"
className="text-slate-500"
className="text-slate-500 truncate"
>
{row.description}
</Typography>
</div>
</div>
</th>
<td className="px-6 py-5">
<Typography level="title-md">{row.price}</Typography>
<Typography level="body-sm" className="text-slate-400">
<td className="px-3 py-5 overflow-hidden">
<Typography level="title-md" className="truncate">
{row.price}
</Typography>
<Typography
level="body-sm"
className="truncate text-slate-400"
>
{Cookies.get("currency")}
</Typography>
</td>
<td className="px-6 py-5">
<td className="px-3 py-5 overflow-hidden">
<Chip
variant="soft"
color="neutral"
size="lg"
className="px-3"
className="max-w-full px-3"
>
{row.stock}
<span className="truncate">{row.stock}</span>
</Chip>
</td>
<td className="px-6 py-5">
<Typography level="title-md">{row.location}</Typography>
<Typography level="body-sm" className="text-slate-500">
<td className="px-3 py-5 overflow-hidden">
<Typography level="title-md" className="truncate">
{row.location}
</Typography>
<Typography
level="body-sm"
className="truncate text-slate-500"
>
{row.locationDetail}
</Typography>
</td>
<td className="px-6 py-5">
<Typography level="title-md">{row.expiryDate}</Typography>
<td className="px-3 py-5 overflow-hidden">
<Typography level="title-md" className="truncate">
{row.expiryDate}
</Typography>
</td>
<td className="px-6 py-5">
<Typography level="title-md">{row.refillDate}</Typography>
<td className="px-3 py-5 overflow-hidden">
<Typography level="title-md" className="truncate">
{row.refillDate}
</Typography>
</td>
<td className="px-6 py-5 text-right">
<td className="px-3 py-5 text-right">
<Button
onClick={() =>
navigate({
+7 -24
View File
@@ -1,7 +1,6 @@
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { getStorages } from "../utils/api/storages.ts";
import {
Alert,
Box,
Button,
Chip,
@@ -26,6 +25,7 @@ import type {
import type { ApiError } from "../utils/api/apiError";
import Cookies from "js-cookie";
import ElectricBoltIcon from "@mui/icons-material/ElectricBolt";
import { MyAlert } from "../components/MyAlert.tsx";
export const ProductQuickView = () => {
const uuid = window.location.search.split("uuid=")[1];
@@ -165,7 +165,7 @@ export const ProductQuickView = () => {
form.handleSubmit();
}}
>
<div className="grid gap-5 lg:grid-cols-[1.2fr_1fr]">
<div className="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">
@@ -338,28 +338,11 @@ export const ProductQuickView = () => {
</Button>
</div>
{alert.isAlert && (
<Alert
color={alert.type}
variant="soft"
className="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}
</Alert>
)}
{success && (
<Alert
color="success"
variant="soft"
className="rounded-2xl border border-emerald-200/70 bg-emerald-50/80 text-emerald-700 shadow-[0_14px_30px_rgba(16,185,129,0.18)]"
>
<div className="flex w-full items-center justify-between">
<Typography level="body-sm" className="text-emerald-700">
{t("success")}
</Typography>
</div>
</Alert>
<MyAlert
type={alert.type}
header={alert.header}
text={alert.text}
/>
)}
</form>
</Box>
+3 -19
View File
@@ -1,13 +1,4 @@
import {
Alert,
Button,
Chip,
CircularProgress,
Divider,
Input,
Sheet,
Typography,
} from "@mui/joy";
import { Button, Chip, CircularProgress, Divider, Input, Sheet, Typography, } from "@mui/joy";
import { useForm } from "@tanstack/react-form";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import Cookies from "js-cookie";
@@ -17,6 +8,7 @@ import type { ApiError } from "../utils/api/apiError";
import { fetchSettings, mutateSettings } from "../utils/api/settings";
import { useEffect, useState } from "react";
import { ChangePasswordModal } from "../components/modals/ChangePasswordModal";
import { MyAlert } from "../components/MyAlert.tsx";
export const Settings = () => {
const { t } = useTranslation();
@@ -118,15 +110,7 @@ export const Settings = () => {
<Sheet 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">
{alert.isAlert && (
<Alert
variant="soft"
color={alert.type}
className="mb-6 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}
</Alert>
<MyAlert type={alert.type} header={alert.header} text={alert.text} />
)}
{settingsPending ? (
<div className="flex items-center justify-center py-16">
+32 -31
View File
@@ -1,13 +1,6 @@
import { useQuery } from "@tanstack/react-query";
import { getStorages } from "../utils/api/storages";
import {
Alert,
Button,
CircularProgress,
Sheet,
Table,
Typography,
} from "@mui/joy";
import { Button, CircularProgress, Sheet, Table, Typography } from "@mui/joy";
import { useTranslation } from "react-i18next";
import type { AlertInterface, Storage } from "../misc/interfaces";
import type { ApiError } from "../utils/api/apiError";
@@ -15,6 +8,7 @@ import { StorageRow } from "../components/StorageRow";
import { useEffect, useState } from "react";
import { AddStorageModal } from "../components/modals/AddStorageModal";
import AddIcon from "@mui/icons-material/Add";
import { MyAlert } from "../components/MyAlert.tsx";
export const Storages = () => {
const { t } = useTranslation();
@@ -74,21 +68,13 @@ export const Storages = () => {
</Button>
</div>
{alert.isAlert && (
<Alert
variant="soft"
color={alert.type}
className="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}
</Alert>
<MyAlert type={alert.type} header={alert.header} text={alert.text} />
)}
</div>
<Sheet
variant="outlined"
className="mt-6 flex min-h-0 flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white/80 shadow-sm sm:h-[calc(100vh-260px)]"
className="mt-6 flex min-h-0 w-full max-w-full flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white/80 shadow-sm sm:h-[calc(100vh-260px)]"
>
<AddStorageModal isOpen={modal} setOpen={setModal} />
{isLoading ? (
@@ -108,8 +94,9 @@ export const Storages = () => {
stripe="odd"
variant="plain"
hoverRow
className="min-w-240 text-slate-700"
className="w-full text-slate-700"
sx={{
tableLayout: "fixed",
"--TableCell-headBackground":
"var(--joy-palette-background-surface)",
"& thead": {
@@ -121,27 +108,41 @@ export const Storages = () => {
"& thead tr": {
backgroundColor: "rgb(248 250 252)",
},
"& thead th:nth-child(2)": {
width: "40%",
},
"& thead th:nth-child(3)": {
width: "14%",
},
"& thead th": {
zIndex: 2,
backgroundColor: "rgb(248 250 252)",
backgroundImage: "none",
},
"& tr > *:nth-child(n+4)": { textAlign: "left" },
"& thead th:nth-child(1)": {
width: "26%",
minWidth: "140px",
},
"& thead th:nth-child(2)": {
width: "34%",
minWidth: "160px",
},
"& thead th:nth-child(3)": {
width: "16%",
minWidth: "110px",
},
"& thead th:nth-child(4)": {
width: "16%",
minWidth: "110px",
},
"& thead th:nth-child(5)": {
width: "8%",
minWidth: "80px",
},
"& tr > *:nth-child(n+3)": { textAlign: "left" },
}}
>
<thead>
<tr className="text-slate-600">
<th className="px-6 py-4">{t("storage-name")}</th>
<th className="px-6 py-4">{t("description")}</th>
<th className="px-6 py-4">{t("created-at")}</th>
<th className="px-6 py-4">{t("updated-at")}</th>
<th className="px-6 py-4 text-right"></th>
<th className="px-3 py-4">{t("storage-name")}</th>
<th className="px-3 py-4">{t("description")}</th>
<th className="px-3 py-4">{t("created-at")}</th>
<th className="px-3 py-4">{t("updated-at")}</th>
<th className="px-3 py-4 text-right"></th>
</tr>
</thead>
<tbody>
+6 -23
View File
@@ -1,7 +1,6 @@
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { getStorages } from "../utils/api/storages.ts";
import {
Alert,
Box,
Button,
Chip,
@@ -27,6 +26,7 @@ import type { ApiError } from "../utils/api/apiError";
import QrCodeIcon from "@mui/icons-material/QrCode";
import Cookies from "js-cookie";
import QRCode from "qrcode";
import { MyAlert } from "../components/MyAlert.tsx";
interface ViewProductProps {
uuid: string;
@@ -369,28 +369,11 @@ export const ViewProduct = (props: ViewProductProps) => {
</div>
{alert.isAlert && (
<Alert
color={alert.type}
variant="soft"
className="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}
</Alert>
)}
{success && (
<Alert
color="success"
variant="soft"
className="rounded-2xl border border-emerald-200/70 bg-emerald-50/80 text-emerald-700 shadow-[0_14px_30px_rgba(16,185,129,0.18)]"
>
<div className="flex w-full items-center justify-between">
<Typography level="body-sm" className="text-emerald-700">
{t("success")}
</Typography>
</div>
</Alert>
<MyAlert
type={alert.type}
header={alert.header}
text={alert.text}
/>
)}
</form>
</Box>
@@ -57,6 +57,7 @@
"error": "Fehler",
"success": "Erfolg",
"submit": "Absenden",
"logout-success-text": "Logout erfolgreich!",
"SU005": "Das Passwort wurde erfolgreich geändert!",
"SE001": "Die Einstellungen wurden erfolgreich geändert!",
"EG001": "Ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.",
@@ -57,6 +57,7 @@
"error": "Error",
"success": "Success",
"submit": "Submit",
"logout-success-text": "Logout successful!",
"SU005": "Your password is updated successfully!",
"SE001": "The settings are updated successfully!",
"EG001": "An unexpected error occurred. Please try again later.",