v1.4: Segurança multi-tenant, file serving via API e UX humanizada
- Validação cross-tenant no login e rotas protegidas
- File serving via /api/files/{bucket}/{path} (eliminação DNS)
- Mensagens de erro humanizadas inline (sem pop-ups)
- Middleware tenant detection via headers customizados
- Upload de logos retorna URLs via API
- README atualizado com changelog v1.4 completo
This commit is contained in:
Erik Silva
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { Fragment, useState, useEffect, useRef } from 'react';
|
||||
import { Combobox, Dialog, Transition } from '@headlessui/react';
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { Combobox, Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react';
|
||||
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import {
|
||||
@@ -84,123 +84,107 @@ export default function CommandPalette({ isOpen, setIsOpen }: CommandPaletteProp
|
||||
};
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={Fragment} afterLeave={() => setQuery('')}>
|
||||
<Dialog as="div" className="relative z-50" onClose={setIsOpen} initialFocus={inputRef}>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
<Dialog open={isOpen} onClose={setIsOpen} className="relative z-50" initialFocus={inputRef}>
|
||||
<DialogBackdrop
|
||||
transition
|
||||
className="fixed inset-0 bg-zinc-900/40 backdrop-blur-sm transition-opacity duration-300 data-[closed]:opacity-0"
|
||||
/>
|
||||
|
||||
<div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
|
||||
<DialogPanel
|
||||
transition
|
||||
className="mx-auto max-w-2xl transform overflow-hidden rounded-xl bg-white dark:bg-zinc-900 shadow-2xl transition-all duration-300 data-[closed]:opacity-0 data-[closed]:scale-95"
|
||||
>
|
||||
<div className="fixed inset-0 bg-zinc-900/40 backdrop-blur-sm transition-opacity" />
|
||||
</Transition.Child>
|
||||
<Combobox onChange={handleSelect}>
|
||||
<div className="relative">
|
||||
<MagnifyingGlassIcon
|
||||
className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-zinc-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<Combobox.Input
|
||||
ref={inputRef}
|
||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-zinc-900 dark:text-white placeholder:text-zinc-400 focus:ring-0 sm:text-sm font-medium"
|
||||
placeholder="O que você procura?"
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
displayValue={(item: any) => item?.name}
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="mx-auto max-w-2xl transform overflow-hidden rounded-xl bg-white dark:bg-zinc-900 shadow-2xl transition-all">
|
||||
<Combobox onChange={handleSelect}>
|
||||
<div className="relative">
|
||||
<MagnifyingGlassIcon
|
||||
className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-zinc-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<Combobox.Input
|
||||
ref={inputRef}
|
||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-zinc-900 dark:text-white placeholder:text-zinc-400 focus:ring-0 sm:text-sm font-medium"
|
||||
placeholder="O que você procura?"
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
displayValue={(item: any) => item?.name}
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{filteredItems.length > 0 && (
|
||||
<Combobox.Options static className="max-h-[60vh] scroll-py-2 overflow-y-auto py-2 text-sm text-zinc-800 dark:text-zinc-200">
|
||||
{Object.entries(groups).map(([category, items]) => (
|
||||
<div key={category}>
|
||||
<div className="px-4 py-2 text-[10px] font-bold text-zinc-400 uppercase tracking-wider bg-zinc-50/50 dark:bg-zinc-800/50 mt-2 first:mt-0 mb-1">
|
||||
{category}
|
||||
</div>
|
||||
{items.map((item) => (
|
||||
<Combobox.Option
|
||||
key={item.href}
|
||||
value={item}
|
||||
className={({ active }) =>
|
||||
`cursor-pointer select-none px-4 py-2.5 transition-colors ${active
|
||||
? '[background:var(--gradient)] text-white'
|
||||
: ''
|
||||
}`
|
||||
}
|
||||
>
|
||||
{({ active }) => (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`flex h-8 w-8 items-center justify-center rounded-md ${active
|
||||
? 'bg-white/20 text-white'
|
||||
: 'bg-zinc-50 dark:bg-zinc-900 text-zinc-400'
|
||||
}`}>
|
||||
<item.icon
|
||||
className="h-4 w-4"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<span className={`flex-auto truncate font-medium ${active ? 'text-white' : 'text-zinc-600 dark:text-zinc-400'}`}>
|
||||
{item.name}
|
||||
</span>
|
||||
{active && (
|
||||
<ArrowRightIcon className="h-4 w-4 text-white/70" />
|
||||
)}
|
||||
</div>
|
||||
{filteredItems.length > 0 && (
|
||||
<Combobox.Options static className="max-h-[60vh] scroll-py-2 overflow-y-auto py-2 text-sm text-zinc-800 dark:text-zinc-200">
|
||||
{Object.entries(groups).map(([category, items]) => (
|
||||
<div key={category}>
|
||||
<div className="px-4 py-2 text-[10px] font-bold text-zinc-400 uppercase tracking-wider bg-zinc-50/50 dark:bg-zinc-800/50 mt-2 first:mt-0 mb-1">
|
||||
{category}
|
||||
</div>
|
||||
{items.map((item) => (
|
||||
<Combobox.Option
|
||||
key={item.href}
|
||||
value={item}
|
||||
className={({ active }) =>
|
||||
`cursor-pointer select-none px-4 py-2.5 transition-colors ${active
|
||||
? '[background:var(--gradient)] text-white'
|
||||
: ''
|
||||
}`
|
||||
}
|
||||
>
|
||||
{({ active }) => (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`flex h-8 w-8 items-center justify-center rounded-md ${active
|
||||
? 'bg-white/20 text-white'
|
||||
: 'bg-zinc-50 dark:bg-zinc-900 text-zinc-400'
|
||||
}`}>
|
||||
<item.icon
|
||||
className="h-4 w-4"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<span className={`flex-auto truncate font-medium ${active ? 'text-white' : 'text-zinc-600 dark:text-zinc-400'}`}>
|
||||
{item.name}
|
||||
</span>
|
||||
{active && (
|
||||
<ArrowRightIcon className="h-4 w-4 text-white/70" />
|
||||
)}
|
||||
</Combobox.Option>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Combobox.Option>
|
||||
))}
|
||||
</Combobox.Options>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</Combobox.Options>
|
||||
)}
|
||||
|
||||
{query !== '' && filteredItems.length === 0 && (
|
||||
<div className="py-14 px-6 text-center text-sm sm:px-14">
|
||||
<MagnifyingGlassIcon className="mx-auto h-6 w-6 text-zinc-400" aria-hidden="true" />
|
||||
<p className="mt-4 font-semibold text-zinc-900 dark:text-white">Nenhum resultado encontrado</p>
|
||||
<p className="mt-2 text-zinc-500">Não conseguimos encontrar nada para "{query}". Tente buscar por páginas ou ações.</p>
|
||||
</div>
|
||||
)}
|
||||
{query !== '' && filteredItems.length === 0 && (
|
||||
<div className="py-14 px-6 text-center text-sm sm:px-14">
|
||||
<MagnifyingGlassIcon className="mx-auto h-6 w-6 text-zinc-400" aria-hidden="true" />
|
||||
<p className="mt-4 font-semibold text-zinc-900 dark:text-white">Nenhum resultado encontrado</p>
|
||||
<p className="mt-2 text-zinc-500">Não conseguimos encontrar nada para "{query}". Tente buscar por páginas ou ações.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between px-4 py-3 bg-zinc-50 dark:bg-zinc-900/50">
|
||||
<div className="flex gap-4 text-[10px] text-zinc-500 font-medium">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<kbd className="flex h-5 w-5 items-center justify-center rounded bg-white font-sans text-xs text-zinc-400 dark:bg-zinc-800">↵</kbd>
|
||||
Selecionar
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<kbd className="flex h-5 w-5 items-center justify-center rounded bg-white font-sans text-xs text-zinc-400 dark:bg-zinc-800">↓</kbd>
|
||||
<kbd className="flex h-5 w-5 items-center justify-center rounded bg-white font-sans text-xs text-zinc-400 dark:bg-zinc-800">↑</kbd>
|
||||
Navegar
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-[10px] text-zinc-500 font-medium">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<kbd className="flex h-5 w-auto px-1.5 items-center justify-center rounded bg-white font-sans text-xs text-zinc-400 dark:bg-zinc-800">Esc</kbd>
|
||||
Fechar
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Combobox>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
<div className="flex items-center justify-between px-4 py-3 bg-zinc-50 dark:bg-zinc-900/50">
|
||||
<div className="flex gap-4 text-[10px] text-zinc-500 font-medium">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<kbd className="flex h-5 w-5 items-center justify-center rounded bg-white font-sans text-xs text-zinc-400 dark:bg-zinc-800">↵</kbd>
|
||||
Selecionar
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<kbd className="flex h-5 w-5 items-center justify-center rounded bg-white font-sans text-xs text-zinc-400 dark:bg-zinc-800">↓</kbd>
|
||||
<kbd className="flex h-5 w-5 items-center justify-center rounded bg-white font-sans text-xs text-zinc-400 dark:bg-zinc-800">↑</kbd>
|
||||
Navegar
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-[10px] text-zinc-500 font-medium">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<kbd className="flex h-5 w-auto px-1.5 items-center justify-center rounded bg-white font-sans text-xs text-zinc-400 dark:bg-zinc-800">Esc</kbd>
|
||||
Fechar
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Combobox>
|
||||
</DialogPanel>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user