Began QR code function. Continue it tomorrow...

2026-05-31 19:20:21 +02:00
parent f1a10b0791
commit ecfb309dab
6 changed files with 378 additions and 5 deletions
@@ -0,0 +1,9 @@
+export const ProductQuickView = () => {
+  const product = window.location.search.split("uuid=")[1];
+
+  return (
+    <>
+      <p>View</p>
+    </>
+  );
+};
@@ -19,7 +19,9 @@ import { mutateProduct, getProductDetails } from "../utils/api/products.ts";
 import { toInputDate } from "../utils/uxFncs";
 import type { ProductFormValues } from "../misc/interfaces";
 import type { productDetailsInterface } from "../misc/interfaces";
+import QrCodeIcon from "@mui/icons-material/QrCode";
 import Cookies from "js-cookie";
+import QRCode from "qrcode";

 interface ViewProductProps {
  uuid: string;
@@ -98,6 +100,21 @@ export const ViewProduct = (props: ViewProductProps) => {
    );
  }, [form, productDetails]);

+  const downloadQRcode = async () => {
+    const baseUrl: string = `${window.location.protocol}//${window.location.host}`;
+    const url = `${baseUrl}/app/quick-view/product?uuid=${uuid}`;
+
+    const dataUrl = await QRCode.toDataURL(url, {
+      width: 300,
+      margin: 2,
+    });
+
+    const link = document.createElement("a");
+    link.download = "qrcode.png";
+    link.href = dataUrl;
+    link.click();
+  };
+
  return (
    <>
      <div className="space-y-6">
@@ -106,9 +123,6 @@ export const ViewProduct = (props: ViewProductProps) => {
            <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"
@@ -208,7 +222,7 @@ export const ViewProduct = (props: ViewProductProps) => {
              </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">
+                  <Typography level="title-lg" className="text-slate-900">
                    {t("inventory")}
                  </Typography>
                  <Divider className="my-3" />
@@ -294,6 +308,15 @@ export const ViewProduct = (props: ViewProductProps) => {
              <Typography level="body-sm" className="text-slate-500">
                {t("product-details")}
              </Typography>
+              <Button
+                startDecorator={<QrCodeIcon />}
+                loading={isPending}
+                onClick={() => downloadQRcode()}
+                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("download-qr-code")}
+              </Button>
              <Button
                type="submit"
                loading={isPending}
@@ -17,6 +17,7 @@ import { Route as AppHiddenLayoutStoragesRouteImport } from './routes/app/_hidde
 import { Route as AppHiddenLayoutInventoryRouteImport } from './routes/app/_hiddenLayout/inventory'
 import { Route as AppHiddenLayoutAppSettingsRouteImport } from './routes/app/_hiddenLayout/app-settings'
 import { Route as AppHiddenLayoutAddProductRouteImport } from './routes/app/_hiddenLayout/add-product'
+import { Route as AppHiddenLayoutQuickViewProductRouteImport } from './routes/app/_hiddenLayout/quick-view/product'

 const LoginRoute = LoginRouteImport.update({
  id: '/login',
@@ -62,6 +63,12 @@ const AppHiddenLayoutAddProductRoute =
    path: '/add-product',
    getParentRoute: () => AppHiddenLayoutRoute,
  } as any)
+const AppHiddenLayoutQuickViewProductRoute =
+  AppHiddenLayoutQuickViewProductRouteImport.update({
+    id: '/quick-view/product',
+    path: '/quick-view/product',
+    getParentRoute: () => AppHiddenLayoutRoute,
+  } as any)

 export interface FileRoutesByFullPath {
  '/': typeof IndexRoute
@@ -72,6 +79,7 @@ export interface FileRoutesByFullPath {
  '/app/inventory': typeof AppHiddenLayoutInventoryRoute
  '/app/storages': typeof AppHiddenLayoutStoragesRoute
  '/app/view-product': typeof AppHiddenLayoutViewProductRoute
+  '/app/quick-view/product': typeof AppHiddenLayoutQuickViewProductRoute
 }
 export interface FileRoutesByTo {
  '/': typeof IndexRoute
@@ -82,6 +90,7 @@ export interface FileRoutesByTo {
  '/app/inventory': typeof AppHiddenLayoutInventoryRoute
  '/app/storages': typeof AppHiddenLayoutStoragesRoute
  '/app/view-product': typeof AppHiddenLayoutViewProductRoute
+  '/app/quick-view/product': typeof AppHiddenLayoutQuickViewProductRoute
 }
 export interface FileRoutesById {
  __root__: typeof rootRouteImport
@@ -93,6 +102,7 @@ export interface FileRoutesById {
  '/app/_hiddenLayout/inventory': typeof AppHiddenLayoutInventoryRoute
  '/app/_hiddenLayout/storages': typeof AppHiddenLayoutStoragesRoute
  '/app/_hiddenLayout/view-product': typeof AppHiddenLayoutViewProductRoute
+  '/app/_hiddenLayout/quick-view/product': typeof AppHiddenLayoutQuickViewProductRoute
 }
 export interface FileRouteTypes {
  fileRoutesByFullPath: FileRoutesByFullPath
@@ -105,6 +115,7 @@ export interface FileRouteTypes {
    | '/app/inventory'
    | '/app/storages'
    | '/app/view-product'
+    | '/app/quick-view/product'
  fileRoutesByTo: FileRoutesByTo
  to:
    | '/'
@@ -115,6 +126,7 @@ export interface FileRouteTypes {
    | '/app/inventory'
    | '/app/storages'
    | '/app/view-product'
+    | '/app/quick-view/product'
  id:
    | '__root__'
    | '/'
@@ -125,6 +137,7 @@ export interface FileRouteTypes {
    | '/app/_hiddenLayout/inventory'
    | '/app/_hiddenLayout/storages'
    | '/app/_hiddenLayout/view-product'
+    | '/app/_hiddenLayout/quick-view/product'
  fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -191,6 +204,13 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof AppHiddenLayoutAddProductRouteImport
      parentRoute: typeof AppHiddenLayoutRoute
    }
+    '/app/_hiddenLayout/quick-view/product': {
+      id: '/app/_hiddenLayout/quick-view/product'
+      path: '/quick-view/product'
+      fullPath: '/app/quick-view/product'
+      preLoaderRoute: typeof AppHiddenLayoutQuickViewProductRouteImport
+      parentRoute: typeof AppHiddenLayoutRoute
+    }
  }
 }

@@ -200,6 +220,7 @@ interface AppHiddenLayoutRouteChildren {
  AppHiddenLayoutInventoryRoute: typeof AppHiddenLayoutInventoryRoute
  AppHiddenLayoutStoragesRoute: typeof AppHiddenLayoutStoragesRoute
  AppHiddenLayoutViewProductRoute: typeof AppHiddenLayoutViewProductRoute
+  AppHiddenLayoutQuickViewProductRoute: typeof AppHiddenLayoutQuickViewProductRoute
 }

 const AppHiddenLayoutRouteChildren: AppHiddenLayoutRouteChildren = {
@@ -208,6 +229,7 @@ const AppHiddenLayoutRouteChildren: AppHiddenLayoutRouteChildren = {
  AppHiddenLayoutInventoryRoute: AppHiddenLayoutInventoryRoute,
  AppHiddenLayoutStoragesRoute: AppHiddenLayoutStoragesRoute,
  AppHiddenLayoutViewProductRoute: AppHiddenLayoutViewProductRoute,
+  AppHiddenLayoutQuickViewProductRoute: AppHiddenLayoutQuickViewProductRoute,
 }

 const AppHiddenLayoutRouteWithChildren = AppHiddenLayoutRoute._addFileChildren(
@@ -0,0 +1,10 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { ProductQuickView } from "../../../../pages/ProductQuickView";
+
+export const Route = createFileRoute("/app/_hiddenLayout/quick-view/product")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return <ProductQuickView />;
+}