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
2025-08-03 21:17:44 +00:00 · 2025-07-27 19:42:15 +05:00
parent dcf58c4349
commit 171b1d4d7c
9 changed files with 9675 additions and 9811 deletions
--- a/app/(dashboard)/agreements/page.tsx
+++ b/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>
 	);
 }
--- a/components/agreement-card.tsx
+++ b/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>
+  )
+}
--- a/components/devices-table.tsx
+++ b/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>
 			) : (
 				<>
--- a/components/payments-table.tsx
+++ b/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">
-					<h3>No Payments yet.</h3>
+				<div className="h-[calc(100svh-400px)] text-muted-foreground flex flex-col items-center justify-center my-4">
+					<h3>No Payments.</h3>
 				</div>
 			) : (
 				<>
--- a/components/topups-table.tsx
+++ b/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">
-					<h3>No topups yet.</h3>
+				<div className="h-[calc(100svh-400px)] flex text-muted-foreground flex-col items-center justify-center my-4">
+					<h3>No topups.</h3>
 				</div>
 			) : (
 				<>
--- a/components/wallet.tsx
+++ b/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, {
-						precision: 2,
-						lowercase: true,
-					})}{" "}
+					{walletBalance}{" "}
 					MVR
 					<Wallet2 />
 				</Button>
--- a/lib/types/user.ts
+++ b/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 {
--- a/package-lock.json
+++ b/package-lock.json
@ -24,7 +24,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",
@ -4704,6 +4703,7 @@
 		},
 		"node_modules/ansi-styles": {
 			"version": "4.3.0",
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"color-convert": "^2.0.1"
@ -5082,72 +5082,6 @@
 			"version": "0.0.1",
 			"license": "MIT"
 		},
-    "node_modules/cliui": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
-      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
-      "dependencies": {
-        "string-width": "^4.2.0",
-        "strip-ansi": "^6.0.1",
-        "wrap-ansi": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/cliui/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/cliui/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
-    },
-    "node_modules/cliui/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/cliui/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/cliui/node_modules/wrap-ansi": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
 		"node_modules/clsx": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@ -5188,6 +5122,7 @@
 		},
 		"node_modules/color-convert": {
 			"version": "2.0.1",
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"color-name": "~1.1.4"
@ -5198,6 +5133,7 @@
 		},
 		"node_modules/color-name": {
 			"version": "1.1.4",
+			"devOptional": true,
 			"license": "MIT"
 		},
 		"node_modules/color-string": {
@ -5769,14 +5705,6 @@
 				"benchmarks"
 			]
 		},
-    "node_modules/escalade": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
-      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
 		"node_modules/escape-string-regexp": {
 			"version": "4.0.0",
 			"dev": true,
@ -6414,14 +6342,6 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-    "node_modules/get-caller-file": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-      "engines": {
-        "node": "6.* || 8.* || >= 10.*"
-      }
-    },
 		"node_modules/get-intrinsic": {
 			"version": "1.2.6",
 			"license": "MIT",
@ -6884,13 +6804,6 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-    "node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
 		"node_modules/is-generator-function": {
 			"version": "1.0.10",
 			"dev": true,
@ -7546,17 +7459,6 @@
 				"node": ">=8.6"
 			}
 		},
-    "node_modules/millify": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/millify/-/millify-6.1.0.tgz",
-      "integrity": "sha512-H/E3J6t+DQs/F2YgfDhxUVZz/dF8JXPPKTLHL/yHCcLZLtCXJDUaqvhJXQwqOVBvbyNn4T0WjLpIHd7PAw7fBA==",
-      "dependencies": {
-        "yargs": "^17.0.1"
-      },
-      "bin": {
-        "millify": "bin/millify"
-      }
-    },
 		"node_modules/mime-db": {
 			"version": "1.52.0",
 			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@ -8701,14 +8603,6 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-    "node_modules/require-directory": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
 		"node_modules/reselect": {
 			"version": "5.1.1",
 			"resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
@ -9693,81 +9587,11 @@
 				"node": ">=0.10.0"
 			}
 		},
-    "node_modules/y18n": {
-      "version": "5.0.8",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
-      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
-      "engines": {
-        "node": ">=10"
-      }
-    },
 		"node_modules/yallist": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
 			"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
 		},
-    "node_modules/yargs": {
-      "version": "17.7.2",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
-      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
-      "dependencies": {
-        "cliui": "^8.0.1",
-        "escalade": "^3.1.1",
-        "get-caller-file": "^2.0.5",
-        "require-directory": "^2.1.1",
-        "string-width": "^4.2.3",
-        "y18n": "^5.0.5",
-        "yargs-parser": "^21.1.1"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/yargs-parser": {
-      "version": "21.1.1",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
-      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/yargs/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/yargs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
-    },
-    "node_modules/yargs/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/yargs/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
 		"node_modules/yn": {
 			"version": "3.1.1",
 			"dev": true,
--- a/package.json
+++ b/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",