+ {filters.map((filter, idx) => {
+ if (filter.type === "select") {
+ return (
+ onChange(filter.id, e.target.value)}
+ className="cursor-pointer rounded-xl border border-[var(--line)] bg-transparent px-3 py-2.5 text-xs text-[var(--text)] outline-none transition-colors hover:border-[rgba(106,166,255,0.55)]"
+ >
+ {filter.options.map((opt) => (
+
+ {opt.label}
+
+ ))}
+
+ );
+ }
+ if (filter.type === "input") {
+ return (
+
+ );
+};
diff --git a/Server/src/components/dashboard/ui/InsightCard.jsx b/Server/src/components/dashboard/ui/InsightCard.jsx
new file mode 100644
index 0000000..5ed4100
--- /dev/null
+++ b/Server/src/components/dashboard/ui/InsightCard.jsx
@@ -0,0 +1,42 @@
+import React from "react";
+
+export const InsightCard = ({ title, value, subtitle, items, actionButton }) => {
+ return (
+
+ {cells.map((idx) => {
+ const rowIdx = Math.floor(idx / cols);
+ const colIdx = idx % cols;
+ const distance = clickedCell
+ ? Math.hypot(clickedCell.row - rowIdx, clickedCell.col - colIdx)
+ : 0;
+ const delay = clickedCell ? Math.max(0, distance * 55) : 0; // ms
+ const duration = 200 + distance * 80; // ms
+
+ const style = clickedCell
+ ? {
+ "--delay": `${delay}ms`,
+ "--duration": `${duration}ms`,
+ }
+ : {};
+
+ return (
+
onCellClick?.(rowIdx, colIdx) : undefined
+ } />
+ );
+ })}
+
+ );
+};
diff --git a/Server/src/components/layout/Logo.jsx b/Server/src/components/layout/Logo.jsx
new file mode 100644
index 0000000..7ecd7c0
--- /dev/null
+++ b/Server/src/components/layout/Logo.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { motion } from "motion/react";
+
+export const Logo = () => {
+ return (
+
+
+ );
+};
diff --git a/Server/src/components/layout/LogoSquare.jsx b/Server/src/components/layout/LogoSquare.jsx
new file mode 100644
index 0000000..9813675
--- /dev/null
+++ b/Server/src/components/layout/LogoSquare.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+export const LogoSquare = () => {
+ return (
+
+
+ );
+};
diff --git a/Server/src/components/layout/LogoVertical.jsx b/Server/src/components/layout/LogoVertical.jsx
new file mode 100644
index 0000000..2f577cb
--- /dev/null
+++ b/Server/src/components/layout/LogoVertical.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+export const LogoVertical = () => {
+ return (
+
+
+ );
+};
diff --git a/Server/src/components/onboarding/OnboardingGate.jsx b/Server/src/components/onboarding/OnboardingGate.jsx
new file mode 100644
index 0000000..c311c75
--- /dev/null
+++ b/Server/src/components/onboarding/OnboardingGate.jsx
@@ -0,0 +1,477 @@
+"use client";
+import React, { useState } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { BackgroundRippleEffect } from "@/components/layout/BackgroundRippleEffect";
+import Shuffle from "@/components/ui/Shuffle";
+import ColourfulText from "@/components/ui/colourful-text";
+import { PlaceholdersAndVanishInput } from "@/components/ui/placeholders-and-vanish-input";
+import { MultiStepLoader } from "@/components/ui/multi-step-loader";
+import { IPhoneNotification } from "@/components/ui/iphone-notification";
+import { parseEbayAccount } from "@/services/ebayParserService";
+import { createManagedAccount, fetchManagedAccounts } from "@/services/accountsService";
+import { account, databases, databaseId, usersCollectionId } from "@/lib/appwrite";
+
+export const OnboardingGate = ({ userName, onStart, loading, error }) => {
+ const [phase, setPhase] = useState("shuffle");
+ const [submitting, setSubmitting] = useState(false);
+ const [submitError, setSubmitError] = useState("");
+ const [showNotification, setShowNotification] = useState(false);
+ const [notificationMessage, setNotificationMessage] = useState("bitte eine gueltige url verwenden!");
+ const [skipHovered, setSkipHovered] = useState(false);
+
+ const loadingStates = [
+ { text: "URL wird verarbeitet..." },
+ { text: "Account-Daten werden geladen..." },
+ { text: "Account wird erstellt..." },
+ { text: "Fast fertig..." },
+ ];
+
+ const placeholders = [
+ "Gib deine eBay-Account-URL ein...",
+ "z.B. https://www.ebay.de/str/username",
+ "Paste deine eBay Shop-URL hier...",
+ ];
+
+ const handleOverlayClick = async (e) => {
+ // Only handle clicks on the overlay itself or when in shuffle phase
+ if (phase === "shuffle") {
+ // Create user document first (but don't call onStart, as that would hide the gate)
+ // We need to create it directly to ensure it exists for account creation later
+ try {
+ const authUser = await account.get();
+ if (authUser && databases && databaseId && usersCollectionId) {
+ try {
+ await databases.createDocument(
+ databaseId,
+ usersCollectionId,
+ authUser.$id,
+ {
+ user_name: authUser.name || "User"
+ }
+ );
+ } catch (docErr) {
+ // 409 Conflict means document already exists - that's ok
+ if (docErr.code !== 409 && docErr.type !== 'document_already_exists') {
+ console.warn("Fehler beim Erstellen des User-Dokuments:", docErr);
+ }
+ }
+ }
+ } catch (err) {
+ console.error("Fehler beim Abrufen des Users oder Erstellen des Dokuments:", err);
+ // Continue anyway - might already exist
+ }
+
+ // Add small delay to let the shuffle exit animation complete
+ // Exit animation is 0.5s, so we wait a bit longer to see it fully
+ setTimeout(() => {
+ setPhase("input");
+ }, 600); // 600ms delay - slightly longer than exit animation (500ms)
+ }
+ };
+
+ const handleSkip = async () => {
+ // Skip onboarding - directly call onStart to proceed to dashboard
+ // Must await to ensure User document is created before proceeding
+ if (onStart) {
+ await onStart();
+ }
+ };
+
+ // Validate eBay URL
+ const isValidEbayUrl = (url) => {
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'OnboardingGate.jsx:45',message:'isValidEbayUrl: entry',data:{url,hasUrl:!!url,trimmedUrl:url?.trim()},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'A'})}).catch(()=>{});
+ // #endregion
+
+ if (!url || !url.trim()) {
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'OnboardingGate.jsx:48',message:'isValidEbayUrl: empty url',data:{},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'A'})}).catch(()=>{});
+ // #endregion
+ return false;
+ }
+
+ // Pattern for hostname only (without protocol/path)
+ const ebayHostnamePattern = /^(www\.)?(ebay\.(de|com|co\.uk|fr|it|es|nl|at|ch|com\.au|ca)|ebay-kleinanzeigen\.de)$/i;
+
+ try {
+ const urlObj = new URL(url);
+ const hostname = urlObj.hostname;
+ const patternMatches = ebayHostnamePattern.test(hostname);
+
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'OnboardingGate.jsx:62',message:'isValidEbayUrl: validation result',data:{url,hostname,patternMatches,pattern:ebayHostnamePattern.toString()},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'A'})}).catch(()=>{});
+ // #endregion
+
+ return patternMatches;
+ } catch (e) {
+ // Invalid URL format
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'OnboardingGate.jsx:62',message:'isValidEbayUrl: URL parse error',data:{url,error:e.message},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'A'})}).catch(()=>{});
+ // #endregion
+ return false;
+ }
+ };
+
+ const handleAccountSubmit = async (e, url) => {
+ e.preventDefault();
+
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'OnboardingGate.jsx:59',message:'handleAccountSubmit: entry',data:{url,hasUrl:!!url,phase},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'B'})}).catch(()=>{});
+ // #endregion
+
+ if (!url || !url.trim()) {
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'OnboardingGate.jsx:64',message:'handleAccountSubmit: empty url, showing notification',data:{},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'B'})}).catch(()=>{});
+ // #endregion
+ setNotificationMessage("bitte eine gueltige url verwenden!");
+ setShowNotification(true);
+ return;
+ }
+
+ // Validate eBay URL
+ const isValid = isValidEbayUrl(url);
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'OnboardingGate.jsx:71',message:'handleAccountSubmit: validation result',data:{url,isValid},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'A'})}).catch(()=>{});
+ // #endregion
+
+ if (!isValid) {
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'OnboardingGate.jsx:76',message:'handleAccountSubmit: invalid url, showing notification',data:{url},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'A'})}).catch(()=>{});
+ // #endregion
+ setNotificationMessage("bitte eine gueltige url verwenden!");
+ setShowNotification(true);
+ return;
+ }
+
+ setSubmitting(true);
+ setSubmitError("");
+
+ // Wait 2 seconds for vanish animation, then switch to loading phase
+ setTimeout(async () => {
+ // Switch to loading phase first
+ setPhase("loading");
+
+ try {
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'OnboardingGate.jsx:88',message:'handleAccountSubmit: before parseEbayAccount',data:{url},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'C'})}).catch(()=>{});
+ // #endregion
+
+ // Parse eBay account
+ const accountData = await parseEbayAccount(url);
+
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'OnboardingGate.jsx:93',message:'handleAccountSubmit: parseEbayAccount success',data:{url,hasAccountData:!!accountData,market:accountData?.market,sellerId:accountData?.sellerId},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'C'})}).catch(()=>{});
+ // #endregion
+
+ // Validate that sellerId was extracted successfully
+ if (!accountData.sellerId || accountData.sellerId.trim() === "") {
+ throw new Error("Die eBay-URL konnte nicht verarbeitet werden. Bitte stelle sicher, dass es eine gültige eBay-Shop-URL ist.");
+ }
+
+ // Get current user
+ const authUser = await account.get();
+
+ // Check for duplicate account before creating
+ const existingAccounts = await fetchManagedAccounts(authUser.$id);
+ const duplicateAccount = existingAccounts.find(
+ (acc) =>
+ acc.account_platform_account_id === accountData.sellerId &&
+ acc.account_platform_market === accountData.market
+ );
+
+ if (duplicateAccount) {
+ throw new Error("Dieser Account ist bereits verbunden.");
+ }
+
+ // Create account in database
+ await createManagedAccount(authUser.$id, {
+ account_platform_market: accountData.market,
+ account_platform_account_id: accountData.sellerId,
+ account_shop_name: accountData.shopName || null,
+ account_url: url,
+ account_status: accountData.status || "active",
+ });
+
+ // Account erstellt erfolgreich, rufe onStart auf
+ onStart && onStart();
+
+ // Trigger event to reload Dashboard accounts
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'OnboardingGate.jsx:142',message:'handleAccountSubmit: account created, triggering reload event',data:{url},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'B'})}).catch(()=>{});
+ // #endregion
+ window.dispatchEvent(new CustomEvent('accountsUpdated'));
+ } catch (err) {
+ console.error("Fehler beim Erstellen des Accounts:", err);
+
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'OnboardingGate.jsx:106',message:'handleAccountSubmit: error caught',data:{url,errorMessage:err.message,errorCode:err.code,errorType:err.type,errorStack:err.stack?.substring(0,200)},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'C'})}).catch(()=>{});
+ // #endregion
+
+ // Show notification for URL validation, duplicate, or parsing errors
+ if (
+ err.message?.includes("URL") ||
+ err.message?.includes("ungültig") ||
+ err.message?.includes("invalid") ||
+ err.message?.includes("bereits verbunden") ||
+ err.message?.includes("already")
+ ) {
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'OnboardingGate.jsx:205',message:'handleAccountSubmit: URL/duplicate error, showing notification',data:{errorMessage:err.message},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'C'})}).catch(()=>{});
+ // #endregion
+ // Use the actual error message or default message
+ setNotificationMessage(err.message || "bitte eine gueltige url verwenden!");
+ setShowNotification(true);
+ } else {
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'OnboardingGate.jsx:175',message:'handleAccountSubmit: non-URL error, setting submitError',data:{errorMessage:err.message},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'C'})}).catch(()=>{});
+ // #endregion
+ setSubmitError(err.message || "Fehler beim Erstellen des Accounts. Bitte versuche es erneut.");
+ }
+ setPhase("input");
+ setSubmitting(false);
+ }
+ }, 2000); // 2 second delay for vanish animation
+ };
+
+ return (
+
+
+
+ {/* Skip Button - Bottom Left */}
+
setSkipHovered(true)}
+ onMouseLeave={() => setSkipHovered(false)}
+ >
+
+ Skip
+
+
+ {/* iPhone-style Notification */}
+
setShowNotification(false)}
+ duration={4000}
+ />
+
+ {/* Shuffle and Input Phases - Combined AnimatePresence for smooth transition */}
+
+ {phase === "shuffle" && (
+ {
+ e.stopPropagation(); // Prevent double-triggering
+ handleOverlayClick(e);
+ }}
+ >
+
+ ,
+
+
+ )}
+
+ {phase === "input" && (
+
+
+
+ Gib deine
+ ein
+
+
+
{
+ setSubmitError("");
+ setShowNotification(false);
+ setNotificationMessage("bitte eine gueltige url verwenden!"); // Reset to default
+ }}
+ onSubmit={handleAccountSubmit}
+ />
+
+ {(submitError || error) && !showNotification && (
+
+ {submitError || error}
+
+ )}
+
+ )}
+
+
+ {/* Loading Phase */}
+ {phase === "loading" && (
+
+ );
+};
+
+const styles = {
+ overlay: {
+ position: "fixed",
+ inset: 0,
+ background: "rgba(0,0,0,0.75)",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ padding: 18,
+ zIndex: 9998,
+ overflow: "hidden",
+ },
+ centerContent: {
+ position: "relative",
+ zIndex: 10, // Higher than BackgroundRippleEffect (z-[3] = z-index: 3) to ensure input is clickable
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+ justifyContent: "center",
+ width: "100%",
+ maxWidth: "800px",
+ padding: "0 20px",
+ cursor: "default",
+ },
+ shuffleContainer: {
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ flexWrap: "wrap",
+ gap: "0",
+ },
+ staticComma: {
+ fontSize: "4rem",
+ fontWeight: 800,
+ color: "#e7aaf0",
+ marginLeft: "0.1em",
+ marginRight: "0.1em",
+ display: "inline-block",
+ },
+ inputContainer: {
+ width: "100%",
+ maxWidth: "600px",
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+ gap: "24px",
+ },
+ colourfulTextContainer: {
+ display: "flex",
+ alignItems: "center",
+ flexWrap: "wrap",
+ justifyContent: "center",
+ gap: "4px",
+ fontSize: "24px",
+ fontWeight: 600,
+ color: "#e7aaf0",
+ marginBottom: "8px",
+ textAlign: "center",
+ },
+ textPrefix: {
+ color: "#e7aaf0",
+ },
+ error: {
+ marginTop: 12,
+ color: "#ffb3b3",
+ fontSize: 13,
+ textAlign: "center",
+ padding: "8px 16px",
+ backgroundColor: "rgba(255, 179, 179, 0.1)",
+ borderRadius: "8px",
+ border: "1px solid rgba(255, 179, 179, 0.3)",
+ },
+ skipButton: {
+ position: "fixed",
+ bottom: 20,
+ left: 20,
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "flex-start",
+ width: "32px",
+ height: "32px",
+ border: "none",
+ borderRadius: "50%",
+ cursor: "pointer",
+ backgroundColor: "rgb(255, 65, 65)",
+ boxShadow: "2px 2px 10px rgba(0, 0, 0, 0.199)",
+ transition: "all 0.3s ease",
+ overflow: "hidden",
+ zIndex: 10001,
+ },
+ skipSign: {
+ width: "100%",
+ transition: "all 0.3s ease",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ },
+ skipText: {
+ position: "absolute",
+ right: "0%",
+ width: "0%",
+ opacity: 0,
+ color: "white",
+ fontSize: "0.9em",
+ fontWeight: 600,
+ transition: "all 0.3s ease",
+ whiteSpace: "nowrap",
+ },
+};
diff --git a/Server/src/components/sidebar/Sidebar.jsx b/Server/src/components/sidebar/Sidebar.jsx
new file mode 100644
index 0000000..e5bad4b
--- /dev/null
+++ b/Server/src/components/sidebar/Sidebar.jsx
@@ -0,0 +1,151 @@
+"use client";
+import { cn } from "../../lib/utils";
+import React, { useState, createContext, useContext } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { IconMenu2, IconX } from "@tabler/icons-react";
+
+const SidebarContext = createContext(undefined);
+
+export const useSidebar = () => {
+ const context = useContext(SidebarContext);
+ if (!context) {
+ throw new Error("useSidebar must be used within a SidebarProvider");
+ }
+ return context;
+};
+
+export const SidebarProvider = ({
+ children,
+ open: openProp,
+ setOpen: setOpenProp,
+ animate = true
+}) => {
+ const [openState, setOpenState] = useState(false);
+
+ const open = openProp !== undefined ? openProp : openState;
+ const setOpen = setOpenProp !== undefined ? setOpenProp : setOpenState;
+
+ return (
+
+ {children}
+
+ );
+};
+
+export const Sidebar = ({
+ children,
+ open,
+ setOpen,
+ animate
+}) => {
+ return (
+
+ {children}
+
+ );
+};
+
+export const SidebarBody = (props) => {
+ return (
+ <>
+
+
+
+ );
+};
+
+export const DesktopSidebar = ({
+ className,
+ children,
+ ...props
+}) => {
+ const { open, setOpen, animate } = useSidebar();
+ return (
+ <>
+
setOpen(true)}
+ onMouseLeave={() => setOpen(false)}
+ {...props}>
+ {children}
+
+
+ );
+};
+
+export const MobileSidebar = ({
+ className,
+ children,
+ ...props
+}) => {
+ const { open, setOpen } = useSidebar();
+ return (
+ <>
+
+
+ setOpen(!open)} />
+
+
+ {open && (
+
+ setOpen(!open)}>
+
+ {children}
+
+ )}
+
+
+
+ );
+};
+
+export const SidebarLink = ({
+ link,
+ className,
+ ...props
+}) => {
+ const { open, animate } = useSidebar();
+ return (
+
+ {link.icon}
+
+ {link.label}
+
+
+ );
+};
diff --git a/Server/src/components/sidebar/SidebarHeader.jsx b/Server/src/components/sidebar/SidebarHeader.jsx
new file mode 100644
index 0000000..79c3251
--- /dev/null
+++ b/Server/src/components/sidebar/SidebarHeader.jsx
@@ -0,0 +1,199 @@
+"use client";
+import React, { useState, useEffect, useRef } from "react";
+import { IconChevronDown } from "@tabler/icons-react";
+import { motion, AnimatePresence } from "motion/react";
+import { cn } from "../../lib/utils";
+import { useHashRoute } from "../../lib/routing";
+import {
+ getActiveAccountId,
+ setActiveAccountId,
+ resolveActiveAccount,
+ getAccountDisplayName,
+} from "../../services/accountService";
+import { fetchManagedAccounts } from "../../services/accountsService";
+import { getAuthUser } from "../../lib/appwrite";
+
+export const SidebarHeader = () => {
+ const { navigate } = useHashRoute();
+ const [accounts, setAccounts] = useState([]);
+ const [activeAccount, setActiveAccount] = useState(null);
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+ const [loading, setLoading] = useState(true);
+ const dropdownRef = useRef(null);
+
+ // Accounts laden
+ useEffect(() => {
+ async function loadAccounts() {
+ setLoading(true);
+ try {
+ const authUser = await getAuthUser();
+ if (!authUser) {
+ setAccounts([]);
+ setActiveAccount(null);
+ return;
+ }
+
+ const loadedAccounts = await fetchManagedAccounts(authUser.$id);
+ setAccounts(loadedAccounts);
+ const active = resolveActiveAccount(loadedAccounts);
+ setActiveAccount(active);
+ } catch (e) {
+ console.error("Fehler beim Laden der Accounts:", e);
+ setAccounts([]);
+ setActiveAccount(null);
+ } finally {
+ setLoading(false);
+ }
+ }
+
+ loadAccounts();
+ }, []);
+
+ // Event-Listener für activeAccountChanged (wenn Account in anderer Komponente gewechselt wird)
+ useEffect(() => {
+ function handleActiveAccountChanged(event) {
+ const { accountId } = event.detail;
+ // Account aus aktueller Liste finden und als aktiv setzen
+ const foundAccount = accounts.find(
+ (acc) => acc.$id === accountId || acc.id === accountId
+ );
+ if (foundAccount) {
+ setActiveAccount(foundAccount);
+ }
+ }
+
+ window.addEventListener("activeAccountChanged", handleActiveAccountChanged);
+ return () => {
+ window.removeEventListener("activeAccountChanged", handleActiveAccountChanged);
+ };
+ }, [accounts]);
+
+ // Click outside handler für Dropdown
+ useEffect(() => {
+ function handleClickOutside(event) {
+ if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+ setDropdownOpen(false);
+ }
+ }
+
+ if (dropdownOpen) {
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside);
+ };
+ }
+ }, [dropdownOpen]);
+
+ const handleHeaderClick = () => {
+ if (accounts.length === 0) {
+ // Keine Accounts: direkt zu /accounts navigieren
+ navigate("/accounts");
+ } else {
+ // Accounts existieren: Dropdown öffnen/schließen
+ setDropdownOpen(!dropdownOpen);
+ }
+ };
+
+ const handleAccountSelect = (account) => {
+ const accountId = account.$id || account.id;
+ setActiveAccountId(accountId);
+ setActiveAccount(account);
+ setDropdownOpen(false);
+ };
+
+ const handleManageAccounts = () => {
+ setDropdownOpen(false);
+ navigate("/accounts");
+ };
+
+ const displayText =
+ accounts.length === 0
+ ? "Add Account"
+ : activeAccount
+ ? getAccountDisplayName(activeAccount)
+ : "Add Account";
+
+ return (
+
+
+
+ {loading ? "Loading..." : displayText}
+
+ {accounts.length > 0 && (
+
+
+
+ {dropdownOpen && accounts.length > 0 && (
+
+
+ {accounts.map((account) => {
+ const accountId = account.$id || account.id;
+ const currentActiveId = getActiveAccountId();
+ const isActive = accountId === currentActiveId;
+ const displayName = getAccountDisplayName(account);
+
+ return (
+
handleAccountSelect(account)}
+ className={cn(
+ "flex w-full items-center gap-3 px-3 py-2.5 text-left text-sm transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-700",
+ isActive && "bg-blue-50 dark:bg-blue-900/20"
+ )}
+ >
+
+ {displayName}
+
+ {isActive && (
+
+ );
+ })}
+
+
+
+
+ Manage Accounts
+
+
+ )}
+
+
+ );
+};
\ No newline at end of file
diff --git a/Server/src/components/sidebar/index.js b/Server/src/components/sidebar/index.js
new file mode 100644
index 0000000..a5f8b0b
--- /dev/null
+++ b/Server/src/components/sidebar/index.js
@@ -0,0 +1 @@
+export { Sidebar, SidebarBody, SidebarLink, useSidebar } from "./Sidebar.jsx";
diff --git a/Server/src/components/ui/LogoutButton.jsx b/Server/src/components/ui/LogoutButton.jsx
new file mode 100644
index 0000000..a8d1c08
--- /dev/null
+++ b/Server/src/components/ui/LogoutButton.jsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const LogoutButton = ({ onClick }) => {
+ return (
+
+
+
+ Logout
+
+
+ );
+}
+
+const StyledWrapper = styled.div`
+ .Btn {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ width: 32px;
+ height: 32px;
+ border: none;
+ border-radius: 50%;
+ cursor: pointer;
+ position: relative;
+ overflow: hidden;
+ transition-duration: .3s;
+ box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
+ background-color: rgb(255, 65, 65);
+ }
+
+ /* plus sign */
+ .sign {
+ width: 100%;
+ transition-duration: .3s;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .sign svg {
+ width: 12px;
+ }
+
+ .sign svg path {
+ fill: white;
+ }
+ /* text */
+ .text {
+ position: absolute;
+ right: 0%;
+ width: 0%;
+ opacity: 0;
+ color: white;
+ font-size: 0.9em;
+ font-weight: 600;
+ transition-duration: .3s;
+ }
+ /* hover effect on button width */
+ .Btn:hover {
+ width: 90px;
+ border-radius: 40px;
+ transition-duration: .3s;
+ }
+
+ .Btn:hover .sign {
+ width: 30%;
+ transition-duration: .3s;
+ padding-left: 15px;
+ }
+ /* hover effect button's text */
+ .Btn:hover .text {
+ opacity: 1;
+ width: 70%;
+ transition-duration: .3s;
+ padding-right: 8px;
+ }
+ /* button click effect*/
+ .Btn:active {
+ transform: translate(2px ,2px);
+ }`;
+
+export default LogoutButton;
diff --git a/Server/src/components/ui/Shuffle.jsx b/Server/src/components/ui/Shuffle.jsx
new file mode 100644
index 0000000..be5e0e7
--- /dev/null
+++ b/Server/src/components/ui/Shuffle.jsx
@@ -0,0 +1,392 @@
+"use client";
+import React, { useRef, useEffect, useState, useMemo } from 'react';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import { SplitText as GSAPSplitText } from 'gsap/SplitText';
+import { useGSAP } from '@gsap/react';
+
+gsap.registerPlugin(ScrollTrigger, GSAPSplitText, useGSAP);
+
+const Shuffle = ({
+ text,
+ className = '',
+ style = {},
+ shuffleDirection = 'right',
+ duration = 0.35,
+ maxDelay = 0,
+ ease = 'power3.out',
+ threshold = 0.1,
+ rootMargin = '-100px',
+ tag = 'p',
+ textAlign = 'center',
+ onShuffleComplete,
+ shuffleTimes = 1,
+ animationMode = 'evenodd',
+ loop = false,
+ loopDelay = 0,
+ stagger = 0.03,
+ scrambleCharset = '',
+ colorFrom,
+ colorTo,
+ triggerOnce = true,
+ respectReducedMotion = true,
+ triggerOnHover = true
+}) => {
+ const ref = useRef(null);
+ const [fontsLoaded, setFontsLoaded] = useState(false);
+ const [ready, setReady] = useState(false);
+
+ const splitRef = useRef(null);
+ const wrappersRef = useRef([]);
+ const tlRef = useRef(null);
+ const playingRef = useRef(false);
+ const hoverHandlerRef = useRef(null);
+
+ const userHasFont = useMemo(
+ () => (style && style.fontFamily) || (className && /font[-[]/i.test(className)),
+ [style, className]
+ );
+
+ const scrollTriggerStart = useMemo(() => {
+ const startPct = (1 - threshold) * 100;
+ const mm = /^(-?\d+(?:\.\d+)?)(px|em|rem|%)?$/.exec(rootMargin || '');
+ const mv = mm ? parseFloat(mm[1]) : 0;
+ const mu = mm ? mm[2] || 'px' : 'px';
+ const sign = mv === 0 ? '' : mv < 0 ? `-=${Math.abs(mv)}${mu}` : `+=${mv}${mu}`;
+ return `top ${startPct}%${sign}`;
+ }, [threshold, rootMargin]);
+
+ useEffect(() => {
+ if ('fonts' in document) {
+ if (document.fonts.status === 'loaded') setFontsLoaded(true);
+ else document.fonts.ready.then(() => setFontsLoaded(true));
+ } else setFontsLoaded(true);
+ }, []);
+
+ useGSAP(
+ () => {
+ if (!ref.current || !text || !fontsLoaded) return;
+
+ if (respectReducedMotion && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+ onShuffleComplete?.();
+ return;
+ }
+
+ const el = ref.current;
+
+ let computedFont = '';
+ if (userHasFont) {
+ computedFont = style.fontFamily || getComputedStyle(el).fontFamily || '';
+ } else {
+ computedFont = `'Press Start 2P', sans-serif`;
+ }
+
+ const start = scrollTriggerStart;
+
+ const removeHover = () => {
+ if (hoverHandlerRef.current && ref.current) {
+ ref.current.removeEventListener('mouseenter', hoverHandlerRef.current);
+ hoverHandlerRef.current = null;
+ }
+ };
+
+ const teardown = () => {
+ if (tlRef.current) {
+ tlRef.current.kill();
+ tlRef.current = null;
+ }
+ if (wrappersRef.current.length) {
+ wrappersRef.current.forEach(wrap => {
+ const inner = wrap.firstElementChild;
+ const orig = inner?.querySelector('[data-orig="1"]');
+ if (orig && wrap.parentNode) wrap.parentNode.replaceChild(orig, wrap);
+ });
+ wrappersRef.current = [];
+ }
+ try {
+ splitRef.current?.revert();
+ } catch {
+ /* noop */
+ }
+ splitRef.current = null;
+ playingRef.current = false;
+ };
+
+ const build = () => {
+ teardown();
+
+ splitRef.current = new GSAPSplitText(el, {
+ type: 'chars',
+ charsClass: 'shuffle-char',
+ wordsClass: 'shuffle-word',
+ linesClass: 'shuffle-line',
+ smartWrap: true,
+ reduceWhiteSpace: false
+ });
+
+ const chars = splitRef.current.chars || [];
+ wrappersRef.current = [];
+
+ const rolls = Math.max(1, Math.floor(shuffleTimes));
+ const rand = set => set.charAt(Math.floor(Math.random() * set.length)) || '';
+
+ chars.forEach(ch => {
+ const parent = ch.parentElement;
+ if (!parent) return;
+
+ const w = ch.getBoundingClientRect().width;
+ const h = ch.getBoundingClientRect().height;
+ if (!w) return;
+
+ const wrap = document.createElement('span');
+ wrap.className = 'inline-block overflow-hidden text-left';
+ Object.assign(wrap.style, {
+ width: w + 'px',
+ height: shuffleDirection === 'up' || shuffleDirection === 'down' ? h + 'px' : 'auto',
+ verticalAlign: 'bottom'
+ });
+
+ const inner = document.createElement('span');
+ inner.className =
+ 'inline-block will-change-transform origin-left transform-gpu ' +
+ (shuffleDirection === 'up' || shuffleDirection === 'down' ? 'whitespace-normal' : 'whitespace-nowrap');
+
+ parent.insertBefore(wrap, ch);
+ wrap.appendChild(inner);
+
+ const firstOrig = ch.cloneNode(true);
+ firstOrig.className =
+ 'text-left ' + (shuffleDirection === 'up' || shuffleDirection === 'down' ? 'block' : 'inline-block');
+ Object.assign(firstOrig.style, { width: w + 'px', fontFamily: computedFont });
+
+ ch.setAttribute('data-orig', '1');
+ ch.className =
+ 'text-left ' + (shuffleDirection === 'up' || shuffleDirection === 'down' ? 'block' : 'inline-block');
+ Object.assign(ch.style, { width: w + 'px', fontFamily: computedFont });
+
+ inner.appendChild(firstOrig);
+ for (let k = 0; k < rolls; k++) {
+ const c = ch.cloneNode(true);
+ if (scrambleCharset) c.textContent = rand(scrambleCharset);
+ c.className =
+ 'text-left ' + (shuffleDirection === 'up' || shuffleDirection === 'down' ? 'block' : 'inline-block');
+ Object.assign(c.style, { width: w + 'px', fontFamily: computedFont });
+ inner.appendChild(c);
+ }
+ inner.appendChild(ch);
+
+ const steps = rolls + 1;
+
+ if (shuffleDirection === 'right' || shuffleDirection === 'down') {
+ const firstCopy = inner.firstElementChild;
+ const real = inner.lastElementChild;
+ if (real) inner.insertBefore(real, inner.firstChild);
+ if (firstCopy) inner.appendChild(firstCopy);
+ }
+
+ let startX = 0;
+ let finalX = 0;
+ let startY = 0;
+ let finalY = 0;
+
+ if (shuffleDirection === 'right') {
+ startX = -steps * w;
+ finalX = 0;
+ } else if (shuffleDirection === 'left') {
+ startX = 0;
+ finalX = -steps * w;
+ } else if (shuffleDirection === 'down') {
+ startY = -steps * h;
+ finalY = 0;
+ } else if (shuffleDirection === 'up') {
+ startY = 0;
+ finalY = -steps * h;
+ }
+
+ if (shuffleDirection === 'left' || shuffleDirection === 'right') {
+ gsap.set(inner, { x: startX, y: 0, force3D: true });
+ inner.setAttribute('data-start-x', String(startX));
+ inner.setAttribute('data-final-x', String(finalX));
+ } else {
+ gsap.set(inner, { x: 0, y: startY, force3D: true });
+ inner.setAttribute('data-start-y', String(startY));
+ inner.setAttribute('data-final-y', String(finalY));
+ }
+
+ if (colorFrom) inner.style.color = colorFrom;
+ wrappersRef.current.push(wrap);
+ });
+ };
+
+ const inners = () => wrappersRef.current.map(w => w.firstElementChild);
+
+ const randomizeScrambles = () => {
+ if (!scrambleCharset) return;
+ wrappersRef.current.forEach(w => {
+ const strip = w.firstElementChild;
+ if (!strip) return;
+ const kids = Array.from(strip.children);
+ for (let i = 1; i < kids.length - 1; i++) {
+ kids[i].textContent = scrambleCharset.charAt(Math.floor(Math.random() * scrambleCharset.length));
+ }
+ });
+ };
+
+ const cleanupToStill = () => {
+ wrappersRef.current.forEach(w => {
+ const strip = w.firstElementChild;
+ if (!strip) return;
+ const real = strip.querySelector('[data-orig="1"]');
+ if (!real) return;
+ strip.replaceChildren(real);
+ strip.style.transform = 'none';
+ strip.style.willChange = 'auto';
+ });
+ };
+
+ const play = () => {
+ const strips = inners();
+ if (!strips.length) return;
+
+ playingRef.current = true;
+ const isVertical = shuffleDirection === 'up' || shuffleDirection === 'down';
+
+ const tl = gsap.timeline({
+ smoothChildTiming: true,
+ repeat: loop ? -1 : 0,
+ repeatDelay: loop ? loopDelay : 0,
+ onRepeat: () => {
+ if (scrambleCharset) randomizeScrambles();
+ if (isVertical) {
+ gsap.set(strips, { y: (i, t) => parseFloat(t.getAttribute('data-start-y') || '0') });
+ } else {
+ gsap.set(strips, { x: (i, t) => parseFloat(t.getAttribute('data-start-x') || '0') });
+ }
+ onShuffleComplete?.();
+ },
+ onComplete: () => {
+ playingRef.current = false;
+ if (!loop) {
+ cleanupToStill();
+ if (colorTo) gsap.set(strips, { color: colorTo });
+ onShuffleComplete?.();
+ armHover();
+ }
+ }
+ });
+
+ const addTween = (targets, at) => {
+ const vars = {
+ duration,
+ ease,
+ force3D: true,
+ stagger: animationMode === 'evenodd' ? stagger : 0
+ };
+ if (isVertical) {
+ vars.y = (i, t) => parseFloat(t.getAttribute('data-final-y') || '0');
+ } else {
+ vars.x = (i, t) => parseFloat(t.getAttribute('data-final-x') || '0');
+ }
+
+ tl.to(targets, vars, at);
+
+ if (colorFrom && colorTo) tl.to(targets, { color: colorTo, duration, ease }, at);
+ };
+
+ if (animationMode === 'evenodd') {
+ const odd = strips.filter((_, i) => i % 2 === 1);
+ const even = strips.filter((_, i) => i % 2 === 0);
+ const oddTotal = duration + Math.max(0, odd.length - 1) * stagger;
+ const evenStart = odd.length ? oddTotal * 0.7 : 0;
+ if (odd.length) addTween(odd, 0);
+ if (even.length) addTween(even, evenStart);
+ } else {
+ strips.forEach(strip => {
+ const d = Math.random() * maxDelay;
+ const vars = {
+ duration,
+ ease,
+ force3D: true
+ };
+ if (isVertical) {
+ vars.y = parseFloat(strip.getAttribute('data-final-y') || '0');
+ } else {
+ vars.x = parseFloat(strip.getAttribute('data-final-x') || '0');
+ }
+ tl.to(strip, vars, d);
+ if (colorFrom && colorTo) tl.fromTo(strip, { color: colorFrom }, { color: colorTo, duration, ease }, d);
+ });
+ }
+
+ tlRef.current = tl;
+ };
+
+ const armHover = () => {
+ if (!triggerOnHover || !ref.current) return;
+ removeHover();
+ const handler = () => {
+ if (playingRef.current) return;
+ build();
+ if (scrambleCharset) randomizeScrambles();
+ play();
+ };
+ hoverHandlerRef.current = handler;
+ ref.current.addEventListener('mouseenter', handler);
+ };
+
+ const create = () => {
+ build();
+ if (scrambleCharset) randomizeScrambles();
+ play();
+ armHover();
+ setReady(true);
+ };
+
+ const st = ScrollTrigger.create({ trigger: el, start, once: triggerOnce, onEnter: create });
+
+ return () => {
+ st.kill();
+ removeHover();
+ teardown();
+ setReady(false);
+ };
+ },
+ {
+ dependencies: [
+ text,
+ duration,
+ maxDelay,
+ ease,
+ scrollTriggerStart,
+ fontsLoaded,
+ shuffleDirection,
+ shuffleTimes,
+ animationMode,
+ loop,
+ loopDelay,
+ stagger,
+ scrambleCharset,
+ colorFrom,
+ colorTo,
+ triggerOnce,
+ respectReducedMotion,
+ triggerOnHover,
+ onShuffleComplete,
+ userHasFont
+ ],
+ scope: ref
+ }
+ );
+
+ const baseTw = 'inline-block whitespace-normal break-words will-change-transform uppercase text-[4rem] leading-none';
+ const classes = useMemo(
+ () => `${baseTw} ${ready ? 'visible' : 'invisible'} ${className}`.trim(),
+ [baseTw, ready, className]
+ );
+ const Tag = tag || 'p';
+ const commonStyle = useMemo(() => ({ textAlign, ...style }), [textAlign, style]);
+
+ return React.createElement(Tag, { ref: ref, className: classes, style: commonStyle }, text);
+};
+
+export default Shuffle;
diff --git a/Server/src/components/ui/colourful-text.jsx b/Server/src/components/ui/colourful-text.jsx
new file mode 100644
index 0000000..16b0d88
--- /dev/null
+++ b/Server/src/components/ui/colourful-text.jsx
@@ -0,0 +1,52 @@
+"use client";
+import React from "react";
+import { motion } from "motion/react";
+
+export default function ColourfulText({ text }) {
+ const colors = [
+ "rgb(131, 179, 32)",
+ "rgb(47, 195, 106)",
+ "rgb(42, 169, 210)",
+ "rgb(4, 112, 202)",
+ "rgb(107, 10, 255)",
+ "rgb(183, 0, 218)",
+ "rgb(218, 0, 171)",
+ "rgb(230, 64, 92)",
+ "rgb(232, 98, 63)",
+ "rgb(249, 129, 47)",
+ ];
+
+ const [currentColors, setCurrentColors] = React.useState(colors);
+ const [count, setCount] = React.useState(0);
+
+ React.useEffect(() => {
+ const interval = setInterval(() => {
+ const shuffled = [...colors].sort(() => Math.random() - 0.5);
+ setCurrentColors(shuffled);
+ setCount((prev) => prev + 1);
+ }, 5000);
+
+ return () => clearInterval(interval);
+ }, []);
+
+ return text.split("").map((char, index) => (
+
+ {char}
+
+ ));
+}
diff --git a/Server/src/components/ui/iphone-notification.jsx b/Server/src/components/ui/iphone-notification.jsx
new file mode 100644
index 0000000..0bea74c
--- /dev/null
+++ b/Server/src/components/ui/iphone-notification.jsx
@@ -0,0 +1,107 @@
+"use client";
+import React, { useState } from "react";
+import { motion, AnimatePresence } from "motion/react";
+
+export function IPhoneNotification({ show, title, message, onClose, duration = 3000 }) {
+ const [isHovered, setIsHovered] = useState(false);
+
+ React.useEffect(() => {
+ if (show && duration > 0) {
+ const timer = setTimeout(() => {
+ onClose && onClose();
+ }, duration);
+
+ return () => clearTimeout(timer);
+ }
+ }, [show, duration, onClose]);
+
+ return (
+
+ {show && (
+ setIsHovered(true)}
+ onHoverEnd={() => setIsHovered(false)}
+ whileHover={{ scale: 1.05 }}
+ >
+
+ )}
+
+ );
+}
+
+const styles = {
+ card: {
+ position: "fixed",
+ top: 20,
+ left: "50%",
+ width: "100%",
+ maxWidth: "290px",
+ height: "70px",
+ background: "#27272a", // zinc-800 - same grey as search bar
+ borderRadius: "20px",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "left",
+ backdropFilter: "blur(10px)",
+ transition: "0.5s ease-in-out",
+ zIndex: 10000,
+ cursor: "pointer",
+ boxShadow: "0 4px 12px rgba(0, 0, 0, 0.5)",
+ border: "1px solid rgba(231, 170, 240, 0.2)",
+ },
+ img: {
+ width: "50px",
+ height: "50px",
+ marginLeft: "10px",
+ borderRadius: "10px",
+ background: "linear-gradient(#d7cfcf, #9198e5)",
+ transition: "0.5s ease-in-out",
+ },
+ textBox: {
+ width: "calc(100% - 90px)",
+ marginLeft: "10px",
+ color: "#e7aaf0",
+ fontFamily: "'Poppins', sans-serif",
+ },
+ textContent: {
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "space-between",
+ },
+ span: {
+ fontSize: "10px",
+ opacity: 0.7,
+ },
+ h1: {
+ fontSize: "16px",
+ fontWeight: "bold",
+ margin: 0,
+ },
+ p: {
+ fontSize: "12px",
+ fontWeight: "lighter",
+ margin: "4px 0 0 0",
+ opacity: 0.8,
+ },
+};
\ No newline at end of file
diff --git a/Server/src/components/ui/multi-step-loader.jsx b/Server/src/components/ui/multi-step-loader.jsx
new file mode 100644
index 0000000..a5b2d69
--- /dev/null
+++ b/Server/src/components/ui/multi-step-loader.jsx
@@ -0,0 +1,97 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { AnimatePresence, motion } from "motion/react";
+
+function LoaderCore({ loadingStates, value }) {
+ return (
+
+ {loadingStates.map((state, index) => {
+ const distance = Math.abs(index - value);
+ const opacity = Math.max(1 - distance * 0.2, 0);
+ return (
+
+
+ {index > value ? (
+
+
+ ) : (
+
+
+ )}
+
+ {state.text}
+
+
+ );
+ })}
+
+ );
+}
+
+export function MultiStepLoader({
+ loadingStates,
+ loading = false,
+ duration = 2000,
+ loop = true,
+}) {
+ const [currentValue, setCurrentValue] = useState(0);
+
+ useEffect(() => {
+ if (!loading) {
+ setCurrentValue(0);
+ return;
+ }
+ const timer = setTimeout(() => {
+ setCurrentValue((prev) =>
+ loop
+ ? prev === loadingStates.length - 1
+ ? 0
+ : prev + 1
+ : Math.min(prev + 1, loadingStates.length - 1)
+ );
+ }, duration);
+
+ return () => clearTimeout(timer);
+ }, [currentValue, loading, loop, duration, loadingStates.length]);
+
+ return (
+
+ {loading && (
+
+
+
+
+
+ )}
+
+ );
+}
diff --git a/Server/src/components/ui/placeholders-and-vanish-input.jsx b/Server/src/components/ui/placeholders-and-vanish-input.jsx
new file mode 100644
index 0000000..474aac2
--- /dev/null
+++ b/Server/src/components/ui/placeholders-and-vanish-input.jsx
@@ -0,0 +1,262 @@
+"use client";
+
+import { AnimatePresence, motion } from "motion/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+
+export function PlaceholdersAndVanishInput({
+ placeholders,
+ onChange,
+ onSubmit
+}) {
+ const [currentPlaceholder, setCurrentPlaceholder] = useState(0);
+
+ const intervalRef = useRef(null);
+ const startAnimation = () => {
+ intervalRef.current = setInterval(() => {
+ setCurrentPlaceholder((prev) => (prev + 1) % placeholders.length);
+ }, 3000);
+ };
+ const handleVisibilityChange = () => {
+ if (document.visibilityState !== "visible" && intervalRef.current) {
+ clearInterval(intervalRef.current); // Clear the interval when the tab is not visible
+ intervalRef.current = null;
+ } else if (document.visibilityState === "visible") {
+ startAnimation(); // Restart the interval when the tab becomes visible
+ }
+ };
+
+ useEffect(() => {
+ startAnimation();
+ document.addEventListener("visibilitychange", handleVisibilityChange);
+
+ return () => {
+ if (intervalRef.current) {
+ clearInterval(intervalRef.current);
+ }
+ document.removeEventListener("visibilitychange", handleVisibilityChange);
+ };
+ }, [placeholders]);
+
+ const canvasRef = useRef(null);
+ const newDataRef = useRef([]);
+ const inputRef = useRef(null);
+ const [value, setValue] = useState("");
+ const [animating, setAnimating] = useState(false);
+
+ const draw = useCallback(() => {
+ if (!inputRef.current) return;
+ const canvas = canvasRef.current;
+ if (!canvas) return;
+ const ctx = canvas.getContext("2d");
+ if (!ctx) return;
+
+ canvas.width = 800;
+ canvas.height = 800;
+ ctx.clearRect(0, 0, 800, 800);
+ const computedStyles = getComputedStyle(inputRef.current);
+
+ const fontSize = parseFloat(computedStyles.getPropertyValue("font-size"));
+ ctx.font = `${fontSize * 2}px ${computedStyles.fontFamily}`;
+ ctx.fillStyle = "#FFF";
+ ctx.fillText(value, 16, 40);
+
+ const imageData = ctx.getImageData(0, 0, 800, 800);
+ const pixelData = imageData.data;
+ const newData = [];
+
+ for (let t = 0; t < 800; t++) {
+ let i = 4 * t * 800;
+ for (let n = 0; n < 800; n++) {
+ let e = i + 4 * n;
+ if (
+ pixelData[e] !== 0 &&
+ pixelData[e + 1] !== 0 &&
+ pixelData[e + 2] !== 0
+ ) {
+ newData.push({
+ x: n,
+ y: t,
+ color: [
+ pixelData[e],
+ pixelData[e + 1],
+ pixelData[e + 2],
+ pixelData[e + 3],
+ ],
+ });
+ }
+ }
+ }
+
+ newDataRef.current = newData.map(({ x, y, color }) => ({
+ x,
+ y,
+ r: 1,
+ color: `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${color[3]})`,
+ }));
+ }, [value]);
+
+ useEffect(() => {
+ draw();
+ }, [value, draw]);
+
+ const animate = (start) => {
+ const animateFrame = (pos = 0) => {
+ requestAnimationFrame(() => {
+ const newArr = [];
+ for (let i = 0; i < newDataRef.current.length; i++) {
+ const current = newDataRef.current[i];
+ if (current.x < pos) {
+ newArr.push(current);
+ } else {
+ if (current.r <= 0) {
+ current.r = 0;
+ continue;
+ }
+ current.x += Math.random() > 0.5 ? 1 : -1;
+ current.y += Math.random() > 0.5 ? 1 : -1;
+ current.r -= 0.05 * Math.random();
+ newArr.push(current);
+ }
+ }
+ newDataRef.current = newArr;
+ const ctx = canvasRef.current?.getContext("2d");
+ if (ctx) {
+ ctx.clearRect(pos, 0, 800, 800);
+ newDataRef.current.forEach((t) => {
+ const { x: n, y: i, r: s, color: color } = t;
+ if (n > pos) {
+ ctx.beginPath();
+ ctx.rect(n, i, s, s);
+ ctx.fillStyle = color;
+ ctx.strokeStyle = color;
+ ctx.stroke();
+ }
+ });
+ }
+ if (newDataRef.current.length > 0) {
+ animateFrame(pos - 8);
+ } else {
+ setValue("");
+ setAnimating(false);
+ }
+ });
+ };
+ animateFrame(start);
+ };
+
+ const handleKeyDown = (e) => {
+ if (e.key === "Enter" && !animating) {
+ vanishAndSubmit();
+ }
+ };
+
+ const vanishAndSubmit = () => {
+ setAnimating(true);
+ draw();
+
+ const value = inputRef.current?.value || "";
+ if (value && inputRef.current) {
+ const maxX = newDataRef.current.reduce((prev, current) => (current.x > prev ? current.x : prev), 0);
+ animate(maxX);
+ }
+ };
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ const url = inputRef.current?.value || "";
+ vanishAndSubmit();
+ onSubmit && onSubmit(e, url);
+ };
+ return (
+
+ );
+}
diff --git a/Server/src/index.css b/Server/src/index.css
new file mode 100644
index 0000000..2d493a1
--- /dev/null
+++ b/Server/src/index.css
@@ -0,0 +1,43 @@
+@import "tailwindcss";
+
+:root {
+ --bg: #0b0d12;
+ --panel: #121624;
+ --panel2: #0f1320;
+ --text: #e8eaf1;
+ --muted: #9aa3b2;
+ --line: #22283a;
+ --accent: #6aa6ff;
+ --good: #4ade80;
+ --warn: #fbbf24;
+ --bad: #f87171;
+ --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
+ --radius: 18px;
+}
+
+/* Hide scrollbar but keep scrolling functionality */
+.hide-scrollbar {
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+ display: none; /* Chrome, Safari and Opera */
+}
+
+@theme inline {
+ --animate-cell-ripple: cell-ripple var(--duration, 200ms) ease-out none 1
+ var(--delay, 0ms);
+
+ @keyframes cell-ripple {
+ 0% {
+ opacity: 0.4;
+ }
+ 50% {
+ opacity: 0.8;
+ }
+ 100% {
+ opacity: 0.4;
+ }
+ }
+}
diff --git a/Server/src/lib/appwrite.js b/Server/src/lib/appwrite.js
new file mode 100644
index 0000000..753a482
--- /dev/null
+++ b/Server/src/lib/appwrite.js
@@ -0,0 +1,59 @@
+/**
+ * Zentrales Appwrite Client Setup
+ * Stellt Client, Account, Databases Instanzen und Helper-Funktionen bereit
+ */
+
+import { Client, Account, Databases } from "appwrite";
+
+// Konfiguration aus Environment-Variablen oder Defaults
+const endpoint = import.meta.env.VITE_APPWRITE_ENDPOINT || "https://appwrite.webklar.com/v1";
+const projectId = import.meta.env.VITE_APPWRITE_PROJECT_ID || "696b82bb0036d2e547ad";
+const databaseId = import.meta.env.VITE_APPWRITE_DATABASE_ID || "eship-db";
+const usersCollectionId = import.meta.env.VITE_APPWRITE_USERS_COLLECTION_ID || "users";
+const accountsCollectionId = import.meta.env.VITE_APPWRITE_ACCOUNTS_COLLECTION_ID || "accounts";
+
+// Client initialisieren
+const client = new Client()
+ .setEndpoint(endpoint)
+ .setProject(projectId);
+
+// Service-Instanzen
+const account = new Account(client);
+const databases = new Databases(client);
+
+/**
+ * Gibt den aktuell eingeloggten User zurück
+ * @returns {Promise
} User-Objekt oder null
+ */
+export async function getAuthUser() {
+ try {
+ const user = await account.get();
+ return user;
+ } catch (e) {
+ // Session nicht vorhanden oder abgelaufen
+ if (e.code === 401 || e.type === 'general_unauthorized_scope') {
+ return null;
+ }
+ console.warn("Fehler beim Abrufen des Users:", e);
+ return null;
+ }
+}
+
+/**
+ * Prüft ob eine gültige Session existiert und leitet ggf. zum Login um
+ * @param {Function} navigate - Navigations-Funktion (z.B. von useHashRoute)
+ * @param {string} loginRoute - Route zum Login (default: "/")
+ * @returns {Promise} User-Objekt oder null (wenn nicht eingeloggt)
+ */
+export async function ensureSessionOrRedirect(navigate, loginRoute = "/") {
+ const user = await getAuthUser();
+ if (!user && navigate) {
+ // Redirect zu Login (aktuell noch kein separater Login-Route, daher "/")
+ // TODO: Wenn Login-Route existiert, hier verwenden
+ navigate(loginRoute);
+ }
+ return user;
+}
+
+// Exports
+export { client, account, databases, databaseId, usersCollectionId, accountsCollectionId };
diff --git a/Server/src/lib/routing.js b/Server/src/lib/routing.js
new file mode 100644
index 0000000..ead3b90
--- /dev/null
+++ b/Server/src/lib/routing.js
@@ -0,0 +1,39 @@
+import { useState, useEffect } from "react";
+
+/**
+ * Einfaches Hash-basiertes Routing System
+ * Verwendet URL Hash (#/path) für Navigation ohne Page Reload
+ */
+
+export function useHashRoute() {
+ const [route, setRoute] = useState(() => {
+ // Initial route aus Hash extrahieren
+ const hash = window.location.hash.slice(1) || "/";
+ return hash.startsWith("/") ? hash : `/${hash}`;
+ });
+
+ useEffect(() => {
+ const handleHashChange = () => {
+ const hash = window.location.hash.slice(1) || "/";
+ const newRoute = hash.startsWith("/") ? hash : `/${hash}`;
+ setRoute(newRoute);
+ };
+
+ // Event Listener für Hash-Änderungen
+ window.addEventListener("hashchange", handleHashChange);
+
+ // Initial check
+ handleHashChange();
+
+ return () => {
+ window.removeEventListener("hashchange", handleHashChange);
+ };
+ }, []);
+
+ const navigate = (path) => {
+ const newPath = path.startsWith("/") ? path : `/${path}`;
+ window.location.hash = newPath;
+ };
+
+ return { route, navigate };
+}
\ No newline at end of file
diff --git a/Server/src/lib/utils.js b/Server/src/lib/utils.js
new file mode 100644
index 0000000..378ccef
--- /dev/null
+++ b/Server/src/lib/utils.js
@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs) {
+ return twMerge(clsx(inputs));
+}
diff --git a/Server/src/main.jsx b/Server/src/main.jsx
new file mode 100644
index 0000000..89f91e5
--- /dev/null
+++ b/Server/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+createRoot(document.getElementById('root')).render(
+
+ ,
+)
diff --git a/Server/src/pages/AccountsPage.jsx b/Server/src/pages/AccountsPage.jsx
new file mode 100644
index 0000000..7b07de6
--- /dev/null
+++ b/Server/src/pages/AccountsPage.jsx
@@ -0,0 +1,656 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { IconPlus, IconChevronDown, IconX, IconRefresh } from "@tabler/icons-react";
+import { motion, AnimatePresence } from "motion/react";
+import { cn } from "../lib/utils";
+import { useHashRoute } from "../lib/routing";
+import {
+ setActiveAccountId,
+ getAccountDisplayName,
+} from "../services/accountService";
+import { fetchManagedAccounts, createManagedAccount, updateManagedAccount } from "../services/accountsService";
+import { getAuthUser } from "../lib/appwrite";
+import { parseEbayAccount } from "../services/ebayParserService";
+import { DataTable } from "../components/dashboard/ui/DataTable";
+
+export const AccountsPage = () => {
+ const { navigate } = useHashRoute();
+ const [accounts, setAccounts] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [showAdvanced, setShowAdvanced] = useState(false);
+ const [showAddForm, setShowAddForm] = useState(false);
+ const [formError, setFormError] = useState("");
+ const [formSuccess, setFormSuccess] = useState("");
+ const [formLoading, setFormLoading] = useState(false);
+
+ // Parse-State für Zwei-Phasen-Flow
+ const [parsedData, setParsedData] = useState(null);
+ const [parsing, setParsing] = useState(false);
+ const [parsingError, setParsingError] = useState("");
+
+ // Refresh-State pro Account
+ const [refreshingAccountId, setRefreshingAccountId] = useState(null);
+ const [refreshToast, setRefreshToast] = useState({ show: false, message: "", type: "success" });
+
+ // Form-Felder (nur noch URL)
+ const [formData, setFormData] = useState({
+ account_url: "",
+ });
+
+ // Accounts laden
+ useEffect(() => {
+ loadAccounts();
+ }, []);
+
+ async function loadAccounts() {
+ setLoading(true);
+ try {
+ const authUser = await getAuthUser();
+ if (!authUser) {
+ setAccounts([]);
+ return;
+ }
+
+ const loadedAccounts = await fetchManagedAccounts(authUser.$id);
+ setAccounts(loadedAccounts);
+ } catch (e) {
+ console.error("Fehler beim Laden der Accounts:", e);
+ setAccounts([]);
+ } finally {
+ setLoading(false);
+ }
+ }
+
+ const handleSelectAccount = (account) => {
+ const accountId = account.$id || account.id;
+ setActiveAccountId(accountId);
+ // Navigiere zurück zum Dashboard
+ navigate("/");
+ };
+
+ const handleRefreshAccount = async (account) => {
+ const accountId = account.$id || account.id;
+ const accountUrl = account.account_url;
+
+ if (!accountUrl) {
+ setRefreshToast({ show: true, message: "Account hat keine URL zum Aktualisieren.", type: "error" });
+ setTimeout(() => setRefreshToast({ show: false, message: "", type: "success" }), 3000);
+ return;
+ }
+
+ setRefreshingAccountId(accountId);
+
+ try {
+ // URL erneut parsen
+ const parsedData = await parseEbayAccount(accountUrl);
+
+ // Account in DB aktualisieren
+ // WICHTIG: Nur Felder setzen, die nicht leer sind und sich geändert haben
+ // Leere account_platform_account_id würde Unique-Index-Konflikte verursachen
+ const updatePayload = {};
+
+ // Nur market setzen, wenn nicht leer
+ if (parsedData.market && parsedData.market.trim()) {
+ updatePayload.account_platform_market = parsedData.market;
+ }
+
+ // Nur sellerId setzen, wenn nicht leer (verhindert Unique-Index-Konflikte mit leerem String)
+ if (parsedData.sellerId && parsedData.sellerId.trim()) {
+ updatePayload.account_platform_account_id = parsedData.sellerId;
+ }
+
+ // Shop-Name und account_sells können auch leer sein (optional)
+ updatePayload.account_shop_name = parsedData.shopName || null;
+ updatePayload.account_sells = parsedData.stats?.itemsSold ?? null;
+
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'AccountsPage.jsx:93',message:'handleRefreshAccount: update payload',data:{payload:updatePayload},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'A'})}).catch(()=>{});
+ // #endregion
+
+ // account_status wird weggelassen (wie beim Erstellen)
+ // Grund: Schema-Konflikt - Enum-Feld akzeptiert weder String noch Array im Update
+ // TODO: Schema in Appwrite prüfen und korrigieren, dann account_status wieder hinzufügen
+
+ await updateManagedAccount(accountId, updatePayload);
+
+ // Accounts-Liste neu laden (in-place Update)
+ await loadAccounts();
+
+ // Success-Toast
+ setRefreshToast({ show: true, message: "Account aktualisiert", type: "success" });
+ setTimeout(() => setRefreshToast({ show: false, message: "", type: "success" }), 3000);
+ } catch (e) {
+ console.error("Fehler beim Aktualisieren des Accounts:", e);
+
+ let errorMessage = "Update fehlgeschlagen";
+ if (e.message?.includes("Parsing") || e.message?.includes("URL")) {
+ errorMessage = "Parsing fehlgeschlagen";
+ }
+
+ setRefreshToast({ show: true, message: errorMessage, type: "error" });
+ setTimeout(() => setRefreshToast({ show: false, message: "", type: "success" }), 3000);
+ } finally {
+ setRefreshingAccountId(null);
+ }
+ };
+
+ const handleAddAccount = () => {
+ setShowAddForm(true);
+ setFormError("");
+ setFormSuccess("");
+ };
+
+ const handleCloseForm = () => {
+ setShowAddForm(false);
+ setFormError("");
+ setFormSuccess("");
+ setParsedData(null);
+ setParsingError("");
+ // Form zurücksetzen
+ setFormData({
+ account_url: "",
+ });
+ };
+
+ const handleFormChange = (field, value) => {
+ setFormData((prev) => ({ ...prev, [field]: value }));
+ // Clear errors beim Eingeben
+ if (formError) setFormError("");
+ if (parsingError) setParsingError("");
+ };
+
+ const handleParseUrl = async () => {
+ const url = formData.account_url?.trim();
+
+ if (!url) {
+ setParsingError("Bitte gib eine eBay-URL ein.");
+ return;
+ }
+
+ setParsing(true);
+ setParsingError("");
+ setFormError("");
+
+ try {
+ const result = await parseEbayAccount(url);
+ setParsedData(result);
+ setParsingError("");
+ } catch (e) {
+ setParsingError(e.message || "Bitte gib eine gültige eBay-URL ein.");
+ setParsedData(null);
+ } finally {
+ setParsing(false);
+ }
+ };
+
+ const handleFormSubmit = async (e) => {
+ e.preventDefault();
+
+ // Wenn noch nicht geparst, zuerst parsen
+ if (!parsedData) {
+ await handleParseUrl();
+ return;
+ }
+
+ // Save-Phase: Account in DB speichern
+ setFormError("");
+ setFormSuccess("");
+ setFormLoading(true);
+
+ try {
+ const authUser = await getAuthUser();
+ if (!authUser) {
+ setFormError("Nicht eingeloggt. Bitte neu anmelden.");
+ return;
+ }
+
+ // Payload aus parsedData zusammenstellen
+ const accountSellsValue = parsedData.stats?.itemsSold ?? null;
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'AccountsPage.jsx:193',message:'handleFormSubmit: parsedData before save',data:{hasStats:!!parsedData.stats,itemsSold:parsedData.stats?.itemsSold,accountSellsValue},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'D'})}).catch(()=>{});
+ // #endregion
+ const newAccount = await createManagedAccount(authUser.$id, {
+ account_url: formData.account_url.trim(),
+ account_platform_account_id: parsedData.sellerId,
+ account_platform_market: parsedData.market,
+ account_shop_name: parsedData.shopName,
+ account_sells: accountSellsValue,
+ // account_status wird nicht mehr gesendet (optional, Schema-Problem in Appwrite)
+ });
+
+ // Erfolg: Liste refreshen
+ await loadAccounts();
+
+ // Wenn dies das erste Account ist, setze es als aktiv
+ if (accounts.length === 0) {
+ setActiveAccountId(newAccount.$id);
+ }
+
+ setFormSuccess("Account erfolgreich erstellt!");
+ setTimeout(() => {
+ handleCloseForm();
+ }, 1500);
+ } catch (e) {
+ // Fehlerbehandlung
+ const errorMessage =
+ e.message || "Fehler beim Erstellen des Accounts. Bitte versuche es erneut.";
+ setFormError(errorMessage);
+ } finally {
+ setFormLoading(false);
+ }
+ };
+
+ // Spalten für die Tabelle
+ const columns = [
+ "Account Name",
+ "Platform",
+ "Platform Account ID",
+ "Market",
+ "Account URL",
+ "Status",
+ "Last Scan",
+ ...(showAdvanced ? ["Owner User ID"] : []),
+ "Action",
+ ];
+
+ const renderCell = (col, row) => {
+ if (col === "Action") {
+ const accountId = row.$id || row.id;
+ const isRefreshing = refreshingAccountId === accountId;
+
+ return (
+
+ handleRefreshAccount(row)}
+ disabled={isRefreshing}
+ className="rounded-xl border border-[var(--line)] bg-white/3 px-3 py-2 text-xs text-[var(--text)] transition-all hover:border-[rgba(106,166,255,0.55)] hover:bg-[rgba(106,166,255,0.08)] active:translate-y-[1px] disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"
+ title="Account aktualisieren"
+ >
+
+ handleSelectAccount(row)}
+ className="rounded-xl border border-[var(--line)] bg-white/3 px-3 py-2 text-xs text-[var(--text)] transition-all hover:border-[rgba(106,166,255,0.55)] hover:bg-[rgba(106,166,255,0.08)] active:translate-y-[1px]"
+ >
+ Select
+
+
+ );
+ }
+
+ if (col === "Account Name") {
+ return getAccountDisplayName(row) || "-";
+ }
+
+ if (col === "Platform") {
+ return row.account_platform || "-";
+ }
+
+ if (col === "Platform Account ID") {
+ return row.account_platform_account_id || "-";
+ }
+
+ if (col === "Market") {
+ return row.account_platform_market || "-";
+ }
+
+ if (col === "Account URL") {
+ const url = row.account_url;
+ if (!url) return "-";
+ return (
+
+ {url.length > 40 ? `${url.substring(0, 40)}...` : url}
+
+ );
+ }
+
+ if (col === "Status") {
+ return row.account_status || "-";
+ }
+
+ if (col === "Last Scan") {
+ const lastScan = row.account_last_scan_at;
+ if (!lastScan) return "-";
+ try {
+ const date = new Date(lastScan);
+ return date.toLocaleString("de-DE", {
+ day: "2-digit",
+ month: "2-digit",
+ year: "numeric",
+ hour: "2-digit",
+ minute: "2-digit",
+ });
+ } catch (e) {
+ return "-";
+ }
+ }
+
+ if (col === "Owner User ID") {
+ return row.account_owner_user_id || "-";
+ }
+
+ return "-";
+ };
+
+ return (
+
+
+ {/* Header */}
+
+
+
+ Accounts
+
+
+ Verwalte deine Plattform-Accounts
+
+
+
+
+
+
+ {/* Hilfe-Panel */}
+
+
+
+
+ Account hinzufügen
+
+
+
+
+ eBay Account URL (Pflichtfeld)
+
+ : Gib einfach die eBay-URL zum Verkäuferprofil oder Shop ein. Alle weiteren Informationen (Market, Seller ID, Shop Name) werden automatisch erkannt.
+
+
+
+ Market (Auto)
+
+ : Wird automatisch aus der URL extrahiert (z.B. DE, US, UK). Du musst nichts eingeben.
+
+
+
+ eBay Seller ID (Auto)
+
+ : Wird automatisch erkannt. Dies ist die eindeutige Verkäufer-Kennung von eBay und verhindert Duplikate.
+
+
+
+ Shop Name (Auto)
+
+ : Öffentlich sichtbarer Name des Shops. Wird automatisch aus der URL/Seite extrahiert.
+
+
+
+ Status (Auto)
+
+ : Wird automatisch auf "active" gesetzt. Du musst nichts eingeben.
+
+
+
+ So funktioniert's: {" "}
+ Gib einfach die eBay-URL ein und klicke auf "Account hinzufügen". Das System liest alle notwendigen Informationen automatisch aus. Du musst keine technischen Felder manuell ausfüllen.
+
+
+ {/* Advanced Toggle */}
+
setShowAdvanced(!showAdvanced)}
+ className="mt-4 flex items-center gap-2 text-xs text-[var(--muted)] transition-colors hover:text-[var(--text)]"
+ >
+
+
+
+
+ {/* Toast Notification */}
+
+ {refreshToast.show && (
+
+ {refreshToast.message}
+
+ )}
+
+
+ {/* Tabelle */}
+
+
+
+ {loading ? (
+
+ Loading accounts...
+
+ ) : (
+
+ )}
+
+
+
+ {/* Add Account Form Modal */}
+
+ {showAddForm && (
+
+ e.stopPropagation()}
+ className="relative w-full max-w-2xl rounded-2xl border border-[var(--line)] bg-white p-6 shadow-xl dark:bg-neutral-800"
+ >
+ {/* Close Button */}
+
+
+
+ {/* Form Header */}
+
+ Add Account
+
+
+ {/* Error/Success Messages */}
+ {parsingError && (
+
+ {parsingError}
+
+ )}
+ {formError && (
+
+ {formError}
+
+ )}
+ {formSuccess && (
+
+ {formSuccess}
+
+ )}
+
+ {/* Form */}
+
+
+
+ )}
+
+
+
} Account-Dokument oder null
+ */
+export async function getAccountById(accountId) {
+ if (!accountId) {
+ console.warn("getAccountById: accountId fehlt");
+ return null;
+ }
+
+ try {
+ const document = await databases.getDocument(
+ databaseId,
+ accountsCollectionId,
+ accountId
+ );
+ return document;
+ } catch (e) {
+ // 404 bedeutet, dass das Dokument nicht existiert
+ if (e.code === 404 || e.type === 'document_not_found') {
+ return null;
+ }
+ console.error("Fehler beim Laden des Accounts:", e);
+ throw e;
+ }
+}
+
+/**
+ * Leitet den Market-Code aus einem Account ab
+ * @param {Object} account - Account-Dokument
+ * @returns {string} Market-Code (z.B. "DE", "US", "UNKNOWN")
+ */
+export function deriveMarketFromAccount(account) {
+ if (!account) {
+ return "UNKNOWN";
+ }
+
+ // Priority 1: account_platform_market Feld vorhanden
+ if (account.account_platform_market && account.account_platform_market.trim()) {
+ return account.account_platform_market.trim().toUpperCase();
+ }
+
+ // Priority 2: Ableitung aus account_url Hostname
+ if (account.account_url) {
+ try {
+ const url = new URL(account.account_url);
+ const hostname = url.hostname.toLowerCase();
+
+ // Mapping von Hostname zu Market-Code
+ const hostnameToMarket = {
+ "ebay.de": "DE",
+ "www.ebay.de": "DE",
+ "ebay.com": "US",
+ "www.ebay.com": "US",
+ "ebay.co.uk": "UK",
+ "www.ebay.co.uk": "UK",
+ "ebay.fr": "FR",
+ "www.ebay.fr": "FR",
+ "ebay.it": "IT",
+ "www.ebay.it": "IT",
+ "ebay.es": "ES",
+ "www.ebay.es": "ES",
+ "ebay.ca": "CA",
+ "www.ebay.ca": "CA",
+ "ebay.com.au": "AU",
+ "www.ebay.com.au": "AU",
+ };
+
+ if (hostnameToMarket[hostname]) {
+ return hostnameToMarket[hostname];
+ }
+
+ // Fallback: Prüfe ob hostname ein bekanntes Pattern enthält
+ if (hostname.includes("ebay.de")) return "DE";
+ if (hostname.includes("ebay.com") && !hostname.includes("ebay.com.au")) return "US";
+ if (hostname.includes("ebay.co.uk")) return "UK";
+ if (hostname.includes("ebay.fr")) return "FR";
+ if (hostname.includes("ebay.it")) return "IT";
+ if (hostname.includes("ebay.es")) return "ES";
+ if (hostname.includes("ebay.ca")) return "CA";
+ if (hostname.includes("ebay.com.au")) return "AU";
+ } catch (e) {
+ // URL parsing fehlgeschlagen
+ console.debug("Fehler beim Parsen der Account-URL:", e);
+ }
+ }
+
+ return "UNKNOWN";
+}
+
+/**
+ * Leitet die Währung aus einem Market-Code ab
+ * @param {string} market - Market-Code (z.B. "DE", "US", "UK")
+ * @returns {string} Währungscode (z.B. "EUR", "USD", "GBP")
+ */
+export function deriveCurrencyFromMarket(market) {
+ if (!market || market === "UNKNOWN") {
+ return "EUR"; // Fallback
+ }
+
+ const marketUpper = market.toUpperCase();
+
+ // Mapping Market -> Currency
+ const marketToCurrency = {
+ // EUR Länder
+ "DE": "EUR",
+ "FR": "EUR",
+ "IT": "EUR",
+ "ES": "EUR",
+ "NL": "EUR",
+ "AT": "EUR",
+ "BE": "EUR",
+ "IE": "EUR",
+ // Andere Währungen
+ "US": "USD",
+ "UK": "GBP",
+ "CA": "CAD",
+ "AU": "AUD",
+ };
+
+ return marketToCurrency[marketUpper] || "EUR"; // Fallback zu EUR
+}
+
+/**
+ * Lädt alle Managed Accounts für einen User
+ * @param {string} authUserId - ID des eingeloggten Users
+ * @returns {Promise} Array von Account-Dokumenten
+ */
+export async function fetchManagedAccounts(authUserId) {
+ if (!authUserId) {
+ console.warn("fetchManagedAccounts: authUserId fehlt");
+ return [];
+ }
+
+ try {
+ const response = await databases.listDocuments(
+ databaseId,
+ accountsCollectionId,
+ [
+ Query.equal("account_owner_user_id", authUserId),
+ Query.orderDesc("$createdAt"),
+ ]
+ );
+
+ return response.documents;
+ } catch (e) {
+ console.error("Fehler beim Laden der Accounts:", e);
+
+ // Wenn Collection nicht existiert oder Berechtigungen fehlen
+ if (e.code === 404 || e.code === 401) {
+ return [];
+ }
+
+ throw e;
+ }
+}
+
+/**
+ * Erstellt ein neues Managed Account
+ * @param {string} authUserId - ID des eingeloggten Users
+ * @param {Object} accountData - Account-Daten
+ * @param {string} accountData.account_platform_market - Required: Market (z.B. "DE", "US")
+ * @param {string} accountData.account_platform_account_id - Required: Platform Account ID
+ * @param {string} [accountData.account_shop_name] - Optional: Shop-Name
+ * @param {string} [accountData.account_url] - Optional: Account URL
+ * @param {string} [accountData.account_status] - Optional: Status (z.B. "active", "unknown", "disabled")
+ * @returns {Promise} Erstelltes Account-Dokument
+ */
+export async function createManagedAccount(authUserId, accountData) {
+ if (!authUserId) {
+ throw new Error("authUserId ist erforderlich");
+ }
+
+ // Validierung der Required-Felder
+ const { account_platform_market, account_platform_account_id } = accountData;
+
+ // account_platform wird IMMER "ebay" gesetzt (eBay-only Tool)
+ if (!account_platform_market) {
+ throw new Error("account_platform_market ist erforderlich");
+ }
+ if (!account_platform_account_id) {
+ throw new Error("account_platform_account_id ist erforderlich");
+ }
+
+ // Payload zusammenstellen
+ const payload = {
+ account_owner_user_id: authUserId,
+ account_platform: "ebay", // IMMER "ebay" für über UI erstellte Accounts
+ account_platform_market,
+ account_platform_account_id,
+ account_shop_name: accountData.account_shop_name || null,
+ account_url: accountData.account_url || null,
+ account_sells: accountData.account_sells ?? null,
+ account_managed: true, // Immer true für über die UI erstellte Accounts
+ };
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'accountsService.js:72',message:'createManagedAccount: payload before Appwrite',data:{account_sells:payload.account_sells,accountData_account_sells:accountData.account_sells},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'E'})}).catch(()=>{});
+ // #endregion
+
+ // account_status ist optional - aufgrund Schema-Konflikt vorerst weglassen
+ // TODO: Schema in Appwrite prüfen und korrigieren (Enum-Feld sollte String akzeptieren, nicht Array)
+ // Das Feld wird erst wieder hinzugefügt, wenn das Schema korrekt konfiguriert ist
+
+ // Document-Level Permissions für den User setzen
+ const permissions = [
+ `read("user:${authUserId}")`,
+ `update("user:${authUserId}")`,
+ `delete("user:${authUserId}")`,
+ ];
+
+ try {
+ const document = await databases.createDocument(
+ databaseId,
+ accountsCollectionId,
+ ID.unique(),
+ payload,
+ permissions
+ );
+
+ return document;
+ } catch (e) {
+ // Duplicate-Conflict behandeln (falls Unique-Index auf platform+market+platform_account_id existiert)
+ if (e.code === 409 || e.message?.includes("duplicate") || e.message?.includes("unique")) {
+ throw new Error(
+ "Dieser Account ist bereits verbunden."
+ );
+ }
+
+ console.error("Fehler beim Erstellen des Accounts:", e);
+ throw e;
+ }
+}
+
+/**
+ * Aktualisiert ein Managed Account (optional für v1)
+ * @param {string} accountId - ID des Accounts
+ * @param {Object} accountData - Zu aktualisierende Account-Daten
+ * @returns {Promise} Aktualisiertes Account-Dokument
+ */
+export async function updateManagedAccount(accountId, accountData) {
+ if (!accountId) {
+ throw new Error("accountId ist erforderlich");
+ }
+
+ try {
+ // Entferne undefined/null Werte aus accountData (behalte nur geänderte Felder)
+ const payload = {};
+ Object.keys(accountData).forEach((key) => {
+ if (accountData[key] !== undefined && accountData[key] !== null) {
+ payload[key] = accountData[key];
+ }
+ });
+
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'accountsService.js:133',message:'updateManagedAccount: before updateDocument',data:{accountId,payload,payloadKeys:Object.keys(payload)},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'A'})}).catch(()=>{});
+ // #endregion
+
+ const document = await databases.updateDocument(
+ databaseId,
+ accountsCollectionId,
+ accountId,
+ payload
+ );
+
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'accountsService.js:147',message:'updateManagedAccount: success',data:{accountId},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'A'})}).catch(()=>{});
+ // #endregion
+ return document;
+ } catch (e) {
+ console.error("Fehler beim Aktualisieren des Accounts:", e);
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'accountsService.js:149',message:'updateManagedAccount: error',data:{accountId,errorCode:e.code,errorMessage:e.message,errorType:e.type},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'C'})}).catch(()=>{});
+ // #endregion
+ throw e;
+ }
+}
+
+/**
+ * Aktualisiert das account_last_scan_at Feld eines Accounts
+ * @param {string} accountId - ID des Accounts
+ * @param {string} isoString - ISO 8601 Datum-String (z.B. "2026-01-18T12:34:56.000Z")
+ * @returns {Promise} Aktualisiertes Account-Dokument
+ */
+export async function updateAccountLastScanAt(accountId, isoString) {
+ if (!accountId) {
+ throw new Error("accountId ist erforderlich");
+ }
+ if (!isoString) {
+ throw new Error("isoString ist erforderlich");
+ }
+
+ try {
+ const document = await databases.updateDocument(
+ databaseId,
+ accountsCollectionId,
+ accountId,
+ {
+ account_last_scan_at: isoString,
+ }
+ );
+
+ return document;
+ } catch (e) {
+ console.error("Fehler beim Aktualisieren des account_last_scan_at:", e);
+ throw e;
+ }
+}
+
+/**
+ * Löscht ein Managed Account (optional für v1)
+ * @param {string} accountId - ID des Accounts
+ * @returns {Promise}
+ */
+export async function deleteManagedAccount(accountId) {
+ if (!accountId) {
+ throw new Error("accountId ist erforderlich");
+ }
+
+ try {
+ await databases.deleteDocument(
+ databaseId,
+ accountsCollectionId,
+ accountId
+ );
+ } catch (e) {
+ console.error("Fehler beim Löschen des Accounts:", e);
+ throw e;
+ }
+}
diff --git a/Server/src/services/dashboardService.js b/Server/src/services/dashboardService.js
new file mode 100644
index 0000000..10eecd3
--- /dev/null
+++ b/Server/src/services/dashboardService.js
@@ -0,0 +1,301 @@
+/**
+ * Dashboard Service
+ * Stellt aggregierte Dashboard-Daten bereit, gescoped nach activeAccountId
+ * Nutzt productsService und accountsService für Datenabfragen
+ */
+
+import { listProductsByAccount, getProductById } from "./productsService";
+import { databases, databaseId } from "../lib/appwrite";
+import { Query } from "appwrite";
+
+const productDetailsCollectionId =
+ import.meta.env.VITE_APPWRITE_PRODUCT_DETAILS_COLLECTION_ID || "product_details";
+
+/**
+ * Lädt Overview KPIs für einen aktiven Account
+ * @param {string} activeAccountId - ID des aktiven Accounts
+ * @returns {Promise<{ totalProducts: number, activeProducts: number, endedProducts: number, avgPrice: number | null, newestProducts: Array }>}
+ */
+export async function getOverviewKPIs(activeAccountId) {
+ if (!activeAccountId) {
+ return {
+ totalProducts: 0,
+ activeProducts: 0,
+ endedProducts: 0,
+ avgPrice: null,
+ newestProducts: [],
+ };
+ }
+
+ try {
+ // Lade bis zu 200 Products für KPI-Berechnung
+ const products = await listProductsByAccount(activeAccountId, {
+ limit: 200,
+ offset: 0,
+ orderBy: "$createdAt",
+ orderType: "desc",
+ });
+
+ const totalProducts = products.length;
+
+ // Filtere nach Status
+ const activeProducts = products.filter(
+ (p) => p.product_status === "active" || p.product_status === "Active"
+ );
+ const endedProducts = products.filter(
+ (p) => p.product_status === "ended" || p.product_status === "Ended"
+ );
+
+ // Berechne Durchschnittspreis für aktive Products
+ const activeWithPrice = activeProducts.filter(
+ (p) => p.product_price != null && !isNaN(parseFloat(p.product_price))
+ );
+ const avgPrice =
+ activeWithPrice.length > 0
+ ? activeWithPrice.reduce((sum, p) => sum + parseFloat(p.product_price), 0) /
+ activeWithPrice.length
+ : null;
+
+ // Neueste 5 Products (bereits nach $createdAt desc sortiert)
+ const newestProducts = products.slice(0, 5);
+
+ return {
+ totalProducts,
+ activeProducts: activeProducts.length,
+ endedProducts: endedProducts.length,
+ avgPrice: avgPrice ? Math.round(avgPrice * 100) / 100 : null,
+ newestProducts,
+ };
+ } catch (e) {
+ console.error("Fehler beim Laden der Overview KPIs:", e);
+ throw e;
+ }
+}
+
+/**
+ * Lädt eine paginierte Seite von Products für einen aktiven Account
+ * @param {string} activeAccountId - ID des aktiven Accounts
+ * @param {Object} options - Pagination und Filter-Optionen
+ * @param {number} options.page - Seitennummer (1-basiert)
+ * @param {number} options.pageSize - Anzahl Items pro Seite
+ * @param {Object} [options.filters] - Filter-Optionen
+ * @param {string} [options.filters.status] - Status-Filter ("active", "ended", etc.)
+ * @param {string} [options.filters.search] - Suchbegriff für Titel (client-side)
+ * @returns {Promise<{ items: Array, total: number, page: number, pageSize: number }>}
+ */
+export async function getProductsPage(activeAccountId, options = {}) {
+ if (!activeAccountId) {
+ return {
+ items: [],
+ total: 0,
+ page: 1,
+ pageSize: options.pageSize || 25,
+ };
+ }
+
+ const { page = 1, pageSize = 25, filters = {} } = options;
+ const offset = (page - 1) * pageSize;
+
+ try {
+ // Lade Products mit Pagination
+ // Für MVP: Lade mehr als nötig (z.B. pageSize * 3) um client-side Filter zu unterstützen
+ const fetchLimit = Math.max(pageSize * 3, 100); // Mindestens 100, aber mehr wenn pageSize größer
+ let products = await listProductsByAccount(activeAccountId, {
+ limit: fetchLimit,
+ offset: 0,
+ orderBy: "$createdAt",
+ orderType: "desc",
+ });
+
+ // Client-side Filter anwenden (falls Appwrite Query-Filter nicht unterstützt)
+ if (filters.status && filters.status !== "all") {
+ products = products.filter(
+ (p) =>
+ p.product_status?.toLowerCase() === filters.status.toLowerCase()
+ );
+ }
+
+ if (filters.search && filters.search.trim()) {
+ const searchLower = filters.search.trim().toLowerCase();
+ products = products.filter((p) =>
+ p.product_title?.toLowerCase().includes(searchLower)
+ );
+ }
+
+ const total = products.length;
+
+ // Pagination auf gefilterten Ergebnissen anwenden
+ const startIndex = offset;
+ const endIndex = startIndex + pageSize;
+ const items = products.slice(startIndex, endIndex);
+
+ return {
+ items,
+ total,
+ page,
+ pageSize,
+ };
+ } catch (e) {
+ console.error("Fehler beim Laden der Products Page:", e);
+ throw e;
+ }
+}
+
+/**
+ * Lädt ein Product mit optionalen Details aus product_details Collection
+ * @param {string} productId - ID des Products
+ * @returns {Promise} Product-Objekt mit optionalen Details
+ */
+export async function getProductPreview(productId) {
+ if (!productId) {
+ throw new Error("productId ist erforderlich");
+ }
+
+ try {
+ // Lade Product
+ const product = await getProductById(productId);
+ if (!product) {
+ return null;
+ }
+
+ // Versuche product_details zu laden (optional, falls vorhanden)
+ let details = null;
+ try {
+ const detailsResponse = await databases.listDocuments(
+ databaseId,
+ productDetailsCollectionId,
+ [Query.equal("product_detail_product_id", productId), Query.limit(1)]
+ );
+
+ if (detailsResponse.documents && detailsResponse.documents.length > 0) {
+ details = detailsResponse.documents[0];
+ }
+ } catch (detailsError) {
+ // product_details Collection existiert möglicherweise nicht oder hat keine Permissions
+ // Das ist OK, Details sind optional
+ console.debug("product_details konnten nicht geladen werden:", detailsError);
+ }
+
+ // Kombiniere Product mit Details
+ return {
+ ...product,
+ details,
+ };
+ } catch (e) {
+ console.error("Fehler beim Laden des Product Previews:", e);
+ throw e;
+ }
+}
+
+/**
+ * Lädt Insights für einen aktiven Account (regelbasiert, MVP)
+ * @param {string} activeAccountId - ID des aktiven Accounts
+ * @returns {Promise<{ trending: Array, priceSpread: Array, categoryShare: Array }>}
+ */
+export async function getInsights(activeAccountId) {
+ if (!activeAccountId) {
+ return {
+ trending: [],
+ priceSpread: [],
+ categoryShare: [],
+ };
+ }
+
+ try {
+ // Lade bis zu 500 Products für Insights-Berechnung
+ const products = await listProductsByAccount(activeAccountId, {
+ limit: 500,
+ offset: 0,
+ orderBy: "$createdAt",
+ orderType: "desc",
+ });
+
+ // 1. Trending: Neueste 20 Products als "recent"
+ const trending = products.slice(0, 20).map((p) => ({
+ product: p,
+ label: p.product_title || p.$id,
+ value: p.product_price ? `EUR ${p.product_price}` : "N/A",
+ }));
+
+ // 2. Price Spread: Gruppiere nach normalisiertem Titel (lowercase, remove digits)
+ // Berechne max-min Spread pro Gruppe, Top 5
+ const titleGroups = new Map();
+
+ products.forEach((p) => {
+ if (!p.product_title || !p.product_price) return;
+
+ // Normalisiere Titel: lowercase, entferne Zahlen
+ const normalizedTitle = p.product_title
+ .toLowerCase()
+ .replace(/\d+/g, "")
+ .trim();
+
+ if (!normalizedTitle) return;
+
+ const price = parseFloat(p.product_price);
+ if (isNaN(price)) return;
+
+ if (!titleGroups.has(normalizedTitle)) {
+ titleGroups.set(normalizedTitle, {
+ title: normalizedTitle,
+ prices: [],
+ originalTitles: new Set(),
+ });
+ }
+
+ const group = titleGroups.get(normalizedTitle);
+ group.prices.push(price);
+ group.originalTitles.add(p.product_title);
+ });
+
+ // Berechne Spread für jede Gruppe
+ const spreads = Array.from(titleGroups.values())
+ .map((group) => {
+ if (group.prices.length < 2) return null; // Mindestens 2 Preise für Spread
+
+ const minPrice = Math.min(...group.prices);
+ const maxPrice = Math.max(...group.prices);
+ const spread = maxPrice - minPrice;
+
+ return {
+ title: Array.from(group.originalTitles)[0], // Erstes Original-Titel als Label
+ minPrice,
+ maxPrice,
+ spread,
+ count: group.prices.length,
+ label: `${Array.from(group.originalTitles)[0]} (${group.prices.length}x)`,
+ value: `EUR ${minPrice.toFixed(2)} - ${maxPrice.toFixed(2)} (Spread: ${spread.toFixed(2)})`,
+ };
+ })
+ .filter((s) => s !== null)
+ .sort((a, b) => b.spread - a.spread) // Sortiere nach Spread (höchster zuerst)
+ .slice(0, 5); // Top 5
+
+ // 3. Category Share: Zähle nach product_category, Top 5
+ const categoryCounts = new Map();
+
+ products.forEach((p) => {
+ const category = p.product_category || "Uncategorized";
+ categoryCounts.set(category, (categoryCounts.get(category) || 0) + 1);
+ });
+
+ const categoryShare = Array.from(categoryCounts.entries())
+ .map(([category, count]) => ({
+ category,
+ count,
+ label: category,
+ value: `${count} items`,
+ }))
+ .sort((a, b) => b.count - a.count) // Sortiere nach Count (höchster zuerst)
+ .slice(0, 5); // Top 5
+
+ return {
+ trending,
+ priceSpread: spreads,
+ categoryShare,
+ };
+ } catch (e) {
+ console.error("Fehler beim Laden der Insights:", e);
+ throw e;
+ }
+}
\ No newline at end of file
diff --git a/Server/src/services/ebayParserService.js b/Server/src/services/ebayParserService.js
new file mode 100644
index 0000000..33e9bd1
--- /dev/null
+++ b/Server/src/services/ebayParserService.js
@@ -0,0 +1,515 @@
+/**
+ * eBay URL Parser Service (Stub)
+ * Extrahiert Account-Daten aus eBay-URLs
+ *
+ * WICHTIG: Dies ist eine Stub-Implementierung ohne echte Network-Calls.
+ * Später wird diese Funktion durch einen Call zur Browser-Extension ersetzt.
+ *
+ * Regeln:
+ * - Deterministisch: Gleiche URL → gleiche Daten
+ * - Keine Network-Calls (kein fetch, kein iframe, kein HTML-Parsing)
+ * - Ersetzbar durch Extension-Call
+ */
+
+/**
+ * Einfacher stabiler Hash für deterministische IDs
+ * @param {string} str - Input string
+ * @returns {string} - Hash string
+ */
+function stableHash(str) {
+ let hash = 0;
+ for (let i = 0; i < str.length; i++) {
+ const char = str.charCodeAt(i);
+ hash = ((hash << 5) - hash) + char;
+ hash = hash & hash; // Convert to 32bit integer
+ }
+ return Math.abs(hash).toString(36).padStart(10, '0');
+}
+
+/**
+ * Extrahiert Marktplatz aus eBay-URL (Domain)
+ * @param {string} url - eBay-URL
+ * @returns {string} - Market Code (z.B. "DE", "US", "UK")
+ */
+function extractMarketFromUrl(url) {
+ try {
+ const urlObj = new URL(url);
+ const hostname = urlObj.hostname.toLowerCase();
+
+ // eBay Domain-Patterns
+ if (hostname.includes('.de') || hostname.includes('ebay.de')) {
+ return 'DE';
+ }
+ if (hostname.includes('.com') || hostname.includes('ebay.com')) {
+ // Prüfe auf US-spezifische Patterns
+ if (hostname.includes('ebay.com') && !hostname.includes('.uk')) {
+ return 'US';
+ }
+ }
+ if (hostname.includes('.uk') || hostname.includes('ebay.co.uk')) {
+ return 'UK';
+ }
+ if (hostname.includes('.fr') || hostname.includes('ebay.fr')) {
+ return 'FR';
+ }
+ if (hostname.includes('.it') || hostname.includes('ebay.it')) {
+ return 'IT';
+ }
+ if (hostname.includes('.es') || hostname.includes('ebay.es')) {
+ return 'ES';
+ }
+ if (hostname.includes('.nl') || hostname.includes('ebay.nl')) {
+ return 'NL';
+ }
+ if (hostname.includes('.at') || hostname.includes('ebay.at')) {
+ return 'AT';
+ }
+ if (hostname.includes('.ch') || hostname.includes('ebay.ch')) {
+ return 'CH';
+ }
+
+ // Fallback: erster Teil der Domain nach "ebay."
+ const match = hostname.match(/ebay\.([a-z]{2,3})/);
+ if (match && match[1]) {
+ return match[1].toUpperCase();
+ }
+
+ // Default: US
+ return 'US';
+ } catch (e) {
+ return 'US'; // Fallback
+ }
+}
+
+// Extension-ID Cache (gesetzt via postMessage vom Content Script)
+let cachedExtensionId = null;
+
+// Listener für Extension-ID vom Content Script
+if (typeof window !== 'undefined') {
+ window.addEventListener('message', (event) => {
+ if (event.data?.source === 'eship-extension' && event.data?.type === 'EXTENSION_ID' && event.data?.extensionId) {
+ cachedExtensionId = event.data.extensionId;
+ }
+ });
+}
+
+/**
+ * Prüft ob die Browser-Extension verfügbar ist
+ * @returns {boolean} - true wenn Extension verfügbar
+ */
+export function isExtensionAvailable() {
+ if (typeof window === 'undefined') {
+ return false;
+ }
+
+ // Prüfe ob Extension-ID gecacht ist (via postMessage empfangen)
+ if (cachedExtensionId) {
+ return true;
+ }
+
+ // Window flag (set by content script) - das ist das Haupt-Kriterium
+ // Der Content Script setzt window.__EBAY_EXTENSION__ = true wenn er läuft
+ const flagValue = window.__EBAY_EXTENSION__;
+ if (flagValue === true) {
+ return true;
+ }
+
+ // chrome.runtime.sendMessage allein bedeutet NICHT, dass die Extension verfügbar ist
+ // (Chrome macht chrome.runtime auch ohne Extension verfügbar, aber ohne Extension-ID können wir sie nicht nutzen)
+ // Daher: Nur window.__EBAY_EXTENSION__ ist der zuverlässige Indikator
+
+ return false;
+}
+
+/**
+ * Holt Extension-ID (für externally_connectable messaging)
+ * @returns {Promise} - Extension-ID oder null
+ */
+async function getExtensionId() {
+ try {
+ // Methode 1: Verwende gecachte Extension-ID (via postMessage vom Content Script empfangen)
+ if (cachedExtensionId) {
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'ebayParserService.js:135',message:'getExtensionId: found via cache',data:{cachedExtensionId},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'D'})}).catch(()=>{});
+ // #endregion
+ return cachedExtensionId;
+ }
+
+ // Retry-Mechanismus: Warte auf postMessage vom Content Script
+ for (let attempt = 0; attempt < 10; attempt++) {
+ if (cachedExtensionId) {
+ return cachedExtensionId;
+ }
+
+ // Warte kurz vor dem nächsten Versuch (außer beim letzten Versuch)
+ if (attempt < 9) {
+ await new Promise(resolve => setTimeout(resolve, 200)); // 200ms delay
+ }
+ }
+
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'ebayParserService.js:150',message:'getExtensionId: not found after retries',data:{hasWindow:typeof window!=='undefined'},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'D'})}).catch(()=>{});
+ // #endregion
+ return null; // Nicht verfügbar
+ } catch (e) {
+ return null;
+ }
+}
+
+/**
+ * Parst eine eBay-URL über die Browser-Extension
+ * @param {string} url - eBay-Verkäuferprofil oder Shop-URL
+ * @returns {Promise<{sellerId: string, shopName: string, market: string, status: "active" | "unknown", stats?: object}>}
+ * @throws {Error} - "Extension not available" oder andere Fehler
+ */
+async function parseViaExtension(url) {
+ // Validierung
+ if (!url || typeof url !== 'string') {
+ throw new Error("Invalid URL");
+ }
+
+ // Methode 1: chrome.runtime.sendMessage (externally_connectable)
+ // Versuche zuerst mit Extension-ID, dann ohne (Chrome findet Extension automatisch bei externally_connectable)
+ if (typeof chrome !== 'undefined' && chrome.runtime && chrome.runtime.sendMessage) {
+ try {
+ const extensionId = await getExtensionId();
+
+ // Versuche chrome.runtime.sendMessage (mit oder ohne Extension-ID)
+ return new Promise((resolve, reject) => {
+ const message = {
+ action: "PARSE_URL",
+ url: url
+ };
+
+ // SendMessage-Callback
+ const sendMessageCallback = (response) => {
+ // Check for Chrome runtime errors
+ if (chrome.runtime.lastError) {
+ const errorMsg = chrome.runtime.lastError.message || "Extension communication error";
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'ebayParserService.js:158',message:'parseViaExtension: chrome.runtime.sendMessage error',data:{error:errorMsg,extensionId},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'D'})}).catch(()=>{});
+ // #endregion
+ reject(new Error(errorMsg));
+ return;
+ }
+
+ if (response && response.ok && response.data) {
+ // Ensure stats object is included (even if empty)
+ const data = {
+ sellerId: response.data.sellerId || "",
+ shopName: response.data.shopName || "",
+ market: response.data.market || "US",
+ status: response.data.status || "unknown",
+ stats: response.data.stats || {}
+ };
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'ebayParserService.js:160',message:'parseViaExtension: response data from extension',data:{hasStats:!!response.data.stats,itemsSold:response.data.stats?.itemsSold,stats:response.data.stats},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'D'})}).catch(()=>{});
+ // #endregion
+ resolve(data);
+ } else {
+ reject(new Error(response?.error || "Extension parsing failed"));
+ }
+ };
+
+ // Benötigt Extension-ID (sendMessage von Webseiten aus erfordert immer Extension-ID)
+ if (!extensionId) {
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'ebayParserService.js:175',message:'parseViaExtension: no extension ID',data:{hasWindowExtensionId:!!(typeof window!=='undefined'&&window.__EBAY_EXTENSION_ID__)},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'D'})}).catch(()=>{});
+ // #endregion
+ reject(new Error("Extension ID not available"));
+ return;
+ }
+
+ chrome.runtime.sendMessage(extensionId, message, sendMessageCallback);
+
+ // Timeout nach 20s (Extension hat intern 15s, hier etwas mehr Puffer)
+ setTimeout(() => {
+ reject(new Error("Extension timeout"));
+ }, 20000);
+ });
+ } catch (error) {
+ // Chrome API Fehler: Fallback zu window.postMessage wenn möglich
+ if (error.message && !error.message.includes("Extension")) {
+ throw error;
+ }
+ // Weiter zu Methode 2
+ }
+ }
+
+ // Methode 2: Window flag + postMessage (falls Content Script Relay vorhanden)
+ if (window.__EBAY_EXTENSION__ === true) {
+ return new Promise((resolve, reject) => {
+ const messageId = `parse_${Date.now()}_${Math.random()}`;
+
+ // Listener für Antwort
+ const responseHandler = (event) => {
+ if (event.data?.source !== 'eship-extension' || event.data?.messageId !== messageId) {
+ return;
+ }
+
+ window.removeEventListener('message', responseHandler);
+
+ if (event.data?.ok && event.data?.data) {
+ const data = {
+ sellerId: event.data.data.sellerId || "",
+ shopName: event.data.data.shopName || "",
+ market: event.data.data.market || "US",
+ status: event.data.data.status || "unknown",
+ stats: event.data.data.stats || {}
+ };
+ resolve(data);
+ } else {
+ reject(new Error(event.data?.error || "Extension parsing failed"));
+ }
+ };
+
+ window.addEventListener('message', responseHandler);
+
+ // Sende Request via postMessage
+ window.postMessage({
+ source: 'eship-webapp',
+ action: 'PARSE_URL',
+ url: url,
+ messageId: messageId
+ }, '*');
+
+ // Timeout
+ setTimeout(() => {
+ window.removeEventListener('message', responseHandler);
+ reject(new Error("Extension timeout"));
+ }, 20000);
+ });
+ }
+
+ // Keine Extension verfügbar
+ throw new Error("Extension not available");
+}
+
+/**
+ * Parst eine eBay-URL über die Browser-Extension für Produkt-Scan
+ * @param {string} url - eBay-Verkäuferprofil oder Shop-URL
+ * @param {string} accountId - Account-ID (wird an Extension übergeben)
+ * @returns {Promise} - Array von Produkt-Items
+ * @throws {Error} - "Extension not available" oder andere Fehler
+ */
+export async function parseViaExtensionScanProducts(url, accountId) {
+ // Validierung
+ if (!url || typeof url !== 'string') {
+ throw new Error("Invalid URL");
+ }
+
+ if (!accountId || typeof accountId !== 'string') {
+ throw new Error("Invalid accountId");
+ }
+
+ // Methode 1: chrome.runtime.sendMessage (externally_connectable)
+ if (typeof chrome !== 'undefined' && chrome.runtime && chrome.runtime.sendMessage) {
+ try {
+ const extensionId = await getExtensionId();
+
+ // Versuche chrome.runtime.sendMessage (mit oder ohne Extension-ID)
+ return new Promise((resolve, reject) => {
+ const message = {
+ action: "SCAN_PRODUCTS",
+ url: url,
+ accountId: accountId
+ };
+
+ // SendMessage-Callback
+ const sendMessageCallback = (response) => {
+ // Check for Chrome runtime errors
+ if (chrome.runtime.lastError) {
+ const errorMsg = chrome.runtime.lastError.message || "Extension communication error";
+ reject(new Error(errorMsg));
+ return;
+ }
+
+ if (response && response.ok && response.data) {
+ const items = response.data.items || [];
+ const meta = response.data.meta || response.meta || {};
+
+ // Wenn items leer oder ok:false, werfe Fehler mit meta
+ if (!Array.isArray(items) || items.length === 0) {
+ const errorMsg = response?.error || "no_items_found";
+ const error = new Error(`SCAN_PRODUCTS failed: ${errorMsg} (${meta.pageType || "unknown"})`);
+ error.meta = meta;
+ reject(error);
+ return;
+ }
+
+ // Erfolg: gib items zurück
+ resolve(items);
+ } else {
+ // Fehler: sende error + meta
+ const meta = response?.meta || {};
+ const errorMsg = response?.error || "Extension scanning failed";
+ const error = new Error(`SCAN_PRODUCTS failed: ${errorMsg} (${meta.pageType || "unknown"})`);
+ error.meta = meta;
+ reject(error);
+ }
+ };
+
+ // Benötigt Extension-ID (sendMessage von Webseiten aus erfordert immer Extension-ID)
+ if (!extensionId) {
+ reject(new Error("Extension ID not available"));
+ return;
+ }
+
+ chrome.runtime.sendMessage(extensionId, message, sendMessageCallback);
+
+ // Timeout nach 20s (Extension hat intern 20s)
+ setTimeout(() => {
+ reject(new Error("Extension timeout"));
+ }, 20000);
+ });
+ } catch (error) {
+ // Chrome API Fehler: weiter zu Methode 2
+ if (error.message && !error.message.includes("Extension")) {
+ throw error;
+ }
+ // Weiter zu Methode 2
+ }
+ }
+
+ // Methode 2: Window flag + postMessage (falls Content Script Relay vorhanden)
+ if (typeof window !== 'undefined' && window.__EBAY_EXTENSION__ === true) {
+ return new Promise((resolve, reject) => {
+ const messageId = `scan_${Date.now()}_${Math.random()}`;
+
+ // Listener für Antwort
+ const responseHandler = (event) => {
+ if (event.data?.source !== 'eship-extension' || event.data?.messageId !== messageId) {
+ return;
+ }
+
+ window.removeEventListener('message', responseHandler);
+
+ if (event.data?.ok && event.data?.data) {
+ const items = event.data.data.items || event.data.items || [];
+ const meta = event.data.data.meta || event.data.meta || {};
+
+ // Wenn items leer oder ok:false, werfe Fehler mit meta
+ if (!Array.isArray(items) || items.length === 0) {
+ const errorMsg = event.data?.error || "no_items_found";
+ const error = new Error(`SCAN_PRODUCTS failed: ${errorMsg} (${meta.pageType || "unknown"})`);
+ error.meta = meta;
+ reject(error);
+ return;
+ }
+
+ // Erfolg: gib items zurück
+ resolve(items);
+ } else {
+ // Fehler: sende error + meta
+ const meta = event.data?.meta || event.data?.data?.meta || {};
+ const errorMsg = event.data?.error || "Extension scanning failed";
+ const error = new Error(`SCAN_PRODUCTS failed: ${errorMsg} (${meta.pageType || "unknown"})`);
+ error.meta = meta;
+ reject(error);
+ }
+ };
+
+ window.addEventListener('message', responseHandler);
+
+ // Sende Request via postMessage
+ window.postMessage({
+ source: 'eship-webapp',
+ action: 'SCAN_PRODUCTS',
+ url: url,
+ accountId: accountId,
+ messageId: messageId
+ }, '*');
+
+ // Timeout
+ setTimeout(() => {
+ window.removeEventListener('message', responseHandler);
+ reject(new Error("Extension timeout"));
+ }, 20000);
+ });
+ }
+
+ // Keine Extension verfügbar - kein Stub für Produkt-Scan (User will echte Daten)
+ throw new Error("Extension not available");
+}
+
+/**
+ * Parst eine eBay-URL mit Stub-Logik (deterministisch, keine Network-Calls)
+ * @param {string} url - eBay-Verkäuferprofil oder Shop-URL
+ * @returns {Promise<{sellerId: string, shopName: string, market: string, status: "active" | "unknown"}>}
+ * @throws {Error} - Wenn URL ungültig ist oder keine eBay-URL
+ */
+async function parseViaStub(url) {
+ // Validierung: Muss gültige URL sein
+ let urlObj;
+ try {
+ urlObj = new URL(url);
+ } catch (e) {
+ throw new Error("Bitte gib eine gültige URL ein.");
+ }
+
+ // Validierung: Muss eBay-URL sein
+ const hostname = urlObj.hostname.toLowerCase();
+ if (!hostname.includes('ebay.')) {
+ throw new Error("Bitte gib eine gültige eBay-URL ein.");
+ }
+
+ // Stub-Implementierung: Deterministische Daten aus URL generieren
+ const hash = stableHash(url);
+ const market = extractMarketFromUrl(url);
+
+ // Seller ID: Deterministic aus URL-Hash
+ // Format: "ebay_" + hash (first 10 chars)
+ const sellerId = `ebay_${hash.slice(0, 10)}`;
+
+ // Shop Name: Generiert aus Hash (last 4 chars als Suffix)
+ const shopNameSuffix = hash.slice(-4);
+ const shopName = `eBay Seller ${shopNameSuffix}`;
+
+ // Status: Immer "active" für Stub
+ const status = "active";
+
+ return {
+ sellerId,
+ shopName,
+ market,
+ status,
+ stats: {
+ itemsSold: null, // Stub liefert keine echten Daten
+ },
+ };
+}
+
+/**
+ * Parst eine eBay-URL und extrahiert Account-Daten (Facade)
+ * Versucht zuerst Extension-Pfad, fällt zurück auf Stub-Implementierung
+ * @param {string} url - eBay-Verkäuferprofil oder Shop-URL
+ * @returns {Promise<{sellerId: string, shopName: string, market: string, status: "active" | "unknown", stats?: object}>}
+ * @throws {Error} - Wenn URL ungültig ist oder keine eBay-URL
+ */
+export async function parseEbayAccount(url) {
+ // Versuche IMMER Extension-Pfad zuerst (auch wenn Flag nicht gesetzt)
+ // parseViaExtension prüft selbst, ob Extension verfügbar ist
+ // #region agent log
+ const extAvailable = isExtensionAvailable();
+ const hasChromeRuntime = typeof chrome !== 'undefined' && chrome.runtime && chrome.runtime.sendMessage;
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'ebayParserService.js:292',message:'parseEbayAccount: route decision',data:{extAvailable,hasChromeRuntime,url},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'D'})}).catch(()=>{});
+ // #endregion
+
+ try {
+ // Versuche Extension zu nutzen (auch wenn Flag nicht gesetzt - parseViaExtension prüft selbst)
+ return await parseViaExtension(url);
+ } catch (e) {
+ // Extension-Fehler: Fallback zu Stub
+ console.warn("Extension parsing failed, falling back to stub:", e.message);
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'ebayParserService.js:299',message:'parseEbayAccount: extension error, using stub',data:{error:e.message},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'D'})}).catch(()=>{});
+ // #endregion
+ }
+
+ // Fallback: Stub-Implementierung
+ const stubResult = await parseViaStub(url);
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'ebayParserService.js:304',message:'parseEbayAccount: stub result',data:{itemsSold:stubResult.stats?.itemsSold},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'D'})}).catch(()=>{});
+ // #endregion
+ return stubResult;
+}
\ No newline at end of file
diff --git a/Server/src/services/productsService.js b/Server/src/services/productsService.js
new file mode 100644
index 0000000..053e908
--- /dev/null
+++ b/Server/src/services/productsService.js
@@ -0,0 +1,258 @@
+/**
+ * Products Service
+ * CRUD-Operationen für Products aus Appwrite
+ * Filtert nach product_account_id für Account-Scoping
+ */
+
+import { databases, databaseId } from "../lib/appwrite";
+import { Query, ID } from "appwrite";
+import { getAccountById, deriveMarketFromAccount, deriveCurrencyFromMarket, updateAccountLastScanAt } from "./accountsService";
+import { parseViaExtensionScanProducts } from "./ebayParserService";
+
+const productsCollectionId = import.meta.env.VITE_APPWRITE_PRODUCTS_COLLECTION_ID || "products";
+
+/**
+ * Lädt alle Products für einen bestimmten Account
+ * @param {string} accountId - ID des Accounts (product_account_id)
+ * @param {Object} [options] - Optionale Parameter
+ * @param {number} [options.limit] - Maximale Anzahl Ergebnisse (default: 25)
+ * @param {number} [options.offset] - Offset für Pagination (default: 0)
+ * @param {string} [options.orderBy] - Feld zum Sortieren (default: "$createdAt")
+ * @param {string} [options.orderType] - Sortier-Richtung: "asc" oder "desc" (default: "desc")
+ * @returns {Promise} Array von Product-Dokumenten
+ */
+export async function listProductsByAccount(accountId, options = {}) {
+ if (!accountId) {
+ console.warn("listProductsByAccount: accountId fehlt");
+ return [];
+ }
+
+ const {
+ limit = 25,
+ offset = 0,
+ orderBy = "$createdAt",
+ orderType = "desc",
+ } = options;
+
+ try {
+ const queries = [
+ Query.equal("product_account_id", accountId),
+ Query.orderDesc(orderBy), // orderType wird über Desc/Asc gehandhabt
+ Query.limit(limit),
+ Query.offset(offset),
+ ];
+
+ // Wenn orderType "asc" ist, verwende orderAsc statt orderDesc
+ if (orderType === "asc") {
+ queries[1] = Query.orderAsc(orderBy);
+ }
+
+ const response = await databases.listDocuments(
+ databaseId,
+ productsCollectionId,
+ queries
+ );
+
+ return response.documents;
+ } catch (e) {
+ console.error("Fehler beim Laden der Products:", e);
+
+ // Wenn Collection nicht existiert oder Berechtigungen fehlen
+ if (e.code === 404 || e.code === 401 || e.type === 'collection_not_found') {
+ // Placeholder: Collection existiert noch nicht
+ console.warn("Products-Collection existiert noch nicht oder ist nicht verfügbar. Gebe leeres Array zurück.");
+ return [];
+ }
+
+ throw e;
+ }
+}
+
+/**
+ * Lädt ein einzelnes Product nach ID
+ * @param {string} productId - ID des Products
+ * @returns {Promise} Product-Dokument oder null
+ */
+export async function getProductById(productId) {
+ if (!productId) {
+ console.warn("getProductById: productId fehlt");
+ return null;
+ }
+
+ try {
+ const document = await databases.getDocument(
+ databaseId,
+ productsCollectionId,
+ productId
+ );
+ return document;
+ } catch (e) {
+ // 404 bedeutet, dass das Dokument nicht existiert
+ if (e.code === 404 || e.type === 'document_not_found') {
+ return null;
+ }
+ console.error("Fehler beim Laden des Products:", e);
+ throw e;
+ }
+}
+
+/**
+ * Scannt Produkte für einen Account über die Extension (echte eBay-Daten)
+ * @param {string} accountId - ID des Accounts
+ * @returns {Promise<{ created: number, updated: number }>} Anzahl erstellter/aktualisierter Produkte
+ */
+export async function scanProductsForAccount(accountId) {
+ if (!accountId) {
+ throw new Error("accountId ist erforderlich");
+ }
+
+ try {
+ // 1. Lade Account, um URL und andere Daten abzuleiten
+ const account = await getAccountById(accountId);
+ if (!account) {
+ throw new Error("Account nicht gefunden");
+ }
+
+ if (!account.account_url) {
+ throw new Error("Account-URL fehlt. Bitte Account refreshen.");
+ }
+
+ // 2. Extension aufrufen: scanne Produkte
+ const items = await parseViaExtensionScanProducts(account.account_url, accountId);
+
+ // 3. Response-Items zu Product-Schema mappen
+ const mappedProducts = items.map(item => {
+ // Validiere, dass platformProductId vorhanden ist
+ if (!item.platformProductId) {
+ console.warn("Item ohne platformProductId übersprungen:", item);
+ return null;
+ }
+
+ return {
+ product_platform_product_id: item.platformProductId,
+ product_title: item.title || "",
+ product_price: item.price ?? undefined, // undefined statt null für Appwrite
+ product_currency: item.currency ?? undefined, // auto-fill from market if undefined
+ product_url: item.url || "",
+ product_status: item.status ?? "unknown",
+ product_category: item.category ?? "unknown",
+ product_condition: item.condition ?? "unknown"
+ };
+ }).filter(Boolean); // Entferne null-Einträge
+
+ // 4. upsertProductsForAccount aufrufen
+ const result = await upsertProductsForAccount(accountId, mappedProducts);
+
+ // 5. account_last_scan_at aktualisieren
+ await updateAccountLastScanAt(accountId, new Date().toISOString());
+
+ // 6. Return { created, updated }
+ return result;
+ } catch (e) {
+ console.error("Fehler beim Scannen der Produkte:", e);
+ throw e;
+ }
+}
+
+/**
+ * Erstellt oder aktualisiert Produkte für einen Account (vorbereitet für Extension-Scans)
+ * @param {string} accountId - ID des Accounts
+ * @param {Array} products - Array von Produkt-Daten (kann partiell sein)
+ * @returns {Promise<{ created: number, updated: number }>} Anzahl erstellter/aktualisierter Produkte
+ */
+export async function upsertProductsForAccount(accountId, products) {
+ if (!accountId) {
+ throw new Error("accountId ist erforderlich");
+ }
+ if (!Array.isArray(products) || products.length === 0) {
+ return { created: 0, updated: 0 };
+ }
+
+ try {
+ // Lade Account, um Market und andere Daten abzuleiten
+ const account = await getAccountById(accountId);
+ if (!account) {
+ throw new Error("Account nicht gefunden");
+ }
+
+ // Leite Market und Currency aus Account ab
+ const market = deriveMarketFromAccount(account);
+ if (market === "UNKNOWN") {
+ throw new Error(
+ "Market konnte nicht erkannt werden. Bitte Account refreshen."
+ );
+ }
+
+ const currency = deriveCurrencyFromMarket(market);
+ const platform = "ebay"; // Enum-Werte sind lowercase gemäß Fehlermeldung: [amazon], [ebay]
+
+ // Lade bestehende Produkte für Duplikat-Prüfung
+ const existingProducts = await listProductsByAccount(accountId, {
+ limit: 1000,
+ offset: 0,
+ });
+
+ // Erstelle Map von platform_product_id -> bestehendes Produkt
+ const existingProductsMap = new Map();
+ existingProducts.forEach((p) => {
+ if (p.product_platform_product_id) {
+ existingProductsMap.set(p.product_platform_product_id, p);
+ }
+ });
+
+ let created = 0;
+ let updated = 0;
+
+ // Verarbeite jedes Produkt
+ for (const productData of products) {
+ // Validiere, dass platform_product_id vorhanden ist
+ if (!productData.product_platform_product_id) {
+ console.warn("Produkt ohne product_platform_product_id übersprungen:", productData);
+ continue;
+ }
+
+ const platformProductId = productData.product_platform_product_id;
+ const existingProduct = existingProductsMap.get(platformProductId);
+
+ // Ergänze fehlende erforderliche Felder aus Account
+ const fullProductData = {
+ product_account_id: accountId,
+ product_platform: platform,
+ product_platform_market: market,
+ product_currency: currency,
+ ...productData, // Produkt-Daten überschreiben Account-Daten wo vorhanden
+ };
+
+ try {
+ if (existingProduct) {
+ // Aktualisiere bestehendes Produkt
+ await databases.updateDocument(
+ databaseId,
+ productsCollectionId,
+ existingProduct.$id,
+ fullProductData
+ );
+ updated++;
+ } else {
+ // Erstelle neues Produkt
+ await databases.createDocument(
+ databaseId,
+ productsCollectionId,
+ ID.unique(),
+ fullProductData
+ );
+ created++;
+ }
+ } catch (e) {
+ console.error(`Fehler beim Upsert des Produkts "${platformProductId}":`, e);
+ // Weiter mit nächstem Produkt
+ continue;
+ }
+ }
+
+ return { created, updated };
+ } catch (e) {
+ console.error("Fehler beim Upsert der Produkte:", e);
+ throw e;
+ }
+}
diff --git a/Server/vite.config.js b/Server/vite.config.js
new file mode 100644
index 0000000..0cca23e
--- /dev/null
+++ b/Server/vite.config.js
@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import path from 'path'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [react(), tailwindcss()],
+ resolve: {
+ alias: {
+ '@': path.resolve(__dirname, './src'),
+ },
+ },
+})
+
+ );
+};
diff --git a/Server/src/components/layout/LogoSquare.jsx b/Server/src/components/layout/LogoSquare.jsx
new file mode 100644
index 0000000..9813675
--- /dev/null
+++ b/Server/src/components/layout/LogoSquare.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+export const LogoSquare = () => {
+ return (
+
+ 
+
+ );
+};
diff --git a/Server/src/components/layout/LogoVertical.jsx b/Server/src/components/layout/LogoVertical.jsx
new file mode 100644
index 0000000..2f577cb
--- /dev/null
+++ b/Server/src/components/layout/LogoVertical.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+export const LogoVertical = () => {
+ return (
+
+ 
+
+ );
+};
diff --git a/Server/src/components/onboarding/OnboardingGate.jsx b/Server/src/components/onboarding/OnboardingGate.jsx
new file mode 100644
index 0000000..c311c75
--- /dev/null
+++ b/Server/src/components/onboarding/OnboardingGate.jsx
@@ -0,0 +1,477 @@
+"use client";
+import React, { useState } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { BackgroundRippleEffect } from "@/components/layout/BackgroundRippleEffect";
+import Shuffle from "@/components/ui/Shuffle";
+import ColourfulText from "@/components/ui/colourful-text";
+import { PlaceholdersAndVanishInput } from "@/components/ui/placeholders-and-vanish-input";
+import { MultiStepLoader } from "@/components/ui/multi-step-loader";
+import { IPhoneNotification } from "@/components/ui/iphone-notification";
+import { parseEbayAccount } from "@/services/ebayParserService";
+import { createManagedAccount, fetchManagedAccounts } from "@/services/accountsService";
+import { account, databases, databaseId, usersCollectionId } from "@/lib/appwrite";
+
+export const OnboardingGate = ({ userName, onStart, loading, error }) => {
+ const [phase, setPhase] = useState("shuffle");
+ const [submitting, setSubmitting] = useState(false);
+ const [submitError, setSubmitError] = useState("");
+ const [showNotification, setShowNotification] = useState(false);
+ const [notificationMessage, setNotificationMessage] = useState("bitte eine gueltige url verwenden!");
+ const [skipHovered, setSkipHovered] = useState(false);
+
+ const loadingStates = [
+ { text: "URL wird verarbeitet..." },
+ { text: "Account-Daten werden geladen..." },
+ { text: "Account wird erstellt..." },
+ { text: "Fast fertig..." },
+ ];
+
+ const placeholders = [
+ "Gib deine eBay-Account-URL ein...",
+ "z.B. https://www.ebay.de/str/username",
+ "Paste deine eBay Shop-URL hier...",
+ ];
+
+ const handleOverlayClick = async (e) => {
+ // Only handle clicks on the overlay itself or when in shuffle phase
+ if (phase === "shuffle") {
+ // Create user document first (but don't call onStart, as that would hide the gate)
+ // We need to create it directly to ensure it exists for account creation later
+ try {
+ const authUser = await account.get();
+ if (authUser && databases && databaseId && usersCollectionId) {
+ try {
+ await databases.createDocument(
+ databaseId,
+ usersCollectionId,
+ authUser.$id,
+ {
+ user_name: authUser.name || "User"
+ }
+ );
+ } catch (docErr) {
+ // 409 Conflict means document already exists - that's ok
+ if (docErr.code !== 409 && docErr.type !== 'document_already_exists') {
+ console.warn("Fehler beim Erstellen des User-Dokuments:", docErr);
+ }
+ }
+ }
+ } catch (err) {
+ console.error("Fehler beim Abrufen des Users oder Erstellen des Dokuments:", err);
+ // Continue anyway - might already exist
+ }
+
+ // Add small delay to let the shuffle exit animation complete
+ // Exit animation is 0.5s, so we wait a bit longer to see it fully
+ setTimeout(() => {
+ setPhase("input");
+ }, 600); // 600ms delay - slightly longer than exit animation (500ms)
+ }
+ };
+
+ const handleSkip = async () => {
+ // Skip onboarding - directly call onStart to proceed to dashboard
+ // Must await to ensure User document is created before proceeding
+ if (onStart) {
+ await onStart();
+ }
+ };
+
+ // Validate eBay URL
+ const isValidEbayUrl = (url) => {
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'OnboardingGate.jsx:45',message:'isValidEbayUrl: entry',data:{url,hasUrl:!!url,trimmedUrl:url?.trim()},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'A'})}).catch(()=>{});
+ // #endregion
+
+ if (!url || !url.trim()) {
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'OnboardingGate.jsx:48',message:'isValidEbayUrl: empty url',data:{},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'A'})}).catch(()=>{});
+ // #endregion
+ return false;
+ }
+
+ // Pattern for hostname only (without protocol/path)
+ const ebayHostnamePattern = /^(www\.)?(ebay\.(de|com|co\.uk|fr|it|es|nl|at|ch|com\.au|ca)|ebay-kleinanzeigen\.de)$/i;
+
+ try {
+ const urlObj = new URL(url);
+ const hostname = urlObj.hostname;
+ const patternMatches = ebayHostnamePattern.test(hostname);
+
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'OnboardingGate.jsx:62',message:'isValidEbayUrl: validation result',data:{url,hostname,patternMatches,pattern:ebayHostnamePattern.toString()},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'A'})}).catch(()=>{});
+ // #endregion
+
+ return patternMatches;
+ } catch (e) {
+ // Invalid URL format
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'OnboardingGate.jsx:62',message:'isValidEbayUrl: URL parse error',data:{url,error:e.message},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'A'})}).catch(()=>{});
+ // #endregion
+ return false;
+ }
+ };
+
+ const handleAccountSubmit = async (e, url) => {
+ e.preventDefault();
+
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'OnboardingGate.jsx:59',message:'handleAccountSubmit: entry',data:{url,hasUrl:!!url,phase},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'B'})}).catch(()=>{});
+ // #endregion
+
+ if (!url || !url.trim()) {
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'OnboardingGate.jsx:64',message:'handleAccountSubmit: empty url, showing notification',data:{},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'B'})}).catch(()=>{});
+ // #endregion
+ setNotificationMessage("bitte eine gueltige url verwenden!");
+ setShowNotification(true);
+ return;
+ }
+
+ // Validate eBay URL
+ const isValid = isValidEbayUrl(url);
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'OnboardingGate.jsx:71',message:'handleAccountSubmit: validation result',data:{url,isValid},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'A'})}).catch(()=>{});
+ // #endregion
+
+ if (!isValid) {
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'OnboardingGate.jsx:76',message:'handleAccountSubmit: invalid url, showing notification',data:{url},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'A'})}).catch(()=>{});
+ // #endregion
+ setNotificationMessage("bitte eine gueltige url verwenden!");
+ setShowNotification(true);
+ return;
+ }
+
+ setSubmitting(true);
+ setSubmitError("");
+
+ // Wait 2 seconds for vanish animation, then switch to loading phase
+ setTimeout(async () => {
+ // Switch to loading phase first
+ setPhase("loading");
+
+ try {
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'OnboardingGate.jsx:88',message:'handleAccountSubmit: before parseEbayAccount',data:{url},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'C'})}).catch(()=>{});
+ // #endregion
+
+ // Parse eBay account
+ const accountData = await parseEbayAccount(url);
+
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'OnboardingGate.jsx:93',message:'handleAccountSubmit: parseEbayAccount success',data:{url,hasAccountData:!!accountData,market:accountData?.market,sellerId:accountData?.sellerId},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'C'})}).catch(()=>{});
+ // #endregion
+
+ // Validate that sellerId was extracted successfully
+ if (!accountData.sellerId || accountData.sellerId.trim() === "") {
+ throw new Error("Die eBay-URL konnte nicht verarbeitet werden. Bitte stelle sicher, dass es eine gültige eBay-Shop-URL ist.");
+ }
+
+ // Get current user
+ const authUser = await account.get();
+
+ // Check for duplicate account before creating
+ const existingAccounts = await fetchManagedAccounts(authUser.$id);
+ const duplicateAccount = existingAccounts.find(
+ (acc) =>
+ acc.account_platform_account_id === accountData.sellerId &&
+ acc.account_platform_market === accountData.market
+ );
+
+ if (duplicateAccount) {
+ throw new Error("Dieser Account ist bereits verbunden.");
+ }
+
+ // Create account in database
+ await createManagedAccount(authUser.$id, {
+ account_platform_market: accountData.market,
+ account_platform_account_id: accountData.sellerId,
+ account_shop_name: accountData.shopName || null,
+ account_url: url,
+ account_status: accountData.status || "active",
+ });
+
+ // Account erstellt erfolgreich, rufe onStart auf
+ onStart && onStart();
+
+ // Trigger event to reload Dashboard accounts
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'OnboardingGate.jsx:142',message:'handleAccountSubmit: account created, triggering reload event',data:{url},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'B'})}).catch(()=>{});
+ // #endregion
+ window.dispatchEvent(new CustomEvent('accountsUpdated'));
+ } catch (err) {
+ console.error("Fehler beim Erstellen des Accounts:", err);
+
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'OnboardingGate.jsx:106',message:'handleAccountSubmit: error caught',data:{url,errorMessage:err.message,errorCode:err.code,errorType:err.type,errorStack:err.stack?.substring(0,200)},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'C'})}).catch(()=>{});
+ // #endregion
+
+ // Show notification for URL validation, duplicate, or parsing errors
+ if (
+ err.message?.includes("URL") ||
+ err.message?.includes("ungültig") ||
+ err.message?.includes("invalid") ||
+ err.message?.includes("bereits verbunden") ||
+ err.message?.includes("already")
+ ) {
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'OnboardingGate.jsx:205',message:'handleAccountSubmit: URL/duplicate error, showing notification',data:{errorMessage:err.message},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'C'})}).catch(()=>{});
+ // #endregion
+ // Use the actual error message or default message
+ setNotificationMessage(err.message || "bitte eine gueltige url verwenden!");
+ setShowNotification(true);
+ } else {
+ // #region agent log
+ fetch('http://127.0.0.1:7242/ingest/246fe132-ecc5-435f-bd9c-fe5e8e26089d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'OnboardingGate.jsx:175',message:'handleAccountSubmit: non-URL error, setting submitError',data:{errorMessage:err.message},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'C'})}).catch(()=>{});
+ // #endregion
+ setSubmitError(err.message || "Fehler beim Erstellen des Accounts. Bitte versuche es erneut.");
+ }
+ setPhase("input");
+ setSubmitting(false);
+ }
+ }, 2000); // 2 second delay for vanish animation
+ };
+
+ return (
+