Started to work the shortcodes

frontend/app/(auth)/dashboard/settings/shortcodes/page.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useState } from "react";
+import { ShortcodeTable } from "@/components/shortcodes-table";
+import type IShortcode from "@/interfaces/IShortcode";
+import { request, useApi } from "@/hooks/use-api";
+import { Loader2 } from "lucide-react";
+
+export default function ShortcodesPage() {
+	const {
+		data: shortcodes,
+		error,
+		isLoading,
+		mutate,
+		success,
+	} = useApi<IShortcode[]>("/shortcodes", undefined, true);
+
+	const handleUpdate = async (updatedShortcode: IShortcode) => {
+		const res = await request<IShortcode>(
+			`/shortcodes/${updatedShortcode.code}/update`,
+			{
+				method: "PATCH",
+				requiresAuth: true,
+				body: updatedShortcode,
+			},
+		);
+		mutate();
+		// Implement update logic here
+		console.log("Update shortcode:", updatedShortcode);
+	};
+
+	const handleDelete = async (code: string) => {
+		const res = await request<undefined>(`/shortcodes/${code}/delete`, {
+			requiresAuth: true,
+			method: "DELETE",
+		});
+		mutate();
+	};
+
+	const handleAdd = async (newShortcode: Omit<IShortcode, "id">) => {
+		const res = await request<IShortcode>(`/shortcodes/new`, {
+			body: newShortcode,
+			method: "POST",
+			requiresAuth: true,
+		});
+		console.log(res);
+		mutate();
+	};
+
+	return (
+		<div className="container mx-auto py-10">
+			<h1 className="text-2xl font-bold mb-5">Shortcodes</h1>
+			{isLoading && (
+				<Loader2 className="flex w-full min-w-0 flex-col gap-1 justify-center animate-spin" />
+			)}
+			{error && <p>{error}</p>}
+			<ShortcodeTable
+				shortcodes={shortcodes ?? []}
+				onUpdate={handleUpdate}
+				onDelete={handleDelete}
+				onAdd={handleAdd}
+			/>
+		</div>
+	);
+}