add subscription to org
This commit is contained in:
@@ -1,17 +1,8 @@
|
||||
import type { Route } from './+types/route'
|
||||
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { Link } from 'react-router'
|
||||
import { useOutletContext } 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 { Button } from '@repo/ui/components/ui/button'
|
||||
import {
|
||||
Card,
|
||||
@@ -30,139 +21,78 @@ import {
|
||||
FormMessage
|
||||
} from '@repo/ui/components/ui/form'
|
||||
import { Input } from '@repo/ui/components/ui/input'
|
||||
import { initials } from '@repo/ui/lib/utils'
|
||||
import { request as req } from '@repo/util/request'
|
||||
import { BadgeCheckIcon } from 'lucide-react'
|
||||
|
||||
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: any }
|
||||
}
|
||||
|
||||
export default function Route({ loaderData: { org } }: Route.ComponentProps) {
|
||||
export default function Route({}: Route.ComponentProps) {
|
||||
const { org } = useOutletContext()
|
||||
const form = useForm({ defaultValues: org })
|
||||
const { handleSubmit } = form
|
||||
const { handleSubmit, formState } = form
|
||||
|
||||
const onSubmit = async () => {}
|
||||
|
||||
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>
|
||||
<Form {...form}>
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-8">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="font-semibold text-2xl">
|
||||
Editar empresa
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Configurar as informações gerais para esta empresa.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<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}
|
||||
<CardContent className="space-y-6">
|
||||
<FieldSet disabled={true}>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Nome</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Avatar className="size-12">
|
||||
<AvatarFallback>{initials(org.name)}</AvatarFallback>
|
||||
</Avatar>
|
||||
</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<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>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="cnpj"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>CNPJ</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</FieldSet>
|
||||
|
||||
<Form {...form}>
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-8">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="font-semibold text-2xl">
|
||||
Editar empresa
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Configurar as informações gerais para esta empresa.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<FieldSet disabled={true}>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Nome</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="cnpj"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>CNPJ</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit">Editar</Button>
|
||||
</div>
|
||||
</FieldSet>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
<Button type="submit" disabled={true}>
|
||||
Atualizar perfil
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</form>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user