svrjs-nextjs-website/app/(auth)/admin/vulnerabilities/page.tsx

"use client";

import React, { useEffect, useState } from "react";
import { useForm, SubmitHandler, useFieldArray } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from "@/components/ui/form";
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow
} from "@/components/ui/table";
import { Input } from "@/components/ui/input";
import { z } from "zod";
import { useToast } from "@/components/ui/use-toast";
import { vulnerabilitiesSchema } from "@/lib/validations/validation";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger
} from "@/components/ui/select";

interface VulnerabiltyEntry {
  _id: string;
  version: string;
  bullets: {
    point: string;
    securityAdvisoryUrl: string;
  }[];
}

type VulnerabiltiesForm = z.infer<typeof vulnerabilitiesSchema>;

const AdminLogPage = () => {
  const [logs, setLogs] = useState<VulnerabiltyEntry[]>([]);
  const [error, setError] = useState("");
  const { toast } = useToast();
  const [loading, setLoading] = useState(false);

  const form = useForm<VulnerabiltiesForm>({
    resolver: zodResolver(vulnerabilitiesSchema),
    defaultValues: {
      version: "",
      bullets: [{ point: "", securityAdvisoryUrl: "" }]
    }
  });

  const { fields, append, remove } = useFieldArray({
    control: form.control,
    name: "bullets"
  });

  const fetchLogs = async () => {
    try {
      const response = await fetch("/api/vulnerabilities", { method: "GET" });
      if (response.ok) {
        const data: VulnerabiltyEntry[] = await response.json();
        setLogs(data);
      } else {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
    } catch (error: any) {
      setError(error.message || "Failed to fetch logs");
    }
  };

  const onSubmit: SubmitHandler<VulnerabiltiesForm> = async (data) => {
    setLoading(true);
    const response = await fetch("/api/uploadvulnerabilities", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data)
    });

    if (response.ok) {
      form.reset();
      fetchLogs();
      setLoading(false);
      toast({ description: "Logs successfully added" });
    } else {
      setLoading(false);
      toast({ description: "Upload Failed", variant: "destructive" });
    }
  };

  const deleteLog = async (id: string) => {
    try {
      const response = await fetch(`/api/delete/vulnerability/${id}`, {
        method: "DELETE"
      });
      if (response.ok) {
        fetchLogs();
      } else {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
    } catch (error: any) {
      setError(error.message || "Failed to delete log");
    }
  };

  useEffect(() => {
    fetchLogs();
    const interval = setInterval(() => {
      fetchLogs();
    }, 10000);

    return () => clearInterval(interval);
  }, []);

  return (
    <section id="logs-page" className="wrapper container">
      <h1 className="text-3xl font-bold py-6">Server Vulnerabilties Form</h1>
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
          <FormField
            control={form.control}
            name="version"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Version Name</FormLabel>
                <FormControl>
                  <Input {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          {fields.map((field, index) => (
            <>
              <FormField
                key={field.id}
                control={form.control}
                name={`bullets.${index}.point`}
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Key Point {index + 1}</FormLabel>
                    <FormControl>
                      <Input {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                key={field.id + "-securityAdvisory"}
                control={form.control}
                name={`bullets.${index}.securityAdvisoryUrl`}
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>
                      Security Advisory URL for Key Point {index + 1}
                    </FormLabel>
                    <FormControl>
                      <Input {...field} />
                    </FormControl>
                    <FormMessage />
                    <Button
                      type="button"
                      className="mt-2"
                      variant={"secondary"}
                      onClick={() => remove(index)}
                    >
                      Remove
                    </Button>
                  </FormItem>
                )}
              />
            </>
          ))}
          <Button
            type="button"
            className="mb-4"
            size={"icon"}
            variant={"outline"}
            onClick={() => append({ point: "", securityAdvisoryUrl: "" })}
          >
            +
          </Button>
          <Button
            type="submit"
            className="w-full text-lg rounded-full"
            disabled={loading}
            size={"lg"}
          >
            Submit
          </Button>
        </form>
      </Form>

      {/* Section to list and delete logs */}
      <section id="logs-list" className="py-16 md:py-24">
        <h2 className="text-3xl md:text-4xl font-bold">
          Existing Vulnerabilties
        </h2>
        {error && <p className="text-red-500">{error}</p>}
        <Table className="w-full mt-4 border-muted">
          <TableHeader>
            <TableRow>
              <TableHead className="border-b px-4 py-2">Version</TableHead>
              <TableHead className="border-b px-4 py-2">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {logs
              .slice()
              .reverse()
              .map((log) => (
                <TableRow key={log._id}>
                  <TableCell className="border-b px-4 py-2">
                    {log.version}
                  </TableCell>
                  <TableCell className="border-b px-4 py-2">
                    <Button
                      variant={"destructive"}
                      onClick={() => deleteLog(log._id)}
                    >
                      Delete
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
          </TableBody>
        </Table>
      </section>
    </section>
  );
};

export default AdminLogPage;