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>
   )