feat: user-list, user-details, tg grants

Author: lorenzocorallo

package.json

@@ -16,7 +16,7 @@
     "@base-ui/react": "^1.3.0",
     "@better-auth/passkey": "^1.5.5",
     "@hookform/resolvers": "^3.9.1",
-    "@polinetwork/backend": "^0.15.12",
+    "@polinetwork/backend": "^0.15.14",
     "@radix-ui/react-dialog": "^1.1.15",
     "@t3-oss/env-nextjs": "^0.13.10",
     "@tanstack/react-query": "^5.90.19",
@@ -30,6 +30,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
     "geist": "^1.3.0",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.525.0",
@@ -38,6 +39,7 @@
     "postgres": "^3.4.4",
     "radix-ui": "^1.4.3",
     "react": "^18.3.1",
+    "react-day-picker": "^9.14.0",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^6.1.0",
     "react-hook-form": "^7.55.0",

pnpm-lock.yaml

@@ -0,0 +1,80 @@
+"use client"
+
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { Trash2, Trash2Icon } from "lucide-react"
+import { useState } from "react"
+import { toast } from "sonner"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+import { Button } from "@/components/ui/button"
+import { useSession } from "@/lib/auth"
+import { useTRPC } from "@/lib/trpc/client"
+
+export function DeleteGrant({ userId }: { userId: number }) {
+  const sesh = useSession()
+
+  const qc = useQueryClient()
+  const trpc = useTRPC()
+  const removerId = sesh.data?.user.telegramId
+  const { mutateAsync } = useMutation(trpc.tg.grants.interrupt.mutationOptions())
+
+  const [open, setOpen] = useState(false)
+
+  async function interrupt() {
+    if (!removerId) return toast.error("Invalid session, try to reload the page")
+    const { error } = await mutateAsync({ userId, interruptedById: removerId })
+
+    if (error === "NOT_FOUND") toast.info("The grant was expired or already interrupted")
+    else if (error === "UNAUTHORIZED") toast.error("You don't have enought permission")
+    else if (error === "INTERNAL_SERVER_ERROR") toast.error("There was an internal server error")
+    else toast.success("Grant interrupted successfully")
+
+    handleOpenChange(false)
+  }
+
+  function handleOpenChange(v: boolean) {
+    setOpen(v)
+    if (v === false) {
+      qc.invalidateQueries(trpc.tg.grants.getOngoing.queryOptions())
+      qc.invalidateQueries(trpc.tg.grants.checkUser.queryOptions({ userId }))
+    }
+  }
+
+  return (
+    <AlertDialog open={open} onOpenChange={handleOpenChange}>
+      <AlertDialogTrigger
+        render={
+          <Button variant="destructive">
+            <Trash2 />
+            Delete
+          </Button>
+        }
+      ></AlertDialogTrigger>
+      <AlertDialogContent size="sm">
+        <AlertDialogHeader>
+          <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
+            <Trash2Icon />
+          </AlertDialogMedia>
+          <AlertDialogTitle>Interrupt Grant</AlertDialogTitle>
+          <AlertDialogDescription>Are you sure you want to interrupt the grant?</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={interrupt} variant="destructive">
+            Confirm
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}

src/app/dashboard/(active)/telegram/grants/delete-grant.tsx

@@ -0,0 +1,42 @@
+"use client"
+import { useQuery } from "@tanstack/react-query"
+import { format } from "date-fns"
+import { useTRPC } from "@/lib/trpc/client"
+import type { ApiOutput } from "@/lib/trpc/types"
+import { DeleteGrant } from "./delete-grant"
+
+type Grants = NonNullable<ApiOutput["tg"]["grants"]["getOngoing"]["grants"]>
+
+export function GrantList() {
+  const trpc = useTRPC()
+  const { data } = useQuery(trpc.tg.grants.getOngoing.queryOptions())
+
+  return (
+    <div className="flex flex-col w-full items-start justify-start py-4">
+      <div className="grid gap-4 items-center grid-cols-5 w-full border-b py-2 font-bold">
+        <p>Telegram ID</p>
+        <p>Username</p>
+        <p>Start Date</p>
+        <p>End Date</p>
+        <p>Interrupt</p>
+      </div>
+      {data?.grants?.map((r) => (
+        <GrantRow row={r} key={r.grant.id} />
+      ))}
+    </div>
+  )
+}
+
+function GrantRow({ row: r }: { row: Grants[number] }) {
+  return (
+    <div className="grid gap-4 items-center grid-cols-5 border-b py-2 w-full">
+      <p>{r.grant.userId}</p>
+      <p className={r.user?.username ? "" : "text-muted-foreground italic"}>
+        {r.user?.username ? `@${r.user.username}` : `<unset>`}
+      </p>
+      <p>{format(r.grant.validSince, "yyyy/MM/dd HH:mm")}</p>
+      <p>{format(r.grant.validUntil, "yyyy/MM/dd HH:mm")}</p>
+      <DeleteGrant userId={r.grant.userId} />
+    </div>
+  )
+}