feat(agreements): implement agreement fetching and display with error handling

feat(agreement-card): create AgreementCard component for displaying user agreements
fix(devices-table): update no devices message for clarity based on parental control
fix(payments-table): update no payments message for consistency
fix(topups-table): update no topups message for consistency
feat(user): add agreement field to User interface

app/(dashboard)/agreements/page.tsx

@@ -1,11 +1,25 @@
-import React from "react";
+import { getProfile } from "@/actions/user-actions";
+import { AgreementCard } from "@/components/agreement-card";
+import { tryCatch } from "@/utils/tryCatch";
 
-export default function Agreements() {
+export default async function Agreements() {
+	const [error, profile] = await tryCatch(getProfile())
 	return (
 		<div>
 			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
 				<h3 className="text-sarLinkOrange text-2xl">Agreements</h3>
 			</div>
+			<div className="grid grid-cols-1">
+				{error ? (
+					<div className="text-red-500">
+						An error occurred while fetching agreements: {error.message}
+					</div>
+				) : (
+					<div>
+						<AgreementCard agreement={profile.agreement ?? ""} />
+					</div>
+				)}
+			</div>
 		</div>
 	);
 }

components/agreement-card.tsx

@@ -0,0 +1,30 @@
+import { EyeIcon } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import {
+  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>
+  )
+}

components/devices-table.tsx

@@ -65,7 +65,7 @@ export async function DevicesTable({
 		<div>
 			{data?.length === 0 ? (
 				<div className="h-[calc(100svh-400px)] text-muted-foreground flex flex-col items-center justify-center my-4">
-					<h3>No devices.</h3>
+					<h3>{parentalControl ? "No active devices" : "No devices."}</h3>
 				</div>
 			) : (
 				<>

components/payments-table.tsx

@@ -52,8 +52,8 @@ export async function PaymentsTable({
 	return (
 		<div>
 			{data?.length === 0 ? (
-				<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
+				<div className="h-[calc(100svh-400px)] text-muted-foreground flex flex-col items-center justify-center my-4">
-					<h3>No Payments yet.</h3>
+					<h3>No Payments.</h3>
 				</div>
 			) : (
 				<>

components/topups-table.tsx

@@ -52,8 +52,8 @@ export async function TopupsTable({
 	return (
 		<div>
 			{data?.length === 0 ? (
-				<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
+				<div className="h-[calc(100svh-400px)] flex text-muted-foreground flex-col items-center justify-center my-4">
-					<h3>No topups yet.</h3>
+					<h3>No topups.</h3>
 				</div>
 			) : (
 				<>

components/wallet.tsx

@@ -1,7 +1,6 @@
 "use client";
 import { useAtom } from "jotai";
 import { CircleDollarSign, Loader2, Wallet2 } from "lucide-react";
-import millify from "millify";
 import { usePathname, useRouter } from "next/navigation";
 import { useState } from "react";
 import { toast } from "sonner";
@@ -40,10 +39,7 @@ export function Wallet({ walletBalance }: { walletBalance: number }) {
 		<Drawer open={isOpen} onOpenChange={setIsOpen}>
 			<DrawerTrigger asChild>
 				<Button onClick={() => setIsOpen(!isOpen)} variant="outline">
-					{millify(walletBalance, {
+					{walletBalance}{" "}
-						precision: 2,
-						lowercase: true,
-					})}{" "}
 					MVR
 					<Wallet2 />
 				</Button>

lib/types/user.ts

@@ -29,6 +29,7 @@ export interface User {
 	is_superuser: boolean;
 	date_joined: string;
 	last_login: string;
+	agreement?: string;
 }
 
 export interface UserProfile {

package.json

@@ -25,7 +25,6 @@
 		"input-otp": "^1.4.2",
 		"jotai": "2.8.0",
 		"lucide-react": "^0.523.0",
-		"millify": "^6.1.0",
 		"moment": "^2.30.1",
 		"motion": "^12.15.0",
 		"next": "15.3.3",