133 lines
3.3 KiB
TypeScript
133 lines
3.3 KiB
TypeScript
import type { Route } from './+types/route'
|
|
|
|
import {
|
|
Link,
|
|
NavLink,
|
|
Outlet,
|
|
type ShouldRevalidateFunctionArgs
|
|
} from 'react-router'
|
|
|
|
import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
BreadcrumbList,
|
|
BreadcrumbPage,
|
|
BreadcrumbSeparator
|
|
} from '@repo/ui/components/ui/breadcrumb'
|
|
import { Tabs, TabsList, TabsTrigger } from '@repo/ui/components/ui/tabs'
|
|
import { initials } from '@repo/ui/lib/utils'
|
|
import { request as req } from '@repo/util/request'
|
|
import { BadgeCheckIcon } from 'lucide-react'
|
|
|
|
import type { Org } from './data'
|
|
|
|
const links = [
|
|
{ to: '', title: 'Perfil', end: true },
|
|
{ to: 'address', title: 'Endereço' },
|
|
{ to: 'subscription', title: 'Plano' }
|
|
]
|
|
|
|
export function meta() {
|
|
return [
|
|
{
|
|
title: 'Editar empresa'
|
|
}
|
|
]
|
|
}
|
|
|
|
export async function loader({ params, request, context }: Route.LoaderArgs) {
|
|
const r = await req({
|
|
url: `/orgs/${params.id}`,
|
|
request,
|
|
context
|
|
})
|
|
|
|
if (!r.ok) {
|
|
throw new Response(null, { status: r.status })
|
|
}
|
|
|
|
return { org: await r.json() } as {
|
|
org: Org
|
|
}
|
|
}
|
|
|
|
export function shouldRevalidate({
|
|
currentParams,
|
|
nextParams,
|
|
actionResult
|
|
}: ShouldRevalidateFunctionArgs) {
|
|
if (actionResult?.ok) {
|
|
return true
|
|
}
|
|
|
|
return currentParams.id !== nextParams.id
|
|
}
|
|
|
|
export default function Route({ loaderData: { org } }: Route.ComponentProps) {
|
|
return (
|
|
<div className="space-y-2.5">
|
|
<Breadcrumb>
|
|
<BreadcrumbList>
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink asChild>
|
|
<Link to="../orgs">Empresas</Link>
|
|
</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
<BreadcrumbSeparator />
|
|
<BreadcrumbItem>
|
|
<BreadcrumbPage>Editar empresa</BreadcrumbPage>
|
|
</BreadcrumbItem>
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
|
|
<div className="lg:max-w-2xl mx-auto space-y-2.5">
|
|
<div className="flex gap-2.5 items-center mb-5">
|
|
<div className="relative">
|
|
{org?.subscription ? (
|
|
<BadgeCheckIcon className="fill-blue-500 stroke-white absolute size-4 dark:size-3.5 -top-0 -right-0 z-2" />
|
|
) : null}
|
|
|
|
<Avatar className="size-12">
|
|
<AvatarFallback>{initials(org.name)}</AvatarFallback>
|
|
</Avatar>
|
|
</div>
|
|
|
|
<ul>
|
|
<li className="font-bold text-lg">{org.name}</li>
|
|
<li className="text-muted-foreground text-sm truncate max-lg:max-w-62">
|
|
{org.email}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<Tabs>
|
|
<TabsList>
|
|
{links.map(({ to, title, ...props }, idx) => (
|
|
<NavLink
|
|
to={to}
|
|
key={idx}
|
|
className="aria-[current=page]:pointer-events-none"
|
|
{...props}
|
|
>
|
|
{({ isActive }) => (
|
|
<TabsTrigger
|
|
data-state={isActive ? 'active' : ''}
|
|
value={title}
|
|
asChild
|
|
>
|
|
<span>{title}</span>
|
|
</TabsTrigger>
|
|
)}
|
|
</NavLink>
|
|
))}
|
|
</TabsList>
|
|
</Tabs>
|
|
|
|
<Outlet context={{ org }} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|