chore: update

frontend-prep/src/components/Navbar.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef, useCallback } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
-import { useCart } from "../context/CartContext";
+import { useCart } from "../context/useCart";
 import "./Navbar.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
@@ -14,10 +14,11 @@ import {
     faTimes,
     faBell,
     faGift,
+    faUserCircle,
 } from "@fortawesome/free-solid-svg-icons";
 import { faTelegram } from "@fortawesome/free-brands-svg-icons";
 import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-import { getClientNotifications, markNotificationsRead } from "../api/api";
+import { getClientNotifications, markNotificationsRead, getPublicSettings } from "../api/api";
 import type { ClientNotification } from "../api/api";
 
 interface MenuItem {
@@ -33,6 +34,7 @@ function Navbar() {
     const [notifications, setNotifications] = useState<ClientNotification[]>([]);
     const [unreadCount, setUnreadCount] = useState(0);
     const [showNotifPanel, setShowNotifPanel] = useState(false);
+    const [referralEnabled, setReferralEnabled] = useState(true);
     const seenKeysRef = useRef<Set<string>>(new Set());
     const isFirstLoadRef = useRef(true);
     const notifPanelRef = useRef<HTMLDivElement>(null);
@@ -67,6 +69,10 @@ function Navbar() {
         return () => clearInterval(interval);
     }, [fetchNotifications]);
 
+    useEffect(() => {
+        getPublicSettings().then((s) => setReferralEnabled(s.referral_enabled));
+    }, []);
+
     useEffect(() => {
         const handleClickOutside = (e: MouseEvent) => {
             if (notifPanelRef.current && !notifPanelRef.current.contains(e.target as Node)) {
@@ -92,7 +98,8 @@ function Navbar() {
         { id: "panier",     label: "Mon Panier",       icon: faShoppingCart,     path: "/user/panier" },
         { id: "suivi",      label: "Suivi Livraison",  icon: faTruck,            path: "/user/suivi-livraison" },
         { id: "historique", label: "Historique",       icon: faClockRotateLeft,  path: "/user/consultation-historique" },
-        { id: "parrainage", label: "Parrainage",       icon: faGift,             path: "/user/parrainage" },
+        ...(referralEnabled ? [{ id: "parrainage", label: "Parrainage", icon: faGift, path: "/user/parrainage" } as MenuItem] : []),
+        { id: "profil",     label: "Mon Profil",       icon: faUserCircle,       path: "/user/profil" },
     ];
 
     const toggleMenu = () => setIsMenuOpen((v) => !v);

frontend-prep/src/components/ProductCard.css

@@ -1,6 +1,6 @@
 .product-card {
     background-color: #1a1a1a;
-    border: 2px solid white;
+    border: 2px solid var(--category-color, white);
     border-radius: 15px;
     overflow: hidden;
     display: flex;
@@ -14,7 +14,7 @@
 
 .product-card:hover {
     transform: scale(1.08);
-    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
+    box-shadow: 0 8px 25px color-mix(in srgb, var(--category-color, white) 40%, transparent);
     z-index: 10;
 }
 

frontend-prep/src/components/ProductCard.tsx

@@ -1,8 +1,17 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { useCart } from "../context/CartContext";
+import { useCart } from "../context/useCart";
 import "./ProductCard.css";
 
+function getTextColor(hex: string): string {
+    const h = hex.replace("#", "");
+    const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+    const r = parseInt(full.slice(0, 2), 16);
+    const g = parseInt(full.slice(2, 4), 16);
+    const b = parseInt(full.slice(4, 6), 16);
+    return (r * 299 + g * 587 + b * 114) / 1000 > 128 ? "#000000" : "#ffffff";
+}
+
 interface ProductCardProps {
     id: number;
     name: string;
@@ -108,8 +117,13 @@ function ProductCard({
         }
     };
 
+    const cardColor = categoryColor || "#ffffff";
+
     return (
-        <div className={`product-card ${isOutOfStock ? "out-of-stock" : ""}`}>
+        <div
+            className={`product-card ${isOutOfStock ? "out-of-stock" : ""}`}
+            style={{ "--category-color": cardColor } as React.CSSProperties}
+        >
             <div className="product-card-content">
                 <div className="product-image-container">
                     <img
@@ -166,7 +180,7 @@ function ProductCard({
                             disabled={isOutOfStock}
                             style={
                                 categoryColor && !isOutOfStock
-                                    ? { background: categoryColor }
+                                    ? { background: categoryColor, color: getTextColor(categoryColor) }
                                     : undefined
                             }
                         >