add hover card

apps/admin.saladeaula.digital/app/routes/_.$orgid.checkout/assigned.tsx

@@ -1,5 +1,5 @@
 import { Fragment } from 'react'
-import { Trash2Icon, PlusIcon } from 'lucide-react'
+import { Trash2Icon, PlusIcon, CircleQuestionMarkIcon } from 'lucide-react'
 import { useForm, useFieldArray, Controller, useWatch } from 'react-hook-form'
 import { useParams } from 'react-router'
 import { ErrorMessage } from '@hookform/error-message'
@@ -9,6 +9,11 @@ import { Form } from '@repo/ui/components/ui/form'
 import { InputGroup, InputGroupInput } from '@repo/ui/components/ui/input-group'
 import { Button } from '@repo/ui/components/ui/button'
 import { Separator } from '@repo/ui/components/ui/separator'
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger
+} from '@repo/ui/components/ui/hover-card'
 
 import {
   MAX_ITEMS,
@@ -19,6 +24,7 @@ import { ScheduledForInput } from '../_.$orgid.enrollments.add/scheduled-for'
 import { Cell } from '../_.$orgid.enrollments.add/route'
 import { CoursePicker } from '../_.$orgid.enrollments.add/course-picker'
 import { UserPicker } from '../_.$orgid.enrollments.add/user-picker'
+import { Kbd } from '@repo/ui/components/ui/kbd'
 
 const emptyRow = {
   user: undefined,
@@ -65,7 +71,30 @@ export function Assigned({ courses }: AssignedProps) {
           <>
             <Cell>Colaborador</Cell>
             <Cell>Curso</Cell>
-            <Cell>Matricular em</Cell>
+            <Cell className="flex items-center gap-1.5">
+              Matricular em
+              <HoverCard openDelay={0}>
+                <HoverCardTrigger asChild>
+                  <button type="button">
+                    <CircleQuestionMarkIcon className="size-4 text-muted-foreground" />
+                  </button>
+                </HoverCardTrigger>
+                <HoverCardContent
+                  align="end"
+                  className="text-sm space-y-1.5 lg:w-76"
+                >
+                  <p>
+                    Escolha a data em que o colaborador será matriculado no
+                    curso.
+                  </p>
+
+                  <p>
+                    Você poderá acompanhar as matrículas em{' '}
+                    <Kbd>Agendamentos</Kbd>
+                  </p>
+                </HoverCardContent>
+              </HoverCard>
+            </Cell>
             <Cell>Valor unit.</Cell>
             <Cell>{/**/}</Cell>
           </>

apps/admin.saladeaula.digital/app/routes/_.$orgid.checkout/route.tsx

@@ -19,7 +19,7 @@ import { Bulk } from './bulk'
 import type { Course } from '../_.$orgid.enrollments.add/data'
 
 export function meta({}: Route.MetaArgs) {
-  return [{ title: '' }]
+  return [{ title: 'Comprar matrículas' }]
 }
 
 export async function loader({ params, context, request }: Route.LoaderArgs) {

apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/route.tsx

@@ -8,7 +8,8 @@ import {
   CopyPlusIcon,
   Trash2Icon,
   PlusIcon,
-  EllipsisIcon
+  EllipsisIcon,
+  CircleQuestionMarkIcon
 } from 'lucide-react'
 import { redirect, Link, useParams, useFetcher } from 'react-router'
 import { Controller, useFieldArray, useForm } from 'react-hook-form'
@@ -22,6 +23,11 @@ import {
   CommandItem,
   CommandList
 } from '@repo/ui/components/ui/command'
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger
+} from '@repo/ui/components/ui/hover-card'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -48,6 +54,7 @@ import {
   PopoverContent,
   PopoverTrigger
 } from '@repo/ui/components/ui/popover'
+import { Kbd } from '@repo/ui/components/ui/kbd'
 import { Label } from '@repo/ui/components/ui/label'
 import { createSearch } from '@repo/util/meili'
 import { HttpMethod, request as req } from '@repo/util/request'
@@ -65,6 +72,7 @@ import {
 import { ScheduledForInput } from './scheduled-for'
 import { CoursePicker } from './course-picker'
 import { UserPicker } from './user-picker'
+import { cn } from '@repo/ui/lib/utils'
 
 const emptyRow = {
   user: undefined,
@@ -211,7 +219,30 @@ export default function Route({
               <>
                 <Cell>Colaborador</Cell>
                 <Cell>Curso</Cell>
-                <Cell>Matricular em</Cell>
+                <Cell className="flex items-center gap-1.5">
+                  Matricular em
+                  <HoverCard openDelay={0}>
+                    <HoverCardTrigger asChild>
+                      <button type="button">
+                        <CircleQuestionMarkIcon className="size-4 text-muted-foreground" />
+                      </button>
+                    </HoverCardTrigger>
+                    <HoverCardContent
+                      align="end"
+                      className="text-sm space-y-1.5 lg:w-76"
+                    >
+                      <p>
+                        Escolha a data em que o colaborador será matriculado no
+                        curso.
+                      </p>
+
+                      <p>
+                        Você poderá acompanhar as matrículas em{' '}
+                        <Kbd>Agendamentos</Kbd>
+                      </p>
+                    </HoverCardContent>
+                  </HoverCard>
+                </Cell>
                 <Cell>{/**/}</Cell>
               </>
 
@@ -496,9 +527,20 @@ function ActionMenu() {
   )
 }
 
-export function Cell({ children }: { children?: ReactNode }) {
+export function Cell({
+  children,
+  className
+}: {
+  children?: ReactNode
+  className?: string
+}) {
   return (
-    <div className="max-lg:hidden text-foreground font-medium text-sm">
+    <div
+      className={cn(
+        'max-lg:hidden text-foreground font-medium text-sm',
+        className
+      )}
+    >
       {children}
     </div>
   )

package-lock.json

@@ -2888,6 +2888,37 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-hover-card": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.15.tgz",
+      "integrity": "sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
@@ -7486,6 +7517,7 @@
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-dropdown-menu": "^2.1.16",
+        "@radix-ui/react-hover-card": "^1.1.15",
         "@radix-ui/react-label": "^2.1.8",
         "@radix-ui/react-navigation-menu": "^1.2.14",
         "@radix-ui/react-popover": "^1.1.15",

packages/ui/package.json

@@ -23,6 +23,7 @@
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-navigation-menu": "^1.2.14",
     "@radix-ui/react-popover": "^1.1.15",

packages/ui/src/components/ui/hover-card.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }