added animations to borrow-system

edited version infos
changed license
2026-04-19 21:32:56 +02:00 · 2026-04-18 14:57:51 +02:00 · 2026-04-15 19:37:59 +02:00 · 2026-03-26 23:03:19 +01:00 · 2026-03-26 23:01:05 +01:00 · 2026-03-26 22:25:46 +01:00
33 changed files with 789 additions and 634 deletions
@@ -116,4 +116,9 @@ ToDo.txt
 # only in development branch
-next-env.d.ts
+next-env.d.ts
 # psd files from footage
 footage/*.psd
 icon/
@@ -2,7 +2,11 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link
      rel="icon"
      type="image/png"
      href="/icon_borrow-system-frontend_dark.png"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ausleihsystem</title>
  </head>
@@ -14,7 +14,7 @@ server {
  }
  location /backend/ {
-    proxy_pass http://demo_borrow_system-backend_v2:8102/;
+    proxy_pass http://borrow_system-backend_v2:8004/;
  }
  location ~* \.(?:js|mjs|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
@@ -1,7 +1,7 @@
 {
  "name": "admin",
  "private": true,
-  "version": "0.0.0",
+  "version": "v2.1.2 (dev)",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -12,6 +12,7 @@
  "dependencies": {
    "@chakra-ui/react": "^3.28.0",
    "@emotion/react": "^11.14.0",
    "@lottiefiles/dotlottie-react": "^0.19.0",
    "@tailwindcss/vite": "^4.1.11",
    "@tanstack/react-query": "^5.90.5",
    "i18next": "^25.6.0",
@@ -1 +0,0 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shapes-icon lucide-shapes"><path d="M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z"/><rect x="3" y="14" width="7" height="7" rx="1"/><circle cx="17.5" cy="17.5" r="3.5"/></svg>
@@ -16,6 +16,7 @@ import { Flex } from "@chakra-ui/react";
 import { Footer } from "./components/footer/Footer";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { API_BASE } from "@/config/api.config";
 import { ContactPage } from "./pages/ContactPage";
 const queryClient = new QueryClient();
@@ -80,6 +81,7 @@ function App() {
                  <Route path="/" element={<HomePage />} />
                  <Route path="/my-loans" element={<MyLoansPage />} />
                  <Route path="/landingpage" element={<Landingpage />} />
                  <Route path="/contact" element={<ContactPage />} />
                </Route>
                <Route path="/login" element={<LoginPage />} />
@@ -22,6 +22,7 @@ import {
  MoreVertical,
  Languages,
  Table,
  ContactRound,
 } from "lucide-react";
 import { useUserContext } from "@/states/Context";
 import { useState } from "react";
@@ -153,6 +154,16 @@ export const Header = () => {
                  </HStack>
                }
              />
              <Menu.Item
                value="contact"
                onSelect={() => navigate("/contact", { replace: true })}
                children={
                  <HStack gap={3}>
                    <ContactRound size={16} />
                    <Text as="span">{t("contact")}</Text>
                  </HStack>
                }
              />
              <Menu.Separator />
              <Menu.Item
                value="logout"
@@ -278,6 +289,17 @@ export const Header = () => {
              </HStack>
            </Button>
          </a>
          <Button
            variant={"outline"}
            onClick={() => navigate("/contact", { replace: true })}
          >
            <HStack gap={2}>
              <ContactRound size={18} />
              <Text as="span">{t("contact")}</Text>
            </HStack>
          </Button>
          <Button onClick={logout} variant="outline" colorScheme="red">
            <HStack gap={2}>
              <LogOut size={18} />
@@ -0,0 +1,28 @@
 import { DotLottieReact } from "@lottiefiles/dotlottie-react";
 export const unlockAnimation = () => {
  return (
    <DotLottieReact
      src="https://lottie.host/f839baa1-9c64-44c4-9386-f0e4c87ab208/2Iw1m4k86d.lottie"
      autoplay
    />
  );
 };
 export const approvalAnimation = () => {
  return (
    <DotLottieReact
      src="https://lottie.host/b7257009-9e3f-43e2-8112-a176f4696e4c/iQxxqAVOGX.lottie"
      autoplay
    />
  );
 };
 export const logoutAnimation = () => {
  return (
    <DotLottieReact
      src="https://lottie.host/4975758c-de38-4d15-9f74-927709751d32/v8FtKpnD1y.lottie"
      autoplay
    />
  );
 };
@@ -1,23 +1,15 @@
-"use client";
+"use client"
-import { ChakraProvider, defaultSystem } from "@chakra-ui/react";
+import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
-import * as React from "react";
+import {
-import type { ReactNode } from "react";
+  ColorModeProvider,
-import { ColorModeProvider as ThemeColorModeProvider } from "./color-mode";
+  type ColorModeProviderProps,
 } from "./color-mode"
-export interface ColorModeProviderProps {
+export function Provider(props: ColorModeProviderProps) {
  children: React.ReactNode;
 }
 export function ColorModeProvider({ children }: ColorModeProviderProps) {
  // Wrap children with the real color-mode provider
  return <ThemeColorModeProvider>{children}</ThemeColorModeProvider>;
 }
 export function Provider({ children }: { children: ReactNode }) {
  return (
    <ChakraProvider value={defaultSystem}>
-      <ColorModeProvider>{children}</ColorModeProvider>
+      <ColorModeProvider {...props} />
    </ChakraProvider>
-  );
+  )
 }
@@ -0,0 +1,84 @@
 import {
  Field,
  Textarea,
  Button,
  Alert,
  Container,
  Text,
 } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { useState } from "react";
 import { API_BASE } from "@/config/api.config";
 import Cookies from "js-cookie";
 import { Header } from "@/components/Header";
 interface Alert {
  type: "info" | "warning" | "success" | "error" | "neutral";
  headline: string;
  text: string;
 }
 export const ContactPage = () => {
  const { t } = useTranslation();
  const [message, setMessage] = useState("");
  const [alert, setAlert] = useState<Alert | null>(null);
  const sendMessage = async () => {
    // Logic to send the message
    const result = await fetch(`${API_BASE}/api/users/contact`, {
      method: "POST",
      headers: {
        Authorization: `Bearer ${Cookies.get("token") || ""}`,
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: JSON.stringify({ message }),
    });
    if (result.ok) {
      setAlert({
        type: "success",
        headline: t("contactPage_successHeadline"),
        text: t("contactPage_successText"),
      });
      setMessage("");
    } else {
      setAlert({
        type: "error",
        headline: t("contactPage_errorHeadline"),
        text: t("contactPage_errorText"),
      });
    }
  };
  return (
    <Container className="px-6 sm:px-8 pt-10">
      <Header />
      <Field.Root invalid={message === ""}>
        <Field.Label>
          <Text>{t("contactPage_messageDescription")}</Text>
          <Field.RequiredIndicator />
        </Field.Label>
        <Textarea
          placeholder={t("contactPage_messagePlaceholder")}
          variant="subtle"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
        />
        {message === "" && (
          <Field.ErrorText>{t("contactPage_messageErrorText")}</Field.ErrorText>
        )}
      </Field.Root>
      {alert && (
        <Alert.Root status={alert.type}>
          <Alert.Indicator />
          <Alert.Content>
            <Alert.Title>{alert.headline}</Alert.Title>
            <Alert.Description>{alert.text}</Alert.Description>
          </Alert.Content>
        </Alert.Root>
      )}
      <Button onClick={sendMessage}>{t("contactPage_sendButton")}</Button>
    </Container>
  );
 };
@@ -18,6 +18,7 @@ import { borrowAbleItemsAtom } from "@/states/Atoms";
 import { createLoan } from "@/utils/Fetcher";
 import { Header } from "@/components/Header";
 import { useTranslation } from "react-i18next";
 import { approvalAnimation } from "@/components/dotLottie";
 export interface User {
  username: string;
@@ -27,6 +28,8 @@ export interface User {
 export const HomePage = () => {
  const { t } = useTranslation();
  const [showAnimation, setShowAnimation] = useState(false);
  const [borrowableItems, setBorrowableItems] = useAtom(borrowAbleItemsAtom);
  const [startDate, setStartDate] = useState("");
  const [endDate, setEndDate] = useState("");
@@ -46,155 +49,172 @@ export const HomePage = () => {
    setSelectedItems((prevSelected) =>
      prevSelected.includes(itemId)
        ? prevSelected.filter((id) => id !== itemId)
-        : [...prevSelected, itemId]
+        : [...prevSelected, itemId],
    );
  };
  const showApprovalAnimation = (seconds: number) => {
    const milliseconds = seconds * 1000;
    setShowAnimation(true);
    window.setTimeout(() => {
      setShowAnimation(false);
    }, milliseconds);
  };
  return (
-    <Container className="px-6 sm:px-8 pt-10">
+    <>
-      <Header />
+      {showAnimation && (
-      {isMsg && (
+        <div className="fixed inset-0 z-9999 flex items-center justify-center pointer-events-none">
-        <MyAlert
+          <div>{approvalAnimation()}</div>
-          status={msgStatus}
+        </div>
          title={msgTitle}
          description={msgDescription}
        />
      )}
-      <Stack as="main">
+      <Container className="px-6 sm:px-8 pt-10">
-        <Text>{t("timezone-info")}</Text>
+        <Header />
-        <label htmlFor="startDate">
+        {isMsg && (
-          <strong>
+          <MyAlert
-            <Text>{t("start-date")}</Text>
+            status={msgStatus}
-          </strong>
+            title={msgTitle}
-        </label>
+            description={msgDescription}
-        <Input
+          />
-          id="startDate"
+        )}
-          placeholder={t("start-date")}
+        <Stack as="main">
-          type="datetime-local"
+          <Text>{t("timezone-info")}</Text>
-          value={startDate}
+          <label htmlFor="startDate">
-          onChange={(e) => setStartDate(e.target.value)}
+            <strong>
-        />
+              <Text>{t("start-date")}</Text>
-        <label htmlFor="endDate">
+            </strong>
-          <strong>
+          </label>
-            <Text>{t("end-date")}</Text>
+          <Input
-          </strong>
+            id="startDate"
-        </label>
+            placeholder={t("start-date")}
-        <Input
+            type="datetime-local"
-          id="endDate"
+            value={startDate}
-          placeholder={t("end-date")}
+            onChange={(e) => setStartDate(e.target.value)}
-          type="datetime-local"
+          />
-          value={endDate}
+          <label htmlFor="endDate">
-          onChange={(e) => setEndDate(e.target.value)}
+            <strong>
-        />
+              <Text>{t("end-date")}</Text>
-        <Button
+            </strong>
-          onClick={async () => {
+          </label>
-            setIsLoadingA(true);
+          <Input
-            if (!startDate || !endDate) {
+            id="endDate"
-              setMsgStatus("error");
+            placeholder={t("end-date")}
-              setMsgTitle(t("missing-fields"));
+            type="datetime-local"
-              setMsgDescription(t("missing-fields-desc"));
+            value={endDate}
-              setIsMsg(true);
+            onChange={(e) => setEndDate(e.target.value)}
-              setIsLoadingA(false);
+          />
-              return;
+          <Button
-            }
+            onClick={async () => {
-            await getBorrowableItems(startDate, endDate).then((response) => {
+              setIsLoadingA(true);
-              setIsLoadingA(false);
+              if (!startDate || !endDate) {
              if (response && response.status === "error") {
                setMsgStatus("error");
-                setMsgTitle(response.title || t("error"));
+                setMsgTitle(t("missing-fields"));
-                setMsgDescription(response.description || t("unknown-error"));
+                setMsgDescription(t("missing-fields-desc"));
                setIsMsg(true);
                setIsLoadingA(false);
                return;
              }
-              setBorrowableItems(response.data);
+              await getBorrowableItems(startDate, endDate).then((response) => {
-              setIsMsg(false);
+                setIsLoadingA(false);
-            });
+                if (response && response.status === "error") {
-          }}
+                  setMsgStatus("error");
-        >
+                  setMsgTitle(response.title || t("error"));
-          {t("get-borrowable-items")}
+                  setMsgDescription(response.description || t("unknown-error"));
        </Button>
        {isLoadingA && (
          <VStack colorPalette="teal">
            <Spinner color="colorPalette.600" />
            <Text color="colorPalette.600">{t("loading")}</Text>
          </VStack>
        )}
        {borrowableItems.length > 0 && (
          <Table.ScrollArea borderWidth="1px" rounded="md">
            <Table.Root size="sm" stickyHeader>
              <Table.Header>
                <Table.Row bg="bg.subtle">
                  <Table.ColumnHeader></Table.ColumnHeader>
                  <Table.ColumnHeader>{t("item")}</Table.ColumnHeader>
                </Table.Row>
              </Table.Header>
              <Table.Body>
                {borrowableItems.map((item) => (
                  <Table.Row key={item.id}>
                    <Table.Cell>
                      <input
                        onChange={() => handleCheckboxChange(item.id)}
                        type="checkbox"
                        name={item.id}
                        id={item.id}
                      />
                    </Table.Cell>
                    <Table.Cell>{item.item_name}</Table.Cell>
                  </Table.Row>
                ))}
                <Table.Row>
                  <Table.Cell colSpan={2}>
                    <InputGroup
                      endElement={
                        <Span color="fg.muted" textStyle="xs">
                          {note.length} / {MAX_CHARACTERS}
                        </Span>
                      }
                    >
                      <Input
                        placeholder={t("optional-note")}
                        value={note}
                        maxLength={MAX_CHARACTERS}
                        onChange={(e) => {
                          setNote(
                            e.currentTarget.value.slice(0, MAX_CHARACTERS)
                          );
                        }}
                      />
                    </InputGroup>
                  </Table.Cell>
                </Table.Row>
              </Table.Body>
            </Table.Root>
          </Table.ScrollArea>
        )}
        {selectedItems.length >= 1 && (
          <Button
            onClick={() =>
              createLoan(selectedItems, startDate, endDate, note).then(
                (response) => {
                  if (response.status === "error") {
                    setMsgStatus("error");
                    setMsgTitle(response.title || t("error"));
                    setMsgDescription(
                      response.description || t("unknown-error")
                    );
                    setIsMsg(true);
                    return;
                  }
                  setMsgStatus("success");
                  setMsgTitle(t("success"));
                  setMsgDescription(t("loan-success"));
                  setIsMsg(true);
                  return;
                }
-              )
+                setBorrowableItems(response.data);
-            }
+                setIsMsg(false);
              });
            }}
          >
-            {t("create-loan")}
+            {t("get-borrowable-items")}
          </Button>
-        )}
+          {isLoadingA && (
-      </Stack>
+            <VStack colorPalette="teal">
-    </Container>
+              <Spinner color="colorPalette.600" />
              <Text color="colorPalette.600">{t("loading")}</Text>
            </VStack>
          )}
          {borrowableItems.length > 0 && (
            <Table.ScrollArea borderWidth="1px" rounded="md">
              <Table.Root size="sm" stickyHeader>
                <Table.Header>
                  <Table.Row bg="bg.subtle">
                    <Table.ColumnHeader></Table.ColumnHeader>
                    <Table.ColumnHeader>{t("item")}</Table.ColumnHeader>
                  </Table.Row>
                </Table.Header>
                <Table.Body>
                  {borrowableItems.map((item) => (
                    <Table.Row key={item.id}>
                      <Table.Cell>
                        <input
                          onChange={() => handleCheckboxChange(item.id)}
                          type="checkbox"
                          name={item.id}
                          id={item.id}
                        />
                      </Table.Cell>
                      <Table.Cell>{item.item_name}</Table.Cell>
                    </Table.Row>
                  ))}
                  <Table.Row>
                    <Table.Cell colSpan={2}>
                      <InputGroup
                        endElement={
                          <Span color="fg.muted" textStyle="xs">
                            {note.length} / {MAX_CHARACTERS}
                          </Span>
                        }
                      >
                        <Input
                          placeholder={t("optional-note")}
                          value={note}
                          maxLength={MAX_CHARACTERS}
                          onChange={(e) => {
                            setNote(
                              e.currentTarget.value.slice(0, MAX_CHARACTERS),
                            );
                          }}
                        />
                      </InputGroup>
                    </Table.Cell>
                  </Table.Row>
                </Table.Body>
              </Table.Root>
            </Table.ScrollArea>
          )}
          {selectedItems.length >= 1 && (
            <Button
              onClick={() =>
                createLoan(selectedItems, startDate, endDate, note).then(
                  (response) => {
                    if (response.status === "error") {
                      setMsgStatus("error");
                      setMsgTitle(response.title || t("error"));
                      setMsgDescription(
                        response.description || t("unknown-error"),
                      );
                      setIsMsg(true);
                      return;
                    }
                    showApprovalAnimation(3);
                    setMsgStatus("success");
                    setMsgTitle(t("success"));
                    setMsgDescription(t("loan-success"));
                    setIsMsg(true);
                  },
                )
              }
            >
              {t("create-loan")}
            </Button>
          )}
        </Stack>
      </Container>
    </>
  );
 };
@@ -4,26 +4,47 @@ import { Button, Card, Field, Input, Stack } from "@chakra-ui/react";
 import { setIsLoggedInAtom, triggerLogoutAtom } from "@/states/Atoms";
 import { useAtom } from "jotai";
 import Cookies from "js-cookie";
-import { Navigate, useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { PasswordInput } from "@/components/ui/password-input";
 import { useTranslation } from "react-i18next";
 import { API_BASE } from "@/config/api.config";
 import { unlockAnimation } from "@/components/dotLottie";
 import { logoutAnimation } from "@/components/dotLottie";
 export const LoginPage = () => {
  const { t } = useTranslation();
  const [isLoggedIn, setIsLoggedIn] = useAtom(setIsLoggedInAtom);
  const [triggerLogout, setTriggerLogout] = useAtom(triggerLogoutAtom);
  const [showAnimation, setShowAnimation] = useState(false);
  const [showLogout, setShowLogout] = useState(false);
  const navigate = useNavigate();
  const location = useLocation();
  const from = location.state?.from?.pathname || "/";
  useEffect(() => {
-    if (isLoggedIn) {
+    if (triggerLogout) {
-      navigate(from, { replace: true });
+      setShowLogout(true);
-      window.location.reload(); // if deleted, the user context is not updated in time
+      window.setTimeout(() => {
        setShowLogout(false);
      }, 4500);
    }
-  }, [isLoggedIn, navigate, from]);
+
    if (!isLoggedIn) return;
    // Existing sessions should redirect immediately, fresh logins wait for animation.
    if (!showAnimation) {
      navigate(from, { replace: true });
      return;
    }
    const timeoutId = window.setTimeout(() => {
      navigate(from, { replace: true });
      window.location.reload(); // keeps user context in sync after login
    }, 3000);
    return () => window.clearTimeout(timeoutId);
  }, [isLoggedIn, showAnimation, navigate, from]);
  const loginFnc = async (username: string, password: string) => {
    const response = await fetch(`${API_BASE}/api/users/login`, {
@@ -42,6 +63,8 @@ export const LoginPage = () => {
      };
    }
    setShowAnimation(true);
    Cookies.set("token", data.token);
    setIsLoggedIn(true);
    return { success: true };
@@ -62,58 +85,75 @@ export const LoginPage = () => {
      return;
    }
    setTriggerLogout(false);
    navigate(from, { replace: true });
  };
  if (isLoggedIn) {
    return <Navigate to={from} replace />;
  }
  return (
-    <div className="flex flex-1 items-center justify-center p-4">
+    <>
-      <form onSubmit={(e) => e.preventDefault()}>
+      {showAnimation && (
-        <Card.Root maxW="sm">
+        <div className="fixed inset-0 z-9999 flex items-center justify-center pointer-events-none">
-          <Card.Header>
+          <div>{unlockAnimation()}</div>
-            <Card.Title>{t("login")}</Card.Title>
+        </div>
-            <Card.Description>{t("enter-credentials")}</Card.Description>
+      )}
-          </Card.Header>
+
-          <Card.Body>
+      {showLogout && (
-            <Stack gap="4" w="full">
+        <div className="fixed inset-0 z-9999 flex items-center justify-center pointer-events-none">
-              <Field.Root>
+          <div>{logoutAnimation()}</div>
-                <Field.Label>{t("username")}</Field.Label>
+        </div>
-                <Input
+      )}
-                  value={username}
+
-                  onChange={(e) => setUsername(e.target.value)}
+      <div className="flex flex-1 items-center justify-center p-4">
        <form onSubmit={(e) => e.preventDefault()}>
          <Card.Root maxW="sm">
            <Card.Header>
              <Card.Title>{t("login")}</Card.Title>
              <Card.Description>{t("enter-credentials")}</Card.Description>
            </Card.Header>
            <Card.Body>
              <Stack gap="4" w="full">
                <Field.Root>
                  <Field.Label>{t("username")}</Field.Label>
                  <Input
                    value={username}
                    onChange={(e) => setUsername(e.target.value)}
                  />
                </Field.Root>
                <Field.Root>
                  <Field.Label>{t("password")}</Field.Label>
                  <PasswordInput
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                  />
                </Field.Root>
              </Stack>
            </Card.Body>
            <Card.Footer justifyContent="flex-end">
              {isError && (
                <MyAlert
                  status="error"
                  title={errorMsg}
                  description={errorDsc}
                />
-              </Field.Root>
+              )}
-              <Field.Root>
+              <Button
-                <Field.Label>{t("password")}</Field.Label>
+                type="submit"
-                <PasswordInput
+                onClick={() => handleLogin()}
-                  value={password}
+                variant="solid"
-                  onChange={(e) => setPassword(e.target.value)}
+              >
                Login
              </Button>
            </Card.Footer>
            <Card.Footer justifyContent="flex-end">
              {triggerLogout && (
                <MyAlert
                  status="success"
                  title={t("logout-success")}
                  description={t("logout-success-desc")}
                />
-              </Field.Root>
+              )}
-            </Stack>
+            </Card.Footer>
-          </Card.Body>
+          </Card.Root>
-          <Card.Footer justifyContent="flex-end">
+        </form>
-            {isError && (
+      </div>
-              <MyAlert status="error" title={errorMsg} description={errorDsc} />
+    </>
            )}
            <Button type="submit" onClick={() => handleLogin()} variant="solid">
              Login
            </Button>
          </Card.Footer>
          <Card.Footer justifyContent="flex-end">
            {triggerLogout && (
              <MyAlert
                status="success"
                title={t("logout-success")}
                description={t("logout-success-desc")}
              />
            )}
          </Card.Footer>
        </Card.Root>
      </form>
    </div>
  );
 };
@@ -68,7 +68,7 @@
    "admin-status": "Admin-Status",
    "first-name": "Vorname",
    "last-name": "Nachname",
-    "app-title": "Ausleihsystem (demo)",
+    "app-title": "Ausleihsystem",
    "last-borrowed-person": "Zuletzt ausgeliehen von",
    "currently-borrowed-by": "Derzeit ausgeliehen von",
    "back": "Zurückgehen",
@@ -68,7 +68,7 @@
    "admin-status": "Admin status",
    "first-name": "First name",
    "last-name": "Last name",
-    "app-title": "Borrow System (demo)",
+    "app-title": "Borrow System",
    "last-borrowed-person": "Last borrowed by",
    "currently-borrowed-by": "Currently borrowed by",
    "back": "Go back",
@@ -1,23 +1,16 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import svgr from "vite-plugin-svgr";
 import tailwindcss from "@tailwindcss/vite";
-import path from "node:path";
+import tsconfigPaths from "vite-tsconfig-paths";
 export default defineConfig({
-  plugins: [tailwindcss()],
+  plugins: [react(), svgr(), tailwindcss(), tsconfigPaths()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
  server: {
    host: "0.0.0.0",
-    allowedHosts: ["insta.the1s.de"],
+    port: 8001,
-    port: 8101,
+    watch: {
-    watch: { usePolling: true },
+      usePolling: true,
    hmr: {
      host: "insta.the1s.de",
      port: 8101,
      protocol: "wss",
    },
  },
 });
@@ -0,0 +1,6 @@
 Copyright (c) 2026 Theis Gaedigk
 All rights reserved.
 This source code is not to be copied, modified, or distributed in any form
 without explicit written permission from the author.
@@ -14,7 +14,7 @@ server {
  }
  location /backend/ {
-    proxy_pass http://demo_borrow_system-backend_v2:8102/;
+    proxy_pass http://borrow_system-backend_v2:8004/;
  }
  location ~* \.(?:js|mjs|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
@@ -1,7 +1,7 @@
 {
  "name": "admin",
  "private": true,
-  "version": "0.0.0",
+  "version": "v1.3.2 (dev)",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -47,4 +47,4 @@
    "vite": "^7.1.0",
    "vite-tsconfig-paths": "^5.1.4"
  }
-}
+}
@@ -8,13 +8,9 @@ export default defineConfig({
  plugins: [react(), svgr(), tailwindcss(), tsconfigPaths()],
  server: {
    host: "0.0.0.0",
-    allowedHosts: ["admin.insta.the1s.de"],
+    port: 8003,
-    port: 8103,
+    watch: {
-    watch: { usePolling: true },
+      usePolling: true,
    hmr: {
      host: "admin.insta.the1s.de",
      port: 8103,
      protocol: "wss",
    },
  },
 });
@@ -1,11 +1,11 @@
 {
    "backend-info": {
-        "version": "v2.1.1 (demo)"
+        "version": "v2.1.1 (dev)"
    },
    "frontend-info": {
-        "version": "v2.1.2 (demo)"
+        "version": "v2.1.2 (dev)"
    },
    "admin-panel-info": {
-        "version": "v1.3.2 (demo)"
+        "version": "v1.3.2 (dev)"
    }
 }
@@ -1,6 +1,6 @@
 {
  "name": "backendv2",
-  "version": "1.0.0",
+  "version": "v2.1.1 (dev)",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
@@ -29,14 +29,14 @@ export const createUser = async (
 };
 export const deleteUserById = async (userId) => {
-  const [result] = await pool.query("DELETE FROM users WHERE id = ? AND secret_user = false", [userId]);
+  const [result] = await pool.query("DELETE FROM users WHERE id = ?", [userId]);
  if (result.affectedRows > 0) return { success: true };
  return { success: false };
 };
 export const changePassword = async (username, newPassword) => {
  const [result] = await pool.query(
-    "UPDATE users SET password = ?, entry_updated_at = NOW() WHERE username = ? AND secret_user = false",
+    "UPDATE users SET password = ?, entry_updated_at = NOW() WHERE username = ?",
    [newPassword, username],
  );
  if (result.affectedRows > 0) return { success: true };
@@ -52,7 +52,7 @@ export const editUserById = async (
  is_admin,
 ) => {
  const [result] = await pool.query(
-    "UPDATE users SET  first_name = ?, last_name = ?, role = ?, email = ?, is_admin = ?, entry_updated_at = NOW() WHERE id = ? AND secret_user = false",
+    "UPDATE users SET  first_name = ?, last_name = ?, role = ?, email = ?, is_admin = ?, entry_updated_at = NOW() WHERE id = ?",
    [first_name, last_name, role, email, is_admin, userId],
  );
  if (result.affectedRows > 0) return { success: true };
@@ -61,7 +61,7 @@ export const editUserById = async (
 export const getAllUsers = async () => {
  const [result] = await pool.query(
-    "SELECT id, username, first_name, last_name, role, email, is_admin, entry_created_at, entry_updated_at FROM users WHERE secret_user = false",
+    "SELECT id, username, first_name, last_name, role, email, is_admin, entry_created_at, entry_updated_at FROM users",
  );
  if (result.length > 0) return { success: true, data: result };
  return { success: false };
@@ -69,7 +69,7 @@ export const getAllUsers = async () => {
 export const getUserById = async (userId) => {
  const [rows] = await pool.query(
-    "SELECT id, username, first_name, last_name, role, email, is_admin FROM users WHERE id = ? AND secret_user = false",
+    "SELECT id, username, first_name, last_name, role, email, is_admin FROM users WHERE id = ?",
    [userId],
  );
  if (rows.length === 0) {
@@ -1,100 +0,0 @@
 USE borrow_system_new;
 -- USERS
 INSERT INTO users (username, password, email, first_name, last_name, role, is_admin)
 VALUES
  ('user1', 'passwordhash1', 'user1@example.com', 'First1', 'Last1', 1, false),
  ('user2', 'passwordhash2', 'user2@example.com', 'First2', 'Last2', 1, false),
  ('user3', 'passwordhash3', 'user3@example.com', 'First3', 'Last3', 2, false),
  ('admin1', 'passwordhash4', 'admin1@example.com', 'Admin',  'One',  9, true),
  ('admin2', 'passwordhash5', 'admin2@example.com', 'Admin',  'Two',  9, true);
 -- ITEMS
 INSERT INTO items (item_name, can_borrow_role, in_safe, safe_nr, door_key, last_borrowed_person, currently_borrowing)
 VALUES
  ('Item1', 1, true,  1, 101, NULL, NULL),
  ('Item2', 1, true,  2, 102, 'user1', 'user1'),
  ('Item3', 2, true,  3, 103, 'user2', NULL),
  ('Item4', 1, false, NULL, NULL, NULL, NULL),
  ('Item5', 2, false, NULL, NULL, 'user3', 'user3');
 -- LOANS
 INSERT INTO loans (
  username,
  lockers,
  loan_code,
  start_date,
  end_date,
  take_date,
  returned_date,
  created_at,
  loaned_items_id,
  loaned_items_name,
  deleted,
  note
 )
 VALUES
  (
    'user1',
    JSON_ARRAY('Locker1', 'Locker2'),
    '123456',
    '2026-02-01 09:00:00',
    '2026-02-10 17:00:00',
    '2026-02-01 09:15:00',
    NULL,
    '2026-02-01 09:00:00',
    JSON_ARRAY(1, 2),
    JSON_ARRAY('Item1', 'Item2'),
    false,
    'Erste allgemeine Ausleihe'
  ),
  (
    'user2',
    JSON_ARRAY('Locker3'),
    '234567',
    '2026-02-02 10:00:00',
    '2026-02-05 16:00:00',
    '2026-02-02 10:05:00',
    '2026-02-05 15:30:00',
    '2026-02-02 10:00:00',
    JSON_ARRAY(3),
    JSON_ARRAY('Item3'),
    false,
    'Zurückgegeben vor Enddatum'
  ),
  (
    'user3',
    JSON_ARRAY(),
    '345678',
    '2026-02-03 08:30:00',
    '2026-02-15 18:00:00',
    NULL,
    NULL,
    '2026-02-03 08:30:00',
    JSON_ARRAY(5),
    JSON_ARRAY('Item5'),
    false,
    'Noch ausgeliehen'
  ),
  (
    'user1',
    JSON_ARRAY('Locker4'),
    '456789',
    '2025-12-01 09:00:00',
    '2025-12-03 17:00:00',
    '2025-12-01 09:10:00',
    '2025-12-03 16:45:00',
    '2025-12-01 09:00:00',
    JSON_ARRAY(1),
    JSON_ARRAY('Item1'),
    true,
    'Alte, gelöschte Ausleihe'
  );
 -- API KEYS
 INSERT INTO apiKeys (api_key, entry_name)
 VALUES
  ('10000001', 'Entry1'),
  ('10000002', 'Entry2'),
  ('10000003', 'Entry3'),
  ('10000004', 'Entry4');
@@ -11,7 +11,6 @@ CREATE TABLE users (
  is_admin bool NOT NULL DEFAULT false,
  entry_created_at timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  entry_updated_at timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  secret_user bool NOT NULL DEFAULT false,
  PRIMARY KEY (id)
 ) ENGINE=InnoDB;
@@ -20,7 +20,7 @@ import apiRouter from "./routes/api/api.route.js";
 env.config();
 const app = express();
-const port = 8102;
+const port = 8004;
 app.use(cors());
 // Body-Parser VOR den Routen registrieren
@@ -1,37 +1,35 @@
 services:
-  demo_usr_frontend:
+  #  usr-frontend_v2:
-    container_name: demo_borrow_system-usr-frontend
+  #    container_name: borrow_system-usr-frontend
-    networks:
+  #    build: ./FrontendV2
-      - proxynet
+  #    ports:
-    build: ./FrontendV2
+  #      - "8001:80"
-    restart: unless-stopped
+  #    restart: unless-stopped
-  demo_admin_frontend:
+  #  admin-frontend:
-    container_name: demo_borrow_system-admin-frontend
+  #    container_name: borrow_system-admin-frontend
-    networks:
+  #    build: ./admin
-      - proxynet
+  #    ports:
-    build: ./admin
+  #      - "8003:80"
-    restart: unless-stopped
+  #    restart: unless-stopped
-  demo_backend_v2:
+  backend_v2:
-    container_name: demo_borrow_system-backend_v2
+    container_name: borrow_system-backend_v2
    networks:
      - proxynet
    build: ./backendV2
    ports:
      - "8004:8004"
    environment:
      NODE_ENV: production
-      DB_HOST: demo_mysql_v2
+      DB_HOST: mysql_v2
      DB_USER: root
      DB_PASSWORD: ${DB_PASSWORD_V2}
      DB_NAME: borrow_system_new
    depends_on:
-      - demo_mysql_v2
+      - mysql_v2
    restart: unless-stopped
-  demo_mysql_v2:
+  mysql_v2:
-    container_name: demo_borrow_system-mysql-v2
+    container_name: borrow_system-mysql-v2
    networks:
      - proxynet
    image: mysql:8.0
    restart: unless-stopped
    environment:
@@ -39,13 +37,11 @@ services:
      MYSQL_DATABASE: borrow_system_new
      TZ: Europe/Berlin
    volumes:
-      - demo_mysql-v2-data:/var/lib/mysql
+      - mysql-v2-data:/var/lib/mysql
      - ./mysql-timezone.cnf:/etc/mysql/conf.d/timezone.cnf:ro
    ports:
      - "3310:3306"
 volumes:
  mysql-data:
-  demo_mysql-v2-data:
+  mysql-v2-data:
 networks:
  proxynet:
    external: true
Author	SHA1	Message	Date
theis.gaedigk	07503ec079	added animations to borrow-system	2026-04-19 21:32:56 +02:00
theis.gaedigk	4155982aac	edited version infos	2026-04-18 14:57:51 +02:00
theis.gaedigk	59e05e5c4c	changed license	2026-04-15 19:37:59 +02:00
theis.gaedigk	2facdab011	added icon	2026-03-26 23:03:19 +01:00
theis.gaedigk	04db0bd7e0	edited icon	2026-03-26 23:01:05 +01:00
theis.gaedigk	40dd34bcac	changed icon	2026-03-26 22:25:46 +01:00
theis.gaedigk	939d3e89c5	added footage and updated gitignore	2026-03-17 20:35:42 +01:00
theis.gaedigk	a355c42964	added license	2026-02-23 21:37:54 +01:00
		`@@ -1 +0,0 @@`
			`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shapes-icon lucide-shapes"><path d="M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z"/><rect x="3" y="14" width="7" height="7" rx="1"/><circle cx="17.5" cy="17.5" r="3.5"/></svg>`