feat(services): add subscription badge to services data table and create service-badges utility #105 (comment)

Author: achneerov

app/(authenticated)/services/services-data-table.tsx

@@ -12,7 +12,7 @@ import {
 } from "@/components/ui/tooltip";
 import { DataTable } from "@/components/data-table";
 import { formatDate } from "@/lib/format";
-import { statusBadgeClass } from "@/lib/service-status";
+import { statusBadgeClass, subscriptionBadgeClass } from "@/lib/service-badges";
 
 import { setServiceStatus } from "@/app/(authenticated)/services/actions";
 import type { ServiceView } from "@/app/(authenticated)/services/queries";
@@ -61,6 +61,20 @@ export function ServicesDataTable({
                </span>
             ),
          },
+         {
+            accessorKey: "requiresSubscription",
+            header: "Subscription",
+            cell: ({ row }) => (
+               <span
+                  className={
+                     "inline-flex rounded-full px-2 py-0.5 text-xs capitalize " +
+                     subscriptionBadgeClass(row.original.requiresSubscription)
+                  }
+               >
+                  {row.original.requiresSubscription ? "Required" : "Not required"}
+               </span>
+            ),
+         },
          {
             id: "startDate",
             header: "Start Date",

lib/service-status.ts lib/service-badges.tslib/service-status.ts renamed to lib/service-badges.ts

@@ -12,3 +12,9 @@ export function statusBadgeClass(status: ServiceStatus) {
          return "bg-muted text-muted-foreground";
    }
 }
+
+export function subscriptionBadgeClass(requiresSubscription: boolean) {
+   return requiresSubscription
+      ? "bg-blue-700/80 text-white"
+      : "bg-secondary/80 text-secondary-foreground";
+}