Add support for "from_name" field in email notifications

Introduced a new optional "from_name" attribute to email settings, allowing customization of the sender's display name in outgoing emails. Updated backend models, APIs, and front-end components to include and handle this field properly. This enhances email clarity and personalization for users.

frontend/src/pages/AdminUsersPage.jsx

@@ -13,6 +13,7 @@ export function AdminUsersPage() {
     smtp_username: "",
     smtp_password: "",
     clear_smtp_password: false,
+    from_name: "",
     from_email: "",
     use_starttls: true,
     use_ssl: false,
@@ -37,6 +38,7 @@ export function AdminUsersPage() {
       smtp_username: smtp.smtp_username || "",
       smtp_password: "",
       clear_smtp_password: false,
+      from_name: smtp.from_name || "",
       from_email: smtp.from_email || "",
       use_starttls: !!smtp.use_starttls,
       use_ssl: !!smtp.use_ssl,
@@ -85,6 +87,7 @@ export function AdminUsersPage() {
         ...emailSettings,
         smtp_host: emailSettings.smtp_host.trim() || null,
         smtp_username: emailSettings.smtp_username.trim() || null,
+        from_name: emailSettings.from_name.trim() || null,
         from_email: emailSettings.from_email.trim() || null,
         smtp_password: emailSettings.smtp_password || null,
         alert_recipients: recipients,
@@ -249,6 +252,14 @@ export function AdminUsersPage() {
             />
           </div>
 
+          <div className="admin-field">
+            <label>From name</label>
+            <input
+              value={emailSettings.from_name}
+              placeholder="NexaPG Alerts"
+              onChange={(e) => setEmailSettings({ ...emailSettings, from_name: e.target.value })}
+            />
+          </div>
           <div className="admin-field">
             <label>From email</label>
             <input

frontend/src/pages/TargetsPage.jsx

@@ -29,6 +29,64 @@ const emptyEditForm = {
   owner_user_ids: [],
 };
 
+function toggleOwner(ids, userId) {
+  return ids.includes(userId) ? ids.filter((id) => id !== userId) : [...ids, userId];
+}
+
+function OwnerPicker({ candidates, selectedIds, onToggle, query, onQueryChange }) {
+  const filtered = candidates.filter((item) =>
+    item.email.toLowerCase().includes(query.trim().toLowerCase())
+  );
+  const selected = candidates.filter((item) => selectedIds.includes(item.user_id));
+
+  return (
+    <div className="owner-picker">
+      <div className="owner-selected">
+        {selected.length > 0 ? (
+          selected.map((item) => (
+            <button
+              key={`selected-${item.user_id}`}
+              type="button"
+              className="owner-selected-chip"
+              onClick={() => onToggle(item.user_id)}
+              title="Remove owner"
+            >
+              <span>{item.email}</span>
+              <span aria-hidden="true">x</span>
+            </button>
+          ))
+        ) : (
+          <span className="muted">No owners selected yet.</span>
+        )}
+      </div>
+      <input
+        type="text"
+        className="owner-search-input"
+        value={query}
+        onChange={(e) => onQueryChange(e.target.value)}
+        placeholder="Search users by email..."
+      />
+      <div className="owner-search-results">
+        {filtered.map((item) => {
+          const active = selectedIds.includes(item.user_id);
+          return (
+            <button
+              key={item.user_id}
+              type="button"
+              className={`owner-result ${active ? "active" : ""}`}
+              onClick={() => onToggle(item.user_id)}
+            >
+              <span>{item.email}</span>
+              <small>{item.role}</small>
+            </button>
+          );
+        })}
+        {filtered.length === 0 && <div className="owner-result-empty">No matching users.</div>}
+      </div>
+    </div>
+  );
+}
+
 export function TargetsPage() {
   const { tokens, refresh, me } = useAuth();
   const [targets, setTargets] = useState([]);
@@ -40,6 +98,8 @@ export function TargetsPage() {
   const [testState, setTestState] = useState({ loading: false, message: "", ok: null });
   const [saveState, setSaveState] = useState({ loading: false, message: "" });
   const [ownerCandidates, setOwnerCandidates] = useState([]);
+  const [createOwnerQuery, setCreateOwnerQuery] = useState("");
+  const [editOwnerQuery, setEditOwnerQuery] = useState("");
 
   const canManage = me?.role === "admin" || me?.role === "operator";
 
@@ -117,6 +177,7 @@ export function TargetsPage() {
   const startEdit = (target) => {
     setEditing(true);
     setSaveState({ loading: false, message: "" });
+    setEditOwnerQuery("");
     setEditForm({
       id: target.id,
       name: target.name,
@@ -231,27 +292,13 @@ export function TargetsPage() {
             </div>
             <div className="field field-full">
               <label>Responsible Users (Target Owners)</label>
-              <div className="owner-grid">
-                {ownerCandidates.map((candidate) => {
-                  const checked = form.owner_user_ids.includes(candidate.user_id);
-                  return (
-                    <label key={candidate.user_id} className={`owner-chip ${checked ? "active" : ""}`}>
-                      <input
-                        type="checkbox"
-                        checked={checked}
-                        onChange={(e) => {
-                          const next = e.target.checked
-                            ? [...form.owner_user_ids, candidate.user_id]
-                            : form.owner_user_ids.filter((id) => id !== candidate.user_id);
-                          setForm({ ...form, owner_user_ids: next });
-                        }}
-                      />
-                      <span>{candidate.email}</span>
-                    </label>
-                  );
-                })}
-                {ownerCandidates.length === 0 && <small className="muted">No users available.</small>}
-              </div>
+              <OwnerPicker
+                candidates={ownerCandidates}
+                selectedIds={form.owner_user_ids}
+                query={createOwnerQuery}
+                onQueryChange={setCreateOwnerQuery}
+                onToggle={(userId) => setForm({ ...form, owner_user_ids: toggleOwner(form.owner_user_ids, userId) })}
+              />
               <small>Only selected users will receive email notifications for this target's alerts.</small>
             </div>
             <div className="field submit-field field-full">
@@ -322,27 +369,13 @@ export function TargetsPage() {
             </div>
             <div className="field field-full">
               <label>Responsible Users (Target Owners)</label>
-              <div className="owner-grid">
-                {ownerCandidates.map((candidate) => {
-                  const checked = editForm.owner_user_ids.includes(candidate.user_id);
-                  return (
-                    <label key={candidate.user_id} className={`owner-chip ${checked ? "active" : ""}`}>
-                      <input
-                        type="checkbox"
-                        checked={checked}
-                        onChange={(e) => {
-                          const next = e.target.checked
-                            ? [...editForm.owner_user_ids, candidate.user_id]
-                            : editForm.owner_user_ids.filter((id) => id !== candidate.user_id);
-                          setEditForm({ ...editForm, owner_user_ids: next });
-                        }}
-                      />
-                      <span>{candidate.email}</span>
-                    </label>
-                  );
-                })}
-                {ownerCandidates.length === 0 && <small className="muted">No users available.</small>}
-              </div>
+              <OwnerPicker
+                candidates={ownerCandidates}
+                selectedIds={editForm.owner_user_ids}
+                query={editOwnerQuery}
+                onQueryChange={setEditOwnerQuery}
+                onToggle={(userId) => setEditForm({ ...editForm, owner_user_ids: toggleOwner(editForm.owner_user_ids, userId) })}
+              />
               <small>Only selected users will receive email notifications for this target's alerts.</small>
             </div>
             <div className="field submit-field field-full">

frontend/src/styles.css

@@ -749,34 +749,74 @@ button {
   gap: 10px;
 }
 
-.owner-grid {
-  display: flex;
-  flex-wrap: wrap;
+.owner-picker {
+  display: grid;
   gap: 8px;
 }
 
-.owner-chip {
+.owner-selected {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-height: 28px;
+}
+
+.owner-selected-chip {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 6px 10px;
-  border-radius: 10px;
-  border: 1px solid #315a8d;
-  background: #10284d;
-  color: #d9e8fb;
+  gap: 8px;
+  border-radius: 999px;
+  padding: 5px 10px;
+  border: 1px solid #4a8fd3;
+  background: #184679;
+  color: #e8f4ff;
   font-size: 12px;
   font-weight: 600;
 }
 
-.owner-chip.active {
-  border-color: #52c7f8;
-  background: #174377;
+.owner-search-input {
+  width: 100%;
 }
 
-.owner-chip input {
-  margin: 0;
-  width: 14px;
-  height: 14px;
+.owner-search-results {
+  display: grid;
+  gap: 6px;
+  max-height: 150px;
+  overflow: auto;
+  padding-right: 2px;
+}
+
+.owner-result {
+  width: 100%;
+  text-align: left;
+  border-radius: 10px;
+  border: 1px solid #2d5d95;
+  background: #112c52;
+  color: #d9ebff;
+  padding: 7px 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.owner-result small {
+  color: #9db9dc;
+  text-transform: uppercase;
+  font-size: 10px;
+  letter-spacing: 0.05em;
+}
+
+.owner-result.active {
+  border-color: #52c7f8;
+  background: #184679;
+}
+
+.owner-result-empty {
+  border: 1px dashed #365e8e;
+  border-radius: 10px;
+  padding: 8px 10px;
+  color: #9db9dc;
+  font-size: 12px;
 }
 
 .primary-btn {