TabPrograms.jsx

Go to the documentation of this file.

// TabPrograms.jsx - Installed Programs Tab
import React, { useState, useEffect } from "react";
import { apiFetch } from "../../lib/api";
 
export default function TabPrograms({ agentId }) {
  const [programs, setPrograms] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [search, setSearch] = useState("");
  const [sortField, setSortField] = useState("name");
  const [sortDir, setSortDir] = useState("asc");
 
  useEffect(() => {
    if (!agentId) return;
    fetchPrograms();
  }, [agentId]);
 
  const fetchPrograms = async () => {
    setLoading(true);
    setError(null);
    try {
      const res = await apiFetch(`/agent/${agentId}/programs`);
      if (!res.ok) throw new Error("Failed to fetch programs");
      const data = await res.json();
      setPrograms(Array.isArray(data) ? data : []);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
 
  const handleSort = (field) => {
    if (sortField === field) {
      setSortDir(sortDir === "asc" ? "desc" : "asc");
    } else {
      setSortField(field);
      setSortDir("asc");
    }
  };
 
  const filteredPrograms = programs
    .filter((p) =>
      (p.name || "").toLowerCase().includes(search.toLowerCase()) ||
      (p.publisher || "").toLowerCase().includes(search.toLowerCase()) ||
      (p.version || "").toLowerCase().includes(search.toLowerCase())
    )
    .sort((a, b) => {
      const aVal = a[sortField] || "";
      const bVal = b[sortField] || "";
      const cmp = aVal.localeCompare(bVal);
      return sortDir === "asc" ? cmp : -cmp;
    });
 
  if (loading) return <div className="card">Loading installed programs...</div>;
  if (error) return <div className="card error">{error}</div>;
 
  return (
    <div className="tab-container">
      <div className="tab-header">
        <h2>Installed Programs ({programs.length})</h2>
        <button className="btn" onClick={fetchPrograms}>
          Refresh
        </button>
      </div>
 
      <div className="card">
        <input
          type="text"
          placeholder="Search programs..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className="search-input"
          style={{ width: "100%", padding: "8px", marginBottom: "16px" }}
        />
 
        <div className="table-responsive">
          <table className="data-table">
            <thead>
              <tr>
                <th onClick={() => handleSort("name")} style={{ cursor: "pointer" }}>
                  Name {sortField === "name" && (sortDir === "asc" ? "▲" : "▼")}
                </th>
                <th onClick={() => handleSort("version")} style={{ cursor: "pointer" }}>
                  Version {sortField === "version" && (sortDir === "asc" ? "▲" : "▼")}
                </th>
                <th onClick={() => handleSort("publisher")} style={{ cursor: "pointer" }}>
                  Publisher {sortField === "publisher" && (sortDir === "asc" ? "▲" : "▼")}
                </th>
                <th onClick={() => handleSort("installDate")} style={{ cursor: "pointer" }}>
                  Install Date {sortField === "installDate" && (sortDir === "asc" ? "▲" : "▼")}
                </th>
                <th>Size</th>
              </tr>
            </thead>
            <tbody>
              {filteredPrograms.length === 0 ? (
                <tr>
                  <td colSpan="5" style={{ textAlign: "center", padding: "24px" }}>
                    {search ? "No programs match your search" : "No programs found"}
                  </td>
                </tr>
              ) : (
                filteredPrograms.map((prog, idx) => (
                  <tr key={idx}>
                    <td>{prog.name || "—"}</td>
                    <td>{prog.version || "—"}</td>
                    <td>{prog.publisher || "—"}</td>
                    <td>{prog.installDate ? new Date(prog.installDate).toLocaleDateString() : "—"}</td>
                    <td>{prog.size || "—"}</td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}