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

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>
+  )
+}