"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 { logsSchema } from "@/lib/validations/validation"; import { z } from "zod"; import { useToast } from "@/components/ui/use-toast"; interface LogEntry { _id: string; version: string; date: string; bullets: { point: string }[]; } type LogsFormValues = z.infer; const AdminLogPage = () => { const [logs, setLogs] = useState([]); const [error, setError] = useState(""); const { toast } = useToast(); const [loading, setLoading] = useState(false); const form = useForm({ resolver: zodResolver(logsSchema), defaultValues: { version: "", date: "", bullets: [{ point: "" }], }, }); const { fields, append, remove } = useFieldArray({ control: form.control, name: "bullets", }); const fetchLogs = async () => { try { const response = await fetch("/api/logs", { method: "GET" }); if (response.ok) { const data: LogEntry[] = 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 = async (data) => { setLoading(true); const response = await fetch("/api/uploadlogs", { 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/logs/${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 (

Server Logs Form

( Version Name )} /> ( Date )} /> {fields.map((field, index) => ( ( Key Point {index + 1} )} /> ))} {/* Section to list and delete logs */}

Existing Logs

{error &&

{error}

} Version Date Actions {logs .slice() .reverse() .map((log) => ( {log.version} {log.date} ))}
); }; export default AdminLogPage;