fix: show combined units on live map list

apps/client/src/components/dispatch/map/units/active-map-units.tsx

@@ -25,7 +25,9 @@ interface Props {
 }
 
 export function ActiveMapUnits({ openItems, setOpenItems }: Props) {
-  const [tempUnit, setTempUnit] = React.useState<null | Officer | EmsFdDeputy>(null);
+  const [tempUnit, setTempUnit] = React.useState<
+    null | Officer | EmsFdDeputy | CombinedEmsFdUnit | CombinedLeoUnit
+  >(null);
   const { players } = useMapPlayersStore();
 
   const portalRef = usePortal("ActiveMapCalls");
@@ -78,17 +80,44 @@ interface ActiveUnitsOptions {
 
 function makeActiveUnits({ players, activeOfficers, activeDeputies }: ActiveUnitsOptions) {
   const activeUnits: MapPlayer[] = [];
-  const _activeOfficers = activeOfficers.flatMap((officer) => {
-    if (isUnitCombined(officer)) return officer.officers;
-    return officer;
-  });
-  const _activeDeputies = activeDeputies.flatMap((deputy) => {
-    if (isUnitCombinedEmsFd(deputy)) return deputy.deputies;
-    return deputy;
-  });
+  const _activeOfficers = activeOfficers;
+  const _activeDeputies = activeDeputies;
 
   for (const activeUnit of [..._activeOfficers, ..._activeDeputies]) {
     if (!activeUnit.status || activeUnit.status.shouldDo === ShouldDoType.SET_OFF_DUTY) continue;
+
+    if (isUnitCombined(activeUnit) || isUnitCombinedEmsFd(activeUnit)) {
+      const player = players.find((player) => {
+        const steamIds = isUnitCombinedEmsFd(activeUnit)
+          ? activeUnit.deputies.map((deputy) => deputy.user?.steamId)
+          : activeUnit.officers.map((officer) => officer.user?.steamId);
+
+        const discordIds = isUnitCombinedEmsFd(activeUnit)
+          ? activeUnit.deputies.map((deputy) => deputy.user?.discordId)
+          : activeUnit.officers.map((officer) => officer.user?.discordId);
+
+        const filteredSteamIds = steamIds.filter(Boolean) as string[];
+        const filteredDiscordIds = discordIds.filter(Boolean) as string[];
+
+        return (
+          (player.convertedSteamId && filteredSteamIds.includes(player.convertedSteamId)) ||
+          (player.discordId && filteredDiscordIds.includes(player.discordId))
+        );
+      });
+
+      if (!player || !("steamId" in player) || !("discordId" in player)) continue;
+
+      const existing = activeUnits.some((unit) => {
+        return unit.discordId === discordId || unit.convertedSteamId === steamId;
+      });
+
+      if (player && !existing) {
+        activeUnits.push({ ...player, unit: activeUnit });
+      }
+
+      continue;
+    }
+
     if (!activeUnit.user) continue;
 
     const steamId = activeUnit.user.steamId;

apps/client/src/components/dispatch/map/units/unit-item.tsx

@@ -8,14 +8,17 @@ import { Button } from "@snailycad/ui";
 import { useTranslations } from "next-intl";
 import { useModal } from "state/modalState";
 import { ModalIds } from "types/ModalIds";
-import type { EmsFdDeputy, Officer } from "@snailycad/types";
+import type { CombinedEmsFdUnit, CombinedLeoUnit, EmsFdDeputy, Officer } from "@snailycad/types";
 import { Infofield } from "components/shared/Infofield";
 import { useFeatureEnabled } from "hooks/useFeatureEnabled";
 import { UnitRadioChannelModal } from "components/dispatch/active-units/UnitRadioChannelModal";
+import { isUnitCombined, isUnitCombinedEmsFd } from "@snailycad/utils";
 
 interface CallItemProps {
   player: MapPlayer;
-  setTempUnit: React.Dispatch<React.SetStateAction<Officer | EmsFdDeputy | null>>;
+  setTempUnit: React.Dispatch<
+    React.SetStateAction<Officer | EmsFdDeputy | CombinedEmsFdUnit | CombinedLeoUnit | null>
+  >;
 }
 
 export function UnitItem({ setTempUnit, player }: CallItemProps) {
@@ -60,7 +63,37 @@ export function UnitItem({ setTempUnit, player }: CallItemProps) {
         <Accordion.Content className="pt-2 text-base text-neutral-800 dark:text-white">
           <div className="map-column">
             <Infofield label={t("status")}>{unit.status?.value?.value}</Infofield>
-            <Infofield label={common("user")}>{player.username}</Infofield>
+            {isUnitCombined(unit) ? (
+              <Infofield label={t("officers")}>
+                {unit.officers.map((officer, idx) => {
+                  const nameAndCallsign = `${generateCallsign(officer)} ${makeUnitName(officer)}`;
+                  const showComma = idx !== unit.officers.length - 1;
+
+                  return (
+                    <span key={officer.id}>
+                      {nameAndCallsign}
+                      {showComma ? ", " : ""}
+                    </span>
+                  );
+                })}
+              </Infofield>
+            ) : isUnitCombinedEmsFd(unit) ? (
+              <Infofield label={t("officers")}>
+                {unit.deputies.map((deputy, idx) => {
+                  const nameAndCallsign = `${generateCallsign(deputy)} ${makeUnitName(deputy)}`;
+                  const showComma = idx !== unit.deputies.length - 1;
+
+                  return (
+                    <span key={deputy.id}>
+                      {nameAndCallsign}
+                      {showComma ? ", " : ""}
+                    </span>
+                  );
+                })}
+              </Infofield>
+            ) : (
+              <Infofield label={common("user")}>{player.username}</Infofield>
+            )}
             {RADIO_CHANNEL_MANAGEMENT ? (
               <Infofield className="flex !flex-row gap-2 mt-1" label={t("radioChannel")}>
                 <UnitRadioChannelModal unit={unit} />

apps/client/src/types/map.ts

@@ -1,4 +1,10 @@
-import type { EmsFdDeputy, Officer, User } from "@snailycad/types";
+import type {
+  CombinedEmsFdUnit,
+  CombinedLeoUnit,
+  EmsFdDeputy,
+  Officer,
+  User,
+} from "@snailycad/types";
 import type { PointTuple, LatLngLiteral, Icon, Marker } from "leaflet";
 
 export interface Player {
@@ -64,7 +70,7 @@ export type PlayerDataEventPayload = PlayerDataEvent["payload"][number] & {
   identifier: string;
 };
 export interface MapPlayer extends User, PlayerDataEventPayload {
-  unit: EmsFdDeputy | Officer | null;
+  unit: EmsFdDeputy | Officer | CombinedLeoUnit | CombinedEmsFdUnit | null;
   convertedSteamId: string | null;
   discordId: string | null;
   ref: Marker | null;