fix: ajustes dashboards tv e titulos
This commit is contained in:
Esdras Renan
parent
80abd92e78
commit
1b32638eb5
9 changed files with 609 additions and 232 deletions
|
|
@ -71,6 +71,7 @@ import {
|
|||
SearchableCombobox,
|
||||
type SearchableComboboxOption,
|
||||
} from "@/components/ui/searchable-combobox"
|
||||
import { useSidebar } from "@/components/ui/sidebar"
|
||||
import { toast } from "sonner"
|
||||
import { z } from "zod"
|
||||
import { useForm } from "react-hook-form"
|
||||
|
|
@ -530,6 +531,7 @@ export function DashboardBuilder({ dashboardId, editable = true, mode = "edit" }
|
|||
const tvQuery = searchParams?.get("tv")
|
||||
const enforceTv = tvQuery === "1" || mode === "tv"
|
||||
const { session, convexUserId, isStaff } = useAuth()
|
||||
const { open, setOpen, openMobile, setOpenMobile, isMobile } = useSidebar()
|
||||
const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID
|
||||
const viewerId = convexUserId as Id<"users"> | null
|
||||
const canEdit = editable && Boolean(viewerId) && isStaff
|
||||
|
|
@ -561,6 +563,11 @@ export function DashboardBuilder({ dashboardId, editable = true, mode = "edit" }
|
|||
const [dataTarget, setDataTarget] = useState<DashboardWidgetRecord | null>(null)
|
||||
const [isAddingWidget, setIsAddingWidget] = useState(false)
|
||||
const [isExporting, setIsExporting] = useState(false)
|
||||
const [isFullscreen, setIsFullscreen] = useState(false)
|
||||
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
|
||||
const [isDeletingDashboard, setIsDeletingDashboard] = useState(false)
|
||||
const fullscreenContainerRef = useRef<HTMLDivElement | null>(null)
|
||||
const previousSidebarStateRef = useRef<{ open: boolean; openMobile: boolean } | null>(null)
|
||||
|
||||
const updateLayoutMutation = useMutation(api.dashboards.updateLayout)
|
||||
const updateFiltersMutation = useMutation(api.dashboards.updateFilters)
|
||||
|
|
@ -569,6 +576,7 @@ export function DashboardBuilder({ dashboardId, editable = true, mode = "edit" }
|
|||
const duplicateWidgetMutation = useMutation(api.dashboards.duplicateWidget)
|
||||
const removeWidgetMutation = useMutation(api.dashboards.removeWidget)
|
||||
const updateMetadataMutation = useMutation(api.dashboards.updateMetadata)
|
||||
const archiveDashboardMutation = useMutation(api.dashboards.archive)
|
||||
|
||||
useEffect(() => {
|
||||
if (!detail) return
|
||||
|
|
@ -588,10 +596,78 @@ export function DashboardBuilder({ dashboardId, editable = true, mode = "edit" }
|
|||
filtersHydratingRef.current = false
|
||||
}, [detail, filters])
|
||||
|
||||
const sections = useMemo(() => {
|
||||
if (dashboard?.sections && dashboard.sections.length > 0) {
|
||||
return dashboard.sections
|
||||
}
|
||||
if (!widgets.length) return []
|
||||
const chunkSize = 4
|
||||
const autoSections: DashboardSection[] = []
|
||||
widgets.forEach((widget, index) => {
|
||||
const bucket = Math.floor(index / chunkSize)
|
||||
if (!autoSections[bucket]) {
|
||||
autoSections[bucket] = {
|
||||
id: `auto-${bucket}`,
|
||||
title: `Slide ${bucket + 1}`,
|
||||
description: null,
|
||||
widgetKeys: [],
|
||||
durationSeconds: undefined,
|
||||
}
|
||||
}
|
||||
autoSections[bucket]?.widgetKeys.push(widget.widgetKey)
|
||||
})
|
||||
return autoSections
|
||||
}, [dashboard?.sections, widgets])
|
||||
|
||||
useEffect(() => {
|
||||
layoutRef.current = layoutState
|
||||
}, [layoutState])
|
||||
|
||||
useEffect(() => {
|
||||
if (sections.length === 0) {
|
||||
setActiveSectionIndex(0)
|
||||
} else {
|
||||
setActiveSectionIndex((index) => Math.min(index, sections.length - 1))
|
||||
}
|
||||
}, [sections.length])
|
||||
|
||||
useEffect(() => {
|
||||
const handleFullscreenChange = () => {
|
||||
const currentlyFullscreen = Boolean(document.fullscreenElement)
|
||||
setIsFullscreen(currentlyFullscreen)
|
||||
if (!currentlyFullscreen && previousSidebarStateRef.current) {
|
||||
const previous = previousSidebarStateRef.current
|
||||
setOpen(previous.open)
|
||||
setOpenMobile(previous.openMobile)
|
||||
previousSidebarStateRef.current = null
|
||||
}
|
||||
}
|
||||
document.addEventListener("fullscreenchange", handleFullscreenChange)
|
||||
return () => document.removeEventListener("fullscreenchange", handleFullscreenChange)
|
||||
}, [setOpen, setOpenMobile])
|
||||
|
||||
const handleToggleFullscreen = useCallback(async () => {
|
||||
if (typeof document === "undefined") return
|
||||
try {
|
||||
if (!document.fullscreenElement) {
|
||||
previousSidebarStateRef.current = { open, openMobile }
|
||||
if (isMobile) {
|
||||
setOpenMobile(false)
|
||||
} else {
|
||||
setOpen(false)
|
||||
}
|
||||
const target = fullscreenContainerRef.current ?? document.documentElement
|
||||
if (target && target.requestFullscreen) {
|
||||
await target.requestFullscreen()
|
||||
}
|
||||
} else if (document.exitFullscreen) {
|
||||
await document.exitFullscreen()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("[dashboards] Failed to toggle fullscreen", error)
|
||||
}
|
||||
}, [isMobile, open, openMobile, setOpen, setOpenMobile])
|
||||
|
||||
const packedLayout = useMemo(() => packLayout(layoutState, GRID_COLUMNS), [layoutState])
|
||||
|
||||
const metricOptions = useMemo(() => getMetricOptionsForRole(userRole), [userRole])
|
||||
|
|
@ -602,8 +678,6 @@ export function DashboardBuilder({ dashboardId, editable = true, mode = "edit" }
|
|||
return map
|
||||
}, [widgets])
|
||||
|
||||
const sections = useMemo(() => dashboard?.sections ?? [], [dashboard?.sections])
|
||||
|
||||
useEffect(() => {
|
||||
if (!enforceTv || sections.length <= 1) return
|
||||
const intervalSeconds = dashboard?.tvIntervalSeconds && dashboard.tvIntervalSeconds > 0 ? dashboard.tvIntervalSeconds : 30
|
||||
|
|
@ -916,35 +990,55 @@ export function DashboardBuilder({ dashboardId, editable = true, mode = "edit" }
|
|||
}
|
||||
}
|
||||
|
||||
const handleDeleteDashboard = async () => {
|
||||
if (!dashboard || !viewerId) return
|
||||
setIsDeletingDashboard(true)
|
||||
try {
|
||||
await archiveDashboardMutation({
|
||||
tenantId,
|
||||
actorId: viewerId as Id<"users">,
|
||||
dashboardId: dashboard.id,
|
||||
archived: true,
|
||||
})
|
||||
toast.success("Dashboard removido.")
|
||||
router.push("/dashboards")
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
toast.error("Não foi possível remover o dashboard.")
|
||||
} finally {
|
||||
setIsDeletingDashboard(false)
|
||||
setIsDeleteDialogOpen(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleExport = async (format: "pdf" | "png") => {
|
||||
if (!dashboard) return
|
||||
setIsExporting(true)
|
||||
try {
|
||||
const response = await fetch("/api/export/pdf", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
url: `${window.location.origin}/dashboards/${dashboard.id}/print`,
|
||||
format,
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
waitForSelector: dashboard.readySelector ?? "[data-dashboard-ready='true']",
|
||||
}),
|
||||
})
|
||||
const response = await fetch(`/api/dashboards/${dashboard.id}/export/${format}`)
|
||||
if (!response.ok) {
|
||||
let msg = "Export request failed"
|
||||
try {
|
||||
const data = await response.json()
|
||||
if (data?.hint) msg = `${msg}: ${data.hint}`
|
||||
else if (data?.error) msg = `${msg}: ${data.error}`
|
||||
} catch {}
|
||||
throw new Error(msg)
|
||||
let message = `Export request failed (${response.status})`
|
||||
if (response.headers.get("content-type")?.includes("application/json")) {
|
||||
try {
|
||||
const data = await response.json()
|
||||
if (data?.hint) message = data.hint
|
||||
else if (data?.error) message = data.error
|
||||
} catch {
|
||||
// ignore parse errors
|
||||
}
|
||||
}
|
||||
throw new Error(message)
|
||||
}
|
||||
const blob = await response.blob()
|
||||
const url = URL.createObjectURL(blob)
|
||||
const link = document.createElement("a")
|
||||
link.href = url
|
||||
link.download = `${dashboard.name ?? "dashboard"}.${format === "pdf" ? "pdf" : "png"}`
|
||||
const disposition = response.headers.get("content-disposition")
|
||||
const fallbackName = `${dashboard.name ?? "dashboard"}.${format === "pdf" ? "pdf" : "png"}`
|
||||
const parsedName = disposition?.match(/filename\*=UTF-8''([^;]+)|filename="?([^";]+)"?/)
|
||||
const decoded =
|
||||
parsedName?.[1] ? decodeURIComponent(parsedName[1]) : parsedName?.[2] ?? fallbackName
|
||||
link.download = decoded || fallbackName
|
||||
link.click()
|
||||
URL.revokeObjectURL(url)
|
||||
toast.success("Exportação gerada com sucesso!")
|
||||
|
|
@ -993,29 +1087,57 @@ export function DashboardBuilder({ dashboardId, editable = true, mode = "edit" }
|
|||
const visibleCount = canvasItems.length
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<BuilderHeader
|
||||
dashboard={dashboard}
|
||||
canEdit={canEdit}
|
||||
onAddWidget={handleAddWidget}
|
||||
onExport={handleExport}
|
||||
isAddingWidget={isAddingWidget}
|
||||
isExporting={isExporting}
|
||||
onMetadataChange={handleUpdateMetadata}
|
||||
enforceTv={enforceTv}
|
||||
activeSectionIndex={activeSectionIndex}
|
||||
totalSections={sections.length}
|
||||
onToggleTvMode={handleToggleTvMode}
|
||||
totalWidgets={widgets.length}
|
||||
/>
|
||||
<div
|
||||
ref={fullscreenContainerRef}
|
||||
className={cn(
|
||||
"flex flex-1 flex-col gap-6",
|
||||
isFullscreen &&
|
||||
"min-h-screen bg-gradient-to-br from-background via-background to-primary/5 pb-10 pt-16",
|
||||
isFullscreen && (enforceTv ? "px-0" : "px-4 md:px-8 lg:px-12"),
|
||||
)}
|
||||
>
|
||||
{isFullscreen ? (
|
||||
<div className="pointer-events-none fixed right-6 top-6 z-50 flex flex-col gap-3">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
className="pointer-events-auto gap-2 rounded-full border border-slate-200 bg-white/90 px-4 py-2 text-sm font-semibold text-slate-900 shadow-lg transition hover:bg-white"
|
||||
onClick={handleToggleFullscreen}
|
||||
>
|
||||
<Minimize2 className="size-4" />
|
||||
Sair da tela cheia
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<DashboardFilterBar filters={filters} onChange={handleFiltersChange} />
|
||||
{!isFullscreen ? (
|
||||
<BuilderHeader
|
||||
dashboard={dashboard}
|
||||
canEdit={canEdit}
|
||||
onAddWidget={handleAddWidget}
|
||||
onExport={handleExport}
|
||||
isAddingWidget={isAddingWidget}
|
||||
isExporting={isExporting}
|
||||
onMetadataChange={handleUpdateMetadata}
|
||||
enforceTv={enforceTv}
|
||||
activeSectionIndex={activeSectionIndex}
|
||||
totalSections={sections.length}
|
||||
onToggleTvMode={handleToggleTvMode}
|
||||
totalWidgets={widgets.length}
|
||||
onDeleteRequest={() => setIsDeleteDialogOpen(true)}
|
||||
isFullscreen={isFullscreen}
|
||||
onToggleFullscreen={handleToggleFullscreen}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{!isFullscreen ? <DashboardFilterBar filters={filters} onChange={handleFiltersChange} /> : null}
|
||||
|
||||
{enforceTv && sections.length > 0 ? (
|
||||
<TvSectionIndicator
|
||||
sections={sections}
|
||||
activeIndex={activeSectionIndex}
|
||||
onChange={setActiveSectionIndex}
|
||||
fullscreen={isFullscreen}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
|
|
@ -1043,16 +1165,20 @@ export function DashboardBuilder({ dashboardId, editable = true, mode = "edit" }
|
|||
</Card>
|
||||
) : null}
|
||||
|
||||
<ReportCanvas
|
||||
items={canvasItems}
|
||||
editable={canEdit && !enforceTv && mode !== "print"}
|
||||
columns={GRID_COLUMNS}
|
||||
rowHeight={DEFAULT_ROW_HEIGHT}
|
||||
gap={20}
|
||||
ready={allWidgetsReady}
|
||||
onResize={handleLayoutResize}
|
||||
onReorder={handleLayoutReorder}
|
||||
/>
|
||||
{enforceTv ? (
|
||||
<TvCanvas items={canvasItems} isFullscreen={isFullscreen} />
|
||||
) : (
|
||||
<ReportCanvas
|
||||
items={canvasItems}
|
||||
editable={canEdit && !enforceTv && mode !== "print"}
|
||||
columns={GRID_COLUMNS}
|
||||
rowHeight={DEFAULT_ROW_HEIGHT}
|
||||
gap={20}
|
||||
ready={allWidgetsReady}
|
||||
onResize={handleLayoutResize}
|
||||
onReorder={handleLayoutReorder}
|
||||
/>
|
||||
)}
|
||||
|
||||
{canEdit && !enforceTv ? (
|
||||
<button
|
||||
|
|
@ -1084,6 +1210,37 @@ export function DashboardBuilder({ dashboardId, editable = true, mode = "edit" }
|
|||
widget={dataTarget}
|
||||
filters={filters}
|
||||
/>
|
||||
<Dialog
|
||||
open={isDeleteDialogOpen}
|
||||
onOpenChange={(open) => {
|
||||
if (!open && !isDeletingDashboard) {
|
||||
setIsDeleteDialogOpen(false)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Excluir dashboard</DialogTitle>
|
||||
<DialogDescription>
|
||||
Essa ação remove o dashboard definitivamente para toda a equipe. Deseja continuar?
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter className="sm:justify-between">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
if (!isDeletingDashboard) setIsDeleteDialogOpen(false)
|
||||
}}
|
||||
disabled={isDeletingDashboard}
|
||||
>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={handleDeleteDashboard} disabled={isDeletingDashboard}>
|
||||
{isDeletingDashboard ? "Removendo..." : "Excluir dashboard"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1101,6 +1258,9 @@ function BuilderHeader({
|
|||
totalSections,
|
||||
onToggleTvMode,
|
||||
totalWidgets,
|
||||
onDeleteRequest,
|
||||
isFullscreen = false,
|
||||
onToggleFullscreen,
|
||||
}: {
|
||||
dashboard: DashboardRecord
|
||||
canEdit: boolean
|
||||
|
|
@ -1114,6 +1274,9 @@ function BuilderHeader({
|
|||
totalSections: number
|
||||
onToggleTvMode: () => void
|
||||
totalWidgets: number
|
||||
onDeleteRequest?: () => void
|
||||
isFullscreen?: boolean
|
||||
onToggleFullscreen: () => void
|
||||
}) {
|
||||
const [name, setName] = useState(dashboard.name)
|
||||
const [description, setDescription] = useState(dashboard.description ?? "")
|
||||
|
|
@ -1121,7 +1284,6 @@ function BuilderHeader({
|
|||
const [draftName, setDraftName] = useState(dashboard.name)
|
||||
const [draftDescription, setDraftDescription] = useState(dashboard.description ?? "")
|
||||
const [isSavingHeader, setIsSavingHeader] = useState(false)
|
||||
const [isFullscreen, setIsFullscreen] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
setName(dashboard.name)
|
||||
|
|
@ -1132,34 +1294,11 @@ function BuilderHeader({
|
|||
}
|
||||
}, [dashboard.name, dashboard.description, isEditingHeader])
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof document === "undefined") return
|
||||
const handleFullscreenChange = () => {
|
||||
setIsFullscreen(Boolean(document.fullscreenElement))
|
||||
}
|
||||
document.addEventListener("fullscreenchange", handleFullscreenChange)
|
||||
handleFullscreenChange()
|
||||
return () => {
|
||||
document.removeEventListener("fullscreenchange", handleFullscreenChange)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const toggleFullscreen = useCallback(() => {
|
||||
if (typeof document === "undefined") return
|
||||
if (document.fullscreenElement) {
|
||||
const exit = document.exitFullscreen
|
||||
if (typeof exit === "function") {
|
||||
exit.call(document).catch(() => undefined)
|
||||
}
|
||||
return
|
||||
}
|
||||
const element = document.documentElement
|
||||
if (element && typeof element.requestFullscreen === "function") {
|
||||
element.requestFullscreen().catch(() => undefined)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const rotationInterval = Math.max(5, dashboard.tvIntervalSeconds ?? 30)
|
||||
const themeLabel =
|
||||
typeof dashboard.theme === "string" && dashboard.theme.trim().length > 0 && dashboard.theme.toLowerCase() !== "system"
|
||||
? dashboard.theme
|
||||
: null
|
||||
|
||||
const handleStartEditHeader = () => {
|
||||
setDraftName(name)
|
||||
|
|
@ -1257,13 +1396,15 @@ function BuilderHeader({
|
|||
<span className="h-2 w-2 rounded-full bg-neutral-400" />
|
||||
Formato {dashboard.aspectRatio ?? "16:9"}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="inline-flex items-center gap-2 rounded-full border-slate-200 bg-white px-4 py-1.5 text-xs font-semibold text-neutral-700 shadow-sm"
|
||||
>
|
||||
<span className="h-2 w-2 rounded-full bg-neutral-400" />
|
||||
Tema {dashboard.theme ?? "system"}
|
||||
</Badge>
|
||||
{themeLabel ? (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="inline-flex items-center gap-2 rounded-full border-slate-200 bg-white px-4 py-1.5 text-xs font-semibold text-neutral-700 shadow-sm"
|
||||
>
|
||||
<span className="h-2 w-2 rounded-full bg-neutral-400" />
|
||||
Tema {themeLabel}
|
||||
</Badge>
|
||||
) : null}
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="inline-flex items-center gap-2 rounded-full border-slate-200 bg-white px-4 py-1.5 text-xs font-semibold text-neutral-700 shadow-sm"
|
||||
|
|
@ -1307,7 +1448,7 @@ function BuilderHeader({
|
|||
variant="outline"
|
||||
size="sm"
|
||||
className="gap-2"
|
||||
onClick={toggleFullscreen}
|
||||
onClick={onToggleFullscreen}
|
||||
>
|
||||
{isFullscreen ? <Minimize2 className="size-4" /> : <Maximize2 className="size-4" />}
|
||||
{isFullscreen ? "Sair da tela cheia" : "Tela cheia"}
|
||||
|
|
@ -1370,6 +1511,17 @@ function BuilderHeader({
|
|||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
{canEdit ? (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="gap-2 border border-rose-300 bg-white text-rose-600 transition hover:bg-rose-50 focus-visible:ring-rose-200 [&>svg]:transition [&>svg]:text-rose-600 hover:[&>svg]:text-rose-700 hover:text-rose-700"
|
||||
onClick={onDeleteRequest}
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
Excluir
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
|
@ -1522,6 +1674,54 @@ function DashboardFilterBar({
|
|||
)
|
||||
}
|
||||
|
||||
function TvCanvas({ items, isFullscreen }: { items: CanvasRenderableItem[]; isFullscreen: boolean }) {
|
||||
if (items.length === 0) {
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-4xl">
|
||||
<div className="aspect-video w-full rounded-3xl border border-dashed border-border/60 bg-muted/30 text-sm text-muted-foreground shadow-inner flex items-center justify-center">
|
||||
Nenhum widget disponível para esta seção.
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const renderItems = items.slice(0, 4)
|
||||
|
||||
const isSingle = renderItems.length === 1
|
||||
const gridClass = isSingle
|
||||
? "grid-cols-1 place-items-center"
|
||||
: renderItems.length === 2
|
||||
? "grid-cols-1 md:grid-cols-2 md:grid-rows-1"
|
||||
: "grid-cols-1 md:grid-cols-2 md:grid-rows-2"
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"mx-auto w-full px-4",
|
||||
isFullscreen ? "flex-1 py-8 md:px-8 lg:px-12" : "py-6 md:px-6 lg:px-8",
|
||||
)}
|
||||
>
|
||||
<div className="mx-auto w-full max-w-6xl lg:max-w-6xl xl:max-w-7xl">
|
||||
<div className="aspect-video w-full overflow-hidden rounded-3xl border border-border/60 bg-white shadow-2xl ring-1 ring-black/5">
|
||||
<div className={cn("grid h-full w-full gap-4 p-4 md:gap-6 md:p-6", gridClass)}>
|
||||
{renderItems.map((item) => (
|
||||
<div
|
||||
key={item.key}
|
||||
className={cn(
|
||||
"flex h-full w-full flex-col overflow-hidden rounded-2xl border border-border/40 bg-gradient-to-br from-white via-white to-slate-100 shadow-lg",
|
||||
isSingle ? "max-w-4xl justify-self-center" : "",
|
||||
)}
|
||||
>
|
||||
{item.element}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function BuilderWidgetCard({
|
||||
widget,
|
||||
filters,
|
||||
|
|
@ -1981,16 +2181,24 @@ function TvSectionIndicator({
|
|||
sections,
|
||||
activeIndex,
|
||||
onChange,
|
||||
fullscreen = false,
|
||||
}: {
|
||||
sections: DashboardSection[]
|
||||
activeIndex: number
|
||||
onChange: (index: number) => void
|
||||
fullscreen?: boolean
|
||||
}) {
|
||||
if (sections.length === 0) return null
|
||||
return (
|
||||
<div className="flex items-center justify-between rounded-xl border border-primary/30 bg-primary/5 px-4 py-2 text-sm text-primary">
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-between rounded-lg border border-sidebar-border bg-sidebar-accent px-4 py-2 text-sm font-semibold text-sidebar-accent-foreground shadow-sm",
|
||||
fullscreen &&
|
||||
"fixed left-1/2 top-6 z-40 w-[min(92vw,960px)] -translate-x-1/2 border-white/20 bg-slate-950/80 text-white shadow-xl backdrop-blur",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<MonitorPlay className="size-4" />
|
||||
<MonitorPlay className={cn("size-4", fullscreen ? "text-white" : "text-sidebar-accent-foreground/80")} />
|
||||
<span>
|
||||
Seção {activeIndex + 1} de {sections.length}: {sections[activeIndex]?.title ?? "Sem título"}
|
||||
</span>
|
||||
|
|
@ -2002,7 +2210,13 @@ function TvSectionIndicator({
|
|||
onClick={() => onChange(index)}
|
||||
className={cn(
|
||||
"h-2.5 w-2.5 rounded-full transition",
|
||||
index === activeIndex ? "bg-primary" : "bg-primary/30 hover:bg-primary/60",
|
||||
fullscreen
|
||||
? index === activeIndex
|
||||
? "bg-white"
|
||||
: "bg-white/40 hover:bg-white/70"
|
||||
: index === activeIndex
|
||||
? "bg-sidebar-accent-foreground"
|
||||
: "bg-sidebar-accent-foreground/40 hover:bg-sidebar-accent-foreground/70",
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { useRouter } from "next/navigation"
|
|||
import { useMutation, useQuery } from "convex/react"
|
||||
import { formatDistanceToNow } from "date-fns"
|
||||
import { ptBR } from "date-fns/locale"
|
||||
import { Plus, Sparkles } from "lucide-react"
|
||||
import { Plus, Sparkles, Trash2 } from "lucide-react"
|
||||
import type { Id } from "@/convex/_generated/dataModel"
|
||||
|
||||
import { api } from "@/convex/_generated/api"
|
||||
|
|
@ -21,7 +21,7 @@ import {
|
|||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card"
|
||||
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
|
|
@ -131,7 +131,10 @@ export function DashboardListView() {
|
|||
const { session, convexUserId, isStaff } = useAuth()
|
||||
const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID
|
||||
const createDashboard = useMutation(api.dashboards.create)
|
||||
const archiveDashboard = useMutation(api.dashboards.archive)
|
||||
const [isCreating, setIsCreating] = useState(false)
|
||||
const [dashboardToDelete, setDashboardToDelete] = useState<DashboardSummary | null>(null)
|
||||
const [isDeleting, setIsDeleting] = useState(false)
|
||||
|
||||
const dashboards = useQuery(
|
||||
api.dashboards.list,
|
||||
|
|
@ -163,6 +166,26 @@ export function DashboardListView() {
|
|||
}
|
||||
}
|
||||
|
||||
async function handleConfirmDelete() {
|
||||
if (!dashboardToDelete || !convexUserId) return
|
||||
setIsDeleting(true)
|
||||
try {
|
||||
await archiveDashboard({
|
||||
tenantId,
|
||||
actorId: convexUserId as Id<"users">,
|
||||
dashboardId: dashboardToDelete.id,
|
||||
archived: true,
|
||||
})
|
||||
toast.success("Dashboard removido.")
|
||||
setDashboardToDelete(null)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
toast.error("Não foi possível remover o dashboard.")
|
||||
} finally {
|
||||
setIsDeleting(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (!isStaff) {
|
||||
return (
|
||||
<Card className="border-dashed border-primary/40 bg-primary/5 text-primary">
|
||||
|
|
@ -265,22 +288,64 @@ export function DashboardListView() {
|
|||
<span className="h-2 w-2 rounded-full bg-neutral-400" />
|
||||
Formato {dashboard.aspectRatio}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="inline-flex items-center gap-2 rounded-full border-slate-200 bg-white px-3 py-1.5 text-sm font-semibold text-neutral-700">
|
||||
<span className="h-2 w-2 rounded-full bg-neutral-400" />
|
||||
Tema {dashboard.theme}
|
||||
</Badge>
|
||||
{dashboard.theme && dashboard.theme.toLowerCase() !== "system" ? (
|
||||
<Badge variant="outline" className="inline-flex items-center gap-2 rounded-full border-slate-200 bg-white px-3 py-1.5 text-sm font-semibold text-neutral-700">
|
||||
<span className="h-2 w-2 rounded-full bg-neutral-400" />
|
||||
Tema {dashboard.theme}
|
||||
</Badge>
|
||||
) : null}
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button asChild className="w-full">
|
||||
<CardFooter className="flex gap-2">
|
||||
<Button asChild className="flex-1">
|
||||
<Link href={`/dashboards/${dashboard.id}`}>Abrir dashboard</Link>
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="shrink-0 size-9 rounded-lg border border-rose-300 bg-white text-rose-600 transition hover:bg-rose-50 focus-visible:ring-rose-200 [&>svg]:transition [&>svg]:text-rose-600 hover:[&>svg]:text-rose-700"
|
||||
onClick={() => setDashboardToDelete(dashboard)}
|
||||
aria-label={`Excluir ${dashboard.name}`}
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
<Dialog
|
||||
open={Boolean(dashboardToDelete)}
|
||||
onOpenChange={(open) => {
|
||||
if (!open && !isDeleting) {
|
||||
setDashboardToDelete(null)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Excluir dashboard</DialogTitle>
|
||||
<DialogDescription>
|
||||
Essa ação remove o dashboard para toda a equipe. Confirme para continuar.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter className="sm:justify-between">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
if (!isDeleting) setDashboardToDelete(null)
|
||||
}}
|
||||
disabled={isDeleting}
|
||||
>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={handleConfirmDelete} disabled={isDeleting}>
|
||||
{isDeleting ? "Removendo..." : "Excluir dashboard"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -299,7 +299,7 @@ export function WidgetRenderer({ widget, filters, mode = "edit", onReadyChange }
|
|||
|
||||
const isLoading = metric.isLoading || (widgetType === "kpi" && Boolean(config.options?.trend) && trendMetric.isLoading)
|
||||
const isError = metric.isError
|
||||
const resolvedTitle = mode === "tv" ? title.toUpperCase() : title
|
||||
const resolvedTitle = title
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
|
|
@ -432,7 +432,9 @@ function renderKpi({
|
|||
<Card
|
||||
className={cn(
|
||||
"flex h-full flex-col rounded-2xl border bg-gradient-to-br shadow-sm transition hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-xl",
|
||||
isTv ? "border-primary/50 from-primary/10 via-primary/5 to-primary/20" : "border-slate-200 from-white via-white to-slate-100"
|
||||
isTv
|
||||
? "border-slate-400/60 from-slate-900 via-slate-800 to-slate-700 text-white"
|
||||
: "border-slate-200 from-white via-white to-slate-100 text-neutral-900"
|
||||
)}
|
||||
>
|
||||
<CardHeader className="flex-none pb-1">
|
||||
|
|
@ -443,7 +445,7 @@ function renderKpi({
|
|||
</CardHeader>
|
||||
<CardContent className="flex-1 space-y-3">
|
||||
<div className={cn("font-semibold text-4xl", isTv ? "text-6xl" : "text-4xl")}>{numberFormatter.format(value)}</div>
|
||||
<div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
|
||||
<div className={cn("flex flex-wrap items-center gap-2 text-sm text-muted-foreground", isTv ? "text-slate-200" : "")}>
|
||||
<Badge
|
||||
variant={atRisk > 0 ? "destructive" : "secondary"}
|
||||
className={cn(
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue