Enhance VenueStands component to support company filtering and highlight selected stands; update CompanyStand styles for consistency; add Venue link to Sidebar

Author: Francisca105

src/app/(authenticated)/venue/VenueStands.tsx

@@ -22,6 +22,7 @@ const VenueStands: React.FC<VenueStandsProps> = ({ companies }) => {
 
   // Extract the 'day' parameter from the URL search parameters
   const dayParam = searchParams.get("day");
+  const companyParam = searchParams.get("company");
   const [showingDay, setShowingDay] = useState<string | null>(null);
 
   const standPositions: Record<number, { x: number; y: number }> = {
@@ -56,7 +57,7 @@ const VenueStands: React.FC<VenueStandsProps> = ({ companies }) => {
       new Set(
         companies
           .flatMap((company) => company.stands || [])
-          .map((stand) => stand.date)
+          .map((stand) => stand.date.split("T")[0])
       )
     ).sort();
   };
@@ -66,7 +67,7 @@ const VenueStands: React.FC<VenueStandsProps> = ({ companies }) => {
   const companiesForSelectedDay = useMemo(() => {
     if (!showingDay) return [];
     return companies.filter((company) =>
-      company.stands?.some((stand) => stand.date === showingDay)
+      company.stands?.some((stand) => stand.date.split("T")[0] === showingDay)
     );
   }, [companies, showingDay]);
 
@@ -76,7 +77,8 @@ const VenueStands: React.FC<VenueStandsProps> = ({ companies }) => {
     return (
       companiesForSelectedDay.find((company) =>
         company.stands?.some(
-          (stand) => stand.date === showingDay && stand.standId === standId
+          (stand) =>
+            stand.date.split("T")[0] === showingDay && stand.standId === standId
         )
       ) || null
     );
@@ -86,7 +88,9 @@ const VenueStands: React.FC<VenueStandsProps> = ({ companies }) => {
     if (!showingDay) return [];
     return companies.flatMap(
       (company) =>
-        company.stands?.filter((stand) => stand.date === showingDay) || []
+        company.stands?.filter(
+          (stand) => stand.date.split("T")[0] === showingDay
+        ) || []
     );
   }, [companies, showingDay]);
 
@@ -111,6 +115,10 @@ const VenueStands: React.FC<VenueStandsProps> = ({ companies }) => {
     }
   }, [dayParam, sortedDays]);
 
+  const isStandHighlighted = (company: Company | null) => {
+    return company?.id === companyParam;
+  };
+
   return (
     <div className="w-full space-y-8">
       <GridList>
@@ -136,14 +144,18 @@ const VenueStands: React.FC<VenueStandsProps> = ({ companies }) => {
 
           {/* Company Stands */}
           <g id="stands">
-            {standsForSelectedDay.map((stand) => (
-              <CompanyStand
-                key={`stand-${stand.standId}`}
-                stand={stand}
-                company={getCompanyAtPosition(stand.standId)}
-                standPositions={standPositions}
-              />
-            ))}
+            {standsForSelectedDay.map((stand) => {
+              const company = getCompanyAtPosition(stand.standId);
+              return (
+                <CompanyStand
+                  key={`stand-${stand.standId}`}
+                  stand={stand}
+                  company={company}
+                  standPositions={standPositions}
+                  isSelected={isStandHighlighted(company)}
+                />
+              );
+            })}
           </g>
         </svg>
       </ZoomSvg>

src/app/(authenticated)/venue/stands/CompanyStand.tsx

@@ -28,7 +28,7 @@ const CompanyStand: React.FC<StandProps> = ({
         className={`
           transition-all duration-200 ease-in-out
           ${company ? "cursor-pointer hover:opacity-80" : "cursor-default"}
-          ${isSelected ? "opacity-70" : "opacity-100"}
+          opacity-100
         `}
       >
         {/* Base stand rectangle */}
@@ -38,7 +38,7 @@ const CompanyStand: React.FC<StandProps> = ({
           width="26"
           height="26"
           fill={isSelected ? "#E5E7EB" : "white"}
-          stroke={isSelected ? "#9CA3AF" : "black"}
+          stroke="black"
           strokeWidth={isSelected ? "2" : "1"}
           className="transition-all duration-200"
         />
@@ -64,7 +64,7 @@ const CompanyStand: React.FC<StandProps> = ({
             fontSize="6"
             className={`
               ${company ? "font-medium" : "font-normal"}
-              ${isSelected ? "fill-gray-600" : "fill-black"}
+              ${isSelected ? "fill-black" : "fill-black"}
             `}
           >
             {company.name}
@@ -82,20 +82,6 @@ const CompanyStand: React.FC<StandProps> = ({
             {standNumber}
           </text>
         )}
-
-        {/* Optional highlight effect for selected state */}
-        {isSelected && (
-          <rect
-            x={position.x - 1}
-            y={position.y - 1}
-            width="28"
-            height="28"
-            fill="none"
-            stroke="#4F46E5"
-            strokeWidth="2"
-            className="pointer-events-none"
-          />
-        )}
       </g>
     </a>
   );

src/components/Toolbar/Sidebar.tsx

@@ -49,6 +49,9 @@ export default function Sidebar({ show, onClose }: SidebarProps) {
           <Link href="/companies" onClick={onClose}>
             Companies
           </Link>
+          <Link href="/venue" onClick={onClose}>
+            Venue
+          </Link>
         </div>
         <div></div>
       </div>