feat: user grant card

Author: lorenzocorallo

src/app/dashboard/(active)/telegram/user-details/card-user-grant.tsx

@@ -0,0 +1,34 @@
+"use client"
+import { useQuery } from "@tanstack/react-query"
+import { format } from "date-fns"
+import { Sparkle, Star } from "lucide-react"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { useTRPC } from "@/lib/trpc/client"
+import type { TgUser } from "@/lib/trpc/types"
+import { DeleteGrant } from "../grants/delete-grant"
+
+export function UserGrantCard({ user }: { user: TgUser }) {
+  const trpc = useTRPC()
+  const { data } = useQuery(trpc.tg.grants.checkUser.queryOptions({ userId: user.id }))
+
+  if (!data) return null
+  return (
+    data.grant && (
+      <Card className="w-fit min-w-120">
+        <CardHeader>
+          <CardTitle className="flex gap-2 items-center">
+            <Sparkle size={20} /> Ongoing Grant
+          </CardTitle>
+          <CardDescription>This user has an ongoing grant</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-2">
+          <p>Start: {format(data.grant.validSince, "yyyy/MM/dd HH:mm")}</p>
+          <p>End: {format(data.grant.validUntil, "yyyy/MM/dd HH:mm")}</p>
+        </CardContent>
+        <CardFooter className="gap-2">
+          <DeleteGrant userId={user.id} />
+        </CardFooter>
+      </Card>
+    )
+  )
+}

src/app/dashboard/(active)/telegram/user-details/card-user-info.tsx

@@ -18,7 +18,7 @@ export function UserInfoCard({ user, roles }: { user: NonNullable<User>; roles:
     <Card className="w-fit min-w-120">
       <CardHeader>
         <CardTitle>
-          User ID: {user.id}{" "}
+          # User ID: {user.id}{" "}
           {isSelf && (
             <Badge>
               <Star /> You

src/app/dashboard/(active)/telegram/user-details/page.tsx

@@ -12,6 +12,7 @@ import type { ApiOutput } from "@/lib/trpc/types"
 import { AuditLogCard } from "./card-audit-log"
 import { GroupAdminCard } from "./card-group-admin"
 import { MessageCard } from "./card-message"
+import { UserGrantCard } from "./card-user-grant"
 import { UserInfoCard } from "./card-user-info"
 import { NewGroupAdmin } from "./new-group-admin"
 
@@ -102,7 +103,11 @@ export default function TgUsers() {
 
       {user && (
         <>
-          <UserInfoCard user={user} roles={userData?.roles ?? []} />
+          <div className="grid grid-cols-3 items-start">
+            <UserInfoCard user={user} roles={userData?.roles ?? []} />
+            <UserGrantCard user={user} />
+          </div>
+
           <div className="pt-6 flex gap-4 items-center">
             <p>Admin in groups:</p>
             <NewGroupAdmin user={user} alreadyIn={userData?.groupAdmin.map((g) => g?.group.id ?? 0) ?? []} />