wg-dashboard/app/servers/page.tsx

import Size from "@components/size";
import { Server, wgServer, createInterface } from "@db/server";
import { revalidatePath } from "next/cache";
import { key } from "wireguard-tools.js";

function DeleterSever({id}: Server) {
  async function deleteServer() {
    "use server";
    await (await wgServer.findOne({ where: { id } })).destroy();
    revalidatePath("/servers");
  }
  return (<form action={deleteServer}>
    <input type="submit" value="Delete interface" />
  </form>)
}

function CreateSever() {
  async function deleteServer() {
    "use server";
    await createInterface();
    revalidatePath("/servers");
  }
  return (<form action={deleteServer}>
    <input type="submit" value="Create interface" />
  </form>)
}

// Make server info
function ServerShow({ serverInfo }: { serverInfo: Server }) {
  return (<div>
    <h3 id={serverInfo.id.toString()}>Interface name: {serverInfo.name}</h3>
    <hr />
    <div style={{ display: "flex", justifyContent: "space-evenly" }}>
      <DeleterSever {...serverInfo} />
      <a href={`/servers/${serverInfo.id}/edit`}>Edit interface</a>
    </div>
    <p>Private key: {serverInfo.privateKey}</p>
    <p>Public key: {key.publicKey(serverInfo.privateKey)}</p>
    {serverInfo.IPv4 && <p>IPv4: {serverInfo.IPv4}</p>}
    {serverInfo.IPv6 && <p>IPv4: "{serverInfo.IPv6}"</p>}
    <p style={{ marginLeft: "18px" }}>
      <span>Stats</span>
      <div style={{ display: "flex", justifyContent: "space-evenly" }}>
        <span>Upload: <Size fileSize={serverInfo.uploadStats}/></span>
        <span>Download: <Size fileSize={serverInfo.downloadStats}/></span>
      </div>
    </p>
  </div>);
}

// Export page
export default async function Servers() {
  const servers = (await wgServer.findAll()).map(s => s.toJSON());
  return (<div>
    <h1>Wireguard interfaces</h1>
    <CreateSever />
    <div>
      {servers.map(s => <ServerShow key={"wgInterface"+s.id.toString()} serverInfo={s}/>)}
    </div>
  </div>);
}