refactor: add topup expiry filter to the Topups component and simplify expired badge display in TopupsTable 🔨

app/(dashboard)/top-ups/page.tsx

@@ -48,6 +48,25 @@ export default async function Topups({
                 },
               ],
             },
+            {
+              label: "Topup Expiry",
+              name: "is_expired",
+              type: "radio-group",
+              options: [
+                {
+                  label: "All",
+                  value: "",
+                },
+                {
+                  label: "Expired",
+                  value: "true",
+                },
+                {
+                  label: "Not Expired",
+                  value: "false",
+                },
+              ],
+            },
             {
               label: "Topup Amount",
               name: "amount",

components/topups-table.tsx

@@ -125,7 +125,7 @@ export async function TopupsTable({
 												{topup.paid ? (
 													<Badge className="bg-green-100 dark:bg-green-700" variant="outline">{topup.status}</Badge>
 												) : topup.is_expired ? (
-													<Badge className="text-black dark:text-white bg-yellow-100 dark:bg-yellow-700">Expired</Badge>
+													<Badge>Expired</Badge>
 												) : (
 													<Badge variant="outline">{topup.status}</Badge>
 												)}