Merge remote-tracking branch 'upstream/main'

frontend/src/app/data/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React, { JSX, useEffect, useState } from "react";
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import ApplicationChart from "../../components/ApplicationChart";
@@ -21,28 +21,45 @@ interface DataModel {
   status: string;
   error: string;
   type: string;
+  [key: string]: any;
 }
 
+interface SummaryData {
+  total_entries: number;
+  status_count: Record<string, number>;
+  nsapp_count: Record<string, number>;
+}
 
 const DataFetcher: React.FC = () => {
   const [data, setData] = useState<DataModel[]>([]);
+  const [summary, setSummary] = useState<SummaryData | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [startDate, setStartDate] = useState<Date | null>(null);
-  const [endDate, setEndDate] = useState<Date | null>(null);
-  const [sortConfig, setSortConfig] = useState<{ key: keyof DataModel | null, direction: 'ascending' | 'descending' }>({ key: 'id', direction: 'descending' });
-  const [itemsPerPage, setItemsPerPage] = useState(25);
   const [currentPage, setCurrentPage] = useState(1);
-
-  const [showErrorRow, setShowErrorRow] = useState<number | null>(null);
-
+  const [itemsPerPage, setItemsPerPage] = useState(25);
+  const [sortConfig, setSortConfig] = useState<{ key: string; direction: 'ascending' | 'descending' } | null>(null);
 
   useEffect(() => {
-    const fetchData = async () => {
+    const fetchSummary = async () => {
       try {
-        const response = await fetch("https://api.htl-braunau.at/data/json");
-        if (!response.ok) throw new Error("Failed to fetch data: ${response.statusText}");
+        const response = await fetch("https://api.htl-braunau.at/data/summary");
+        if (!response.ok) throw new Error(`Failed to fetch summary: ${response.statusText}`);
+        const result: SummaryData = await response.json();
+        setSummary(result);
+      } catch (err) {
+        setError((err as Error).message);
+      }
+    };
+
+    fetchSummary();
+  }, []);
+
+  useEffect(() => {
+    const fetchPaginatedData = async () => {
+      setLoading(true);
+      try {
+        const response = await fetch(`https://api.htl-braunau.at/data/paginated?page=${currentPage}&limit=${itemsPerPage === 0 ? '' : itemsPerPage}`);
+        if (!response.ok) throw new Error(`Failed to fetch data: ${response.statusText}`);
         const result: DataModel[] = await response.json();
         setData(result);
       } catch (err) {
@@ -52,52 +69,34 @@ const DataFetcher: React.FC = () => {
       }
     };
 
-    fetchData();
-  }, []);
-
-
-  const filteredData = data.filter(item => {
-    const matchesSearchQuery = Object.values(item).some(value =>
-      value.toString().toLowerCase().includes(searchQuery.toLowerCase())
-    );
-    const itemDate = new Date(item.created_at);
-    const matchesDateRange = (!startDate || itemDate >= startDate) && (!endDate || itemDate <= endDate);
-    return matchesSearchQuery && matchesDateRange;
-  });
+    fetchPaginatedData();
+  }, [currentPage, itemsPerPage]);
 
   const sortedData = React.useMemo(() => {
-    let sortableData = [...filteredData];
-    if (sortConfig.key !== null) {
-      sortableData.sort((a, b) => {
-        if (sortConfig.key !== null && a[sortConfig.key] < b[sortConfig.key]) {
-          return sortConfig.direction === 'ascending' ? -1 : 1;
-        }
-        if (sortConfig.key !== null && a[sortConfig.key] > b[sortConfig.key]) {
-          return sortConfig.direction === 'ascending' ? 1 : -1;
-        }
-        return 0;
-      });
-    }
-    return sortableData;
-  }, [filteredData, sortConfig]);
+    if (!sortConfig) return data;
+    const sorted = [...data].sort((a, b) => {
+      if (a[sortConfig.key] < b[sortConfig.key]) {
+        return sortConfig.direction === 'ascending' ? -1 : 1;
+      }
+      if (a[sortConfig.key] > b[sortConfig.key]) {
+        return sortConfig.direction === 'ascending' ? 1 : -1;
+      }
+      return 0;
+    });
+    return sorted;
+  }, [data, sortConfig]);
 
-  const requestSort = (key: keyof DataModel | null) => {
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>Error: {error}</p>;
+
+  const requestSort = (key: string) => {
     let direction: 'ascending' | 'descending' = 'ascending';
-    if (sortConfig.key === key && sortConfig.direction === 'ascending') {
-      direction = 'descending';
-    } else if (sortConfig.key === key && sortConfig.direction === 'descending') {
-      direction = 'ascending';
-    } else {
+    if (sortConfig && sortConfig.key === key && sortConfig.direction === 'ascending') {
       direction = 'descending';
     }
     setSortConfig({ key, direction });
   };
 
-  interface SortConfig {
-    key: keyof DataModel | null;
-    direction: 'ascending' | 'descending';
-  }
-
   const formatDate = (dateString: string): string => {
     const date = new Date(dateString);
     const year = date.getFullYear();
@@ -109,86 +108,15 @@ const DataFetcher: React.FC = () => {
     return `${day}.${month}.${year} ${hours}:${minutes} ${timezoneOffset} GMT`;
   };
 
-  const handleItemsPerPageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setItemsPerPage(Number(event.target.value));
-    setCurrentPage(1);
-  };
-
-  const paginatedData = sortedData.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
-
-
-  if (loading) return <p>Loading...</p>;
-  if (error) return <p>Error: {error}</p>;
-
-  var installingCounts: number = 0;
-  var failedCounts: number = 0;
-  var doneCounts: number = 0
-  var unknownCounts: number = 0;
-  data.forEach((item) => {
-    if (item.status === "installing") {
-      installingCounts += 1;
-    } else if (item.status === "failed") {
-      failedCounts += 1;
-    }
-    else if (item.status === "done") {
-      doneCounts += 1;
-    }
-    else {
-      unknownCounts += 1;
-    }
-  });
-
   return (
     <div className="p-6 mt-20">
       <h1 className="text-2xl font-bold mb-4 text-center">Created LXCs</h1>
-      <div className="mb-4 flex space-x-4">
-        <div>
-          <input
-            type="text"
-            placeholder="Search..."
-            value={searchQuery}
-            onChange={e => setSearchQuery(e.target.value)}
-            className="p-2 border"
-          />
-          <label className="text-sm text-gray-600 mt-1 block">Search by keyword</label>
-        </div>
-        <div>
-          <DatePicker
-            selected={startDate}
-            onChange={date => setStartDate(date)}
-            selectsStart
-            startDate={startDate}
-            endDate={endDate}
-            placeholderText="Start date"
-            className="p-2 border"
-          />
-          <label className="text-sm text-gray-600 mt-1 block">Set a start date</label>
-        </div>
-
-        <div>
-          <DatePicker
-            selected={endDate}
-            onChange={date => setEndDate(date)}
-            selectsEnd
-            startDate={startDate}
-            endDate={endDate}
-            placeholderText="End date"
-            className="p-2 border"
-          />
-          <label className="text-sm text-gray-600 mt-1 block">Set a end date</label>
-        </div>
-      </div>
-      <ApplicationChart data={filteredData} />
+      <ApplicationChart data={summary} />
+      <p className="text-lg font-bold mt-4"> </p>
       <div className="mb-4 flex justify-between items-center">
-        <p className="text-lg font-bold">{filteredData.length} results found</p>
-        <p className="text-lg font">Status Legend: 🔄 installing {installingCounts} | ✔️ completetd {doneCounts} | ❌ failed {failedCounts} | ❓ unknown {unknownCounts}</p>
-        <select value={itemsPerPage} onChange={handleItemsPerPageChange} className="p-2 border">
-          <option value={25}>25</option>
-          <option value={50}>50</option>
-          <option value={100}>100</option>
-          <option value={200}>200</option>
-        </select>
-      </div>
+        <p className="text-lg font-bold">{summary?.total_entries} results found</p>
+        <p className="text-lg font">Status Legend: 🔄 installing {summary?.status_count["installing"] ?? 0} | ✔️ completed {summary?.status_count["done"] ?? 0} | ❌ failed {summary?.status_count["failed"] ?? 0} | ❓ unknown</p>
+      </div>      
       <div className="overflow-x-auto">
         <div className="overflow-y-auto lg:overflow-y-visible">
           <table className="min-w-full table-auto border-collapse">
@@ -209,7 +137,7 @@ const DataFetcher: React.FC = () => {
               </tr>
             </thead>
             <tbody>
-              {paginatedData.map((item, index) => (
+              {sortedData.map((item, index) => (
                 <tr key={index}>
                   <td className="px-4 py-2 border-b">
                     {item.status === "done" ? (
@@ -237,20 +165,7 @@ const DataFetcher: React.FC = () => {
                   <td className="px-4 py-2 border-b">{item.ram_size}</td>
                   <td className="px-4 py-2 border-b">{item.method}</td>
                   <td className="px-4 py-2 border-b">{item.pve_version}</td>
-                  <td className="px-4 py-2 border-b">
-                    {item.error && item.error !== "none" ? (
-                      showErrorRow === index ? (
-                        <>
-                          {item.error}
-                          <button onClick={() => setShowErrorRow(null)}>{item.error}</button>
-                        </>
-                      ) : (
-                        <button onClick={() => setShowErrorRow(index)}>Click to show error</button>
-                      )
-                    ) : (
-                      "none"
-                    )}
-                  </td>
+                  <td className="px-4 py-2 border-b">{item.error}</td>
                   <td className="px-4 py-2 border-b">{formatDate(item.created_at)}</td>
                 </tr>
               ))}
@@ -259,26 +174,25 @@ const DataFetcher: React.FC = () => {
         </div>
       </div>
       <div className="mt-4 flex justify-between items-center">
-        <button
-          onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
-          disabled={currentPage === 1}
-          className="p-2 border"
-        >
-          Previous
-        </button>
+        <button onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))} disabled={currentPage === 1} className="p-2 border">Previous</button>
         <span>Page {currentPage}</span>
-        <button
-          onClick={() => setCurrentPage(prev => (prev * itemsPerPage < sortedData.length ? prev + 1 : prev))}
-          disabled={currentPage * itemsPerPage >= sortedData.length}
+        <button onClick={() => setCurrentPage(prev => prev + 1)} className="p-2 border">Next</button>
+        <select
+          value={itemsPerPage}
+          onChange={(e) => setItemsPerPage(Number(e.target.value))}
           className="p-2 border"
         >
-          Next
-        </button>
+          <option value={10}>10</option>
+          <option value={20}>20</option>
+          <option value={50}>50</option>
+          <option value={100}>100</option>
+          <option value={250}>250</option>
+          <option value={500}>500</option>
+          <option value={5000}>5000</option>
+        </select>
       </div>
     </div>
   );
 };
 
-
-
 export default DataFetcher;

frontend/src/app/page.tsx

@@ -116,19 +116,15 @@ export default function Page() {
 								Make managing your Homelab a breeze
 							</h1>
 							<div className="max-w-2xl gap-2 flex flex-col text-center sm:text-lg text-sm leading-relaxed tracking-tight text-muted-foreground md:text-xl">
-                <p>
-              This project aims to take the community-made Proxmox Helper Scripts, originally started by tteck, and port it to arm64.
-              <br />
-              <br />
-              Originally created by{" "}
-              <a href="https://github.com/tteck" target="_blank">
-                tteck
-              </a>
-              , these scripts automate and streamline
-              <br />
-              the process of creating and configuring Linux containers (LXC) and
-              virtual machines (VMs) on Proxmox VE.
-            </p>
+								<p>
+									We are a community-driven initiative that simplifies the setup
+									of Proxmox Virtual Environment (VE).
+								</p>
+								<p>
+									With 300+ scripts to help you manage your{" "}
+									<b>Proxmox VE environment</b>. Whether you&#39;re a seasoned
+									user or a newcomer, we&#39;ve got you covered.
+								</p>
 							</div>
 						</div>
 						<div className="flex flex-row gap-3">

frontend/src/app/scripts/_components/ScriptItem.tsx

@@ -28,6 +28,10 @@ function ScriptItem({
     setSelectedScript(null);
   };
 
+  const defaultInstallMethod = item.install_methods?.[0];
+  const os = defaultInstallMethod?.resources?.os || "Proxmox Node";
+  const version = defaultInstallMethod?.resources?.version || "";
+
   return (
     <div className="mr-7 mt-0 flex w-full min-w-fit">
       <div className="flex w-full min-w-fit">
@@ -60,6 +64,9 @@ function ScriptItem({
                       <p className="w-full text-sm text-muted-foreground">
                         Date added: {extractDate(item.date_created)}
                       </p>
+                      <p className="text-sm text-muted-foreground">
+                        Default OS: {os} {version}
+                      </p>
                     </div>
                     <div className="flex gap-5">
                       <DefaultSettings item={item} />

frontend/src/app/scripts/_components/ScriptItems/Buttons.tsx

@@ -1,14 +1,23 @@
 import { Button } from "@/components/ui/button";
 import { basePath } from "@/config/siteConfig";
 import { Script } from "@/lib/types";
-import { BookOpenText, Code, Globe } from "lucide-react";
+import { BookOpenText, Code, Globe, RefreshCcw } from "lucide-react";
 import Link from "next/link";
 
+const generateInstallSourceUrl = (slug: string) => {
+  const baseUrl = `https://raw.githubusercontent.com/asykynexo/${basePath}/main`;
+  return `${baseUrl}/install/${slug}-install.sh`;
+};
+
 const generateSourceUrl = (slug: string, type: string) => {
   const baseUrl = `https://raw.githubusercontent.com/asylumexp/${basePath}/main`;
-  return type === "ct"
-    ? `${baseUrl}/install/${slug}-install.sh`
-    : `${baseUrl}/${type}/${slug}.sh`;
+  return type === "vm" ? `${baseUrl}/vm/${slug}.sh` : `${baseUrl}/misc/${slug}.sh`;
+  return `${baseUrl}/misc/${slug}.sh`;
+};
+
+const generateUpdateUrl = (slug: string) => {
+  const baseUrl = `https://raw.githubusercontent.com/asylumexp/${basePath}/main`;
+  return `${baseUrl}/ct/${slug}.sh`;
 };
 
 interface ButtonLinkProps {
@@ -29,20 +38,35 @@ const ButtonLink = ({ href, icon, text }: ButtonLinkProps) => (
 );
 
 export default function Buttons({ item }: { item: Script }) {
+  const isCtOrDefault = ["ct"].includes(item.type);
+  const installSourceUrl = isCtOrDefault ? generateInstallSourceUrl(item.slug) : null;
+  const updateSourceUrl = isCtOrDefault ? generateUpdateUrl(item.slug) : null;
+  const sourceUrl = !isCtOrDefault ? generateSourceUrl(item.slug, item.type) : null;
+
   const buttons = [
     item.website && {
       href: item.website,
-      icon: <Globe className="h-4 w-4" />,
+      icon: <Globe className="h-4 w-4" />, 
       text: "Website",
     },
     item.documentation && {
       href: item.documentation,
-      icon: <BookOpenText className="h-4 w-4" />,
+      icon: <BookOpenText className="h-4 w-4" />, 
       text: "Documentation",
     },
-    {
-      href: generateSourceUrl(item.slug, item.type),
-      icon: <Code className="h-4 w-4" />,
+    installSourceUrl && {
+      href: installSourceUrl,
+      icon: <Code className="h-4 w-4" />, 
+      text: "Install-Source",
+    },
+    updateSourceUrl && {
+      href: updateSourceUrl,
+      icon: <RefreshCcw className="h-4 w-4" />, 
+      text: "Update-Source",
+    },
+    sourceUrl && {
+      href: sourceUrl,
+      icon: <Code className="h-4 w-4" />, 
       text: "Source Code",
     },
   ].filter(Boolean) as ButtonLinkProps[];

frontend/src/components/ApplicationChart.tsx

@@ -25,12 +25,16 @@ import { Chart as ChartJS, ArcElement, Tooltip as ChartTooltip, Legend } from "c
 import ChartDataLabels from "chartjs-plugin-datalabels";
 import { BarChart3, PieChart } from "lucide-react";
 import React, { useState } from "react";
-import { Pie } from "react-chartjs-2";
+import { Pie, Bar } from "react-chartjs-2";
 
 ChartJS.register(ArcElement, ChartTooltip, Legend, ChartDataLabels);
 
+interface SummaryData {
+  nsapp_count: Record<string, number>;
+}
+
 interface ApplicationChartProps {
-  data: { nsapp: string }[];
+  data: SummaryData | null;
 }
 
 const ITEMS_PER_PAGE = 20;
@@ -57,13 +61,9 @@ export default function ApplicationChart({ data }: ApplicationChartProps) {
   const [chartStartIndex, setChartStartIndex] = useState(0);
   const [tableLimit, setTableLimit] = useState(ITEMS_PER_PAGE);
 
-  // Calculate application counts
-  const appCounts = data.reduce((acc, item) => {
-    acc[item.nsapp] = (acc[item.nsapp] || 0) + 1;
-    return acc;
-  }, {} as Record<string, number>);
+  if (!data) return null;
 
-  const sortedApps = Object.entries(appCounts)
+  const sortedApps = Object.entries(data.nsapp_count)
     .sort(([, a], [, b]) => b - a);
 
   const chartApps = sortedApps.slice(

frontend/src/components/ui/code-copy-button.tsx

@@ -37,10 +37,6 @@ export default function CodeCopyButton({
         );
       }, 500);
     }
-
-    // toast.success(`copied ${type} to clipboard`, {
-    //   icon: <ClipboardCheck className="h-4 w-4" />,
-    // });
   };
 
   return (
@@ -49,17 +45,17 @@ export default function CodeCopyButton({
         <div className="overflow-x-auto whitespace-pre-wrap text-nowrap break-all pr-4 text-sm">
           {!isMobile && children ? children : "Copy install command"}
         </div>
-        <div
-          className={cn(" right-0 cursor-pointer bg-muted px-3 py-4")}
+        <button
           onClick={() => handleCopy("install command", children)}
+          className={cn("bg-muted px-3 py-4")}
+          title="Copy"
         >
           {hasCopied ? (
             <CheckIcon className="h-4 w-4" />
           ) : (
             <ClipboardIcon className="h-4 w-4" />
           )}
-          <span className="sr-only">Copy</span>
-        </div>
+        </button>
       </Card>
     </div>
   );