feat: Enhance squad bases data retrieval and UI with validation and WIP hint

Author: Agent772

src/features/squadBases/squadBasesData.ts

@@ -29,36 +29,36 @@ export function getSquadBaseData(db: Database): SquadGroupBases[] {
     LEFT JOIN squad_member sm ON sm.squad_id = s.id
     LEFT JOIN user_profile up ON up.id = sm.user_profile_id
     LEFT JOIN base b on b.owner_user_profile_id = up.id
-    where b.owner_user_profile_id > 0
     ORDER BY s.name, up.name`);
 
-  type Row = [number, string, number, string, number, number];
+  type Row = [number, string, number, string, number | null, number | null];
   const squadGroups: SquadGroupBases[] = [];
   if (squads[0]) {
     let currentSquad: SquadGroupBases | null = null;
     let memberMap: Map<string, { name: string; bases: { location_x: number; location_y: number; }[] }> = new Map();
+    let lastSquadName: string | null = null;
 
     for (const row of squads[0].values as Row[]) {
       const squad_name = row[1] || '(no name)';
       const member_name = row[3] || String(row[2]);
       const location_x = row[4];
       const location_y = row[5];
 
-      if (!currentSquad || currentSquad.squadName !== squad_name) {
+      if (lastSquadName !== squad_name) {
         if (currentSquad) {
-          // Push previous squad group
           currentSquad.members = Array.from(memberMap.values());
           squadGroups.push(currentSquad);
         }
         currentSquad = { squadName: squad_name, members: [] };
         memberMap = new Map();
+        lastSquadName = squad_name;
       }
 
       if (!memberMap.has(member_name)) {
         memberMap.set(member_name, { name: member_name, bases: [] });
       }
       // Only add base if location_x and location_y are valid numbers
-      if (typeof location_x === 'number' && typeof location_y === 'number') {
+      if (typeof location_x === 'number' && typeof location_y === 'number' && !isNaN(location_x) && !isNaN(location_y)) {
         memberMap.get(member_name)!.bases.push({ location_x, location_y });
       }
     }

src/features/squadBases/squadBasesPanel.tsx

@@ -194,6 +194,23 @@ export function SquadBasesPanel({ db }: squadBaseProps) {
   // Render
   return (
     <section style={{ width: '100%' }} aria-label={t('squad_base_panel.panel_header')} role="region">
+      <div
+        style={{
+          background: '#fffbe6',
+          color: '#8a6d3b',
+          border: '1px solid #faebcc',
+          borderRadius: 6,
+          padding: '12px 18px',
+          marginBottom: 16,
+          fontSize: '1rem',
+          fontWeight: 500,
+          boxShadow: '0 1px 6px rgba(0,0,0,0.07)',
+        }}
+        role="note"
+        aria-live="polite"
+      >
+        ⚠️ <strong>{t('squad_base_panel.wip_hint', 'This panel is a work in progress. Not every flag is attributed correctly yet.')}</strong>
+      </div>
       <div
         style={{
           display: 'flex',
@@ -292,15 +309,22 @@ export function SquadBasesPanel({ db }: squadBaseProps) {
                     const filteredBases = member.bases.filter(b =>
                       filter.base_location === '' || `${b.location_x},${b.location_y}`.includes(filter.base_location)
                     );
+                    const hasBases = member.bases.length > 0;
                     return (
                       <React.Fragment key={member.name + mIdx}>
-                        <tr className="member-row" onClick={e => { e.stopPropagation(); toggleMember(squad.squadName, member.name); }} tabIndex={0} aria-label={t('squad_base_panel.member_aria_label', { name: member.name, bases: member.bases.length })}>
+                        <tr
+                          className={hasBases ? "member-row" : "member-row no-bases-member"}
+                          onClick={hasBases ? (e => { e.stopPropagation(); toggleMember(squad.squadName, member.name); }) : undefined}
+                          tabIndex={hasBases ? 0 : -1}
+                          aria-label={t('squad_base_panel.member_aria_label', { name: member.name, bases: member.bases.length })}
+                          style={hasBases ? {} : { opacity: 0.7, cursor: 'default' }}
+                        >
                           <td className="member-cell" colSpan={3}>
-                            <span className="arrow" aria-hidden="true">{memberOpen ? '▼' : '▶'}</span>{member.name}
+                            <span className="arrow" aria-hidden="true">{hasBases ? (memberOpen ? '▼' : '▶') : ''}</span>{member.name}
                             <span className="count">({t('squad_base_panel.bases', { count: member.bases.length })})</span>
                           </td>
                         </tr>
-                        {memberOpen && (filteredBases.length === 0 ? (
+                        {hasBases && memberOpen && (filteredBases.length === 0 ? (
                           <tr className="no-bases-row">
                             <td className="base-cell" colSpan={2}>– {t('squad_base_panel.no_bases')} –</td>
                           </tr>