UI: справочник подразделений группировкой optgroup — РЦУ РЧС / ОУМЧС / Г(Р)ОЧС по областям

frontend/src/pages/UsersAdmin.jsx

@@ -175,6 +175,24 @@ const UsersAdmin = () => {
 
   const unitName = (id) => units.find((u) => u.id === id)?.name || '—';
 
+  // Иерархия для optgroup: РЦУ РЧС, 6 ОУМЧС, Г(Р)ОЧС сгруппированы по родителю
+  const unitsTree = (() => {
+    const rcu = units.filter((u) => u.kind === 'rcu');
+    const obl = units.filter((u) => u.kind === 'oblast');
+    const oblById = Object.fromEntries(obl.map((u) => [u.id, u]));
+    const children = {};
+    obl.forEach((o) => { children[o.id] = []; });
+    units.filter((u) => u.kind === 'gor_rayon').forEach((u) => {
+      if (u.parent_id && children[u.parent_id]) children[u.parent_id].push(u);
+      else (children._other ||= []).push(u);
+    });
+    const groups = obl
+      .filter((o) => (children[o.id] || []).length)
+      .map((o) => ({ label: o.name, items: children[o.id] }));
+    if (children._other?.length) groups.push({ label: 'Прочие', items: children._other });
+    return { rcu, obl, groups };
+  })();
+
   const createUser = async () => {
     setCreating(true);
     setMessage('');
@@ -293,7 +311,21 @@ const UsersAdmin = () => {
             <label>Подразделение
               <select value={form.unit_id} onChange={(e) => setForm({ ...form, unit_id: e.target.value })}>
                 <option value="">— не выбрано —</option>
-                {units.map((u) => <option key={u.id} value={u.id}>{u.name}</option>)}
+                {unitsTree.rcu.length > 0 && (
+                  <optgroup label="Республиканский уровень">
+                    {unitsTree.rcu.map((u) => <option key={u.id} value={u.id}>{u.name}</option>)}
+                  </optgroup>
+                )}
+                {unitsTree.obl.length > 0 && (
+                  <optgroup label="Областные управления">
+                    {unitsTree.obl.map((u) => <option key={u.id} value={u.id}>{u.name}</option>)}
+                  </optgroup>
+                )}
+                {unitsTree.groups.map((g) => (
+                  <optgroup key={g.label} label={g.label}>
+                    {g.items.map((u) => <option key={u.id} value={u.id}>{u.name}</option>)}
+                  </optgroup>
+                ))}
               </select>
             </label>
             <label>Роль