chore: add skeletons to tables and loading.tsx files for routes and run formatting ♻️

components/agreement-card.tsx

@@ -1,30 +1,33 @@
-import { EyeIcon } from "lucide-react"
-import { Button } from "@/components/ui/button"
+import { EyeIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
 import {
-  Card,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle
-} from "@/components/ui/card"
+	Card,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
 
 export function AgreementCard({ agreement }: { agreement: string }) {
-  return (
-    <Card className="w-full max-w-sm">
-      <CardHeader>
-        <CardTitle>Sarlink User Agreement</CardTitle>
-        <CardDescription>
-          User agreement for Sarlink services.
-        </CardDescription>
-      </CardHeader>
-      <CardFooter className="flex-col gap-2">
-        <a target="_blank" rel="noopener noreferrer" className="w-full hover:cursor-pointer" href={agreement}>
-          <Button type="button" className="w-full hover:cursor-pointer">
-            <EyeIcon />
-            View Agreement
-          </Button>
-        </a>
-      </CardFooter>
-    </Card>
-  )
+	return (
+		<Card className="w-full max-w-sm">
+			<CardHeader>
+				<CardTitle>Sarlink User Agreement</CardTitle>
+				<CardDescription>User agreement for Sarlink services.</CardDescription>
+			</CardHeader>
+			<CardFooter className="flex-col gap-2">
+				<a
+					target="_blank"
+					rel="noopener noreferrer"
+					className="w-full hover:cursor-pointer"
+					href={agreement}
+				>
+					<Button type="button" className="w-full hover:cursor-pointer">
+						<EyeIcon />
+						View Agreement
+					</Button>
+				</a>
+			</CardFooter>
+		</Card>
+	);
 }