cambios en los estilos

This commit is contained in:
2025-06-20 12:06:40 -04:00
parent 4f96212cd0
commit 4ef71d5900
16 changed files with 42 additions and 40 deletions

View File

@@ -26,7 +26,8 @@ export function Breadcrumbs() {
)} )}
{index < items.length - 1 && ( {index < items.length - 1 && (
<BreadcrumbSeparator className="hidden md:block"> <BreadcrumbSeparator className="hidden md:block">
<Slash /> {/* <Slash /> */}
<span>&gt;</span>
</BreadcrumbSeparator> </BreadcrumbSeparator>
)} )}
{index === items.length - 1 && ( {index === items.length - 1 && (

View File

@@ -23,13 +23,13 @@ export default function ThemeToggle() {
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => setTheme('light')}> <DropdownMenuItem onClick={() => setTheme('light')}>
Light Claro
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme('dark')}> <DropdownMenuItem onClick={() => setTheme('dark')}>
Dark Oscuro
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme('system')}> <DropdownMenuItem onClick={() => setTheme('system')}>
System Sistema
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>

View File

@@ -15,7 +15,7 @@ import { useSession } from 'next-auth/react';
export const company = { export const company = {
name: 'Sistema', name: 'Sistema para Productores',
logo: GalleryVerticalEnd, logo: GalleryVerticalEnd,
plan: 'FONDEMI', plan: 'FONDEMI',
}; };
@@ -31,12 +31,13 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
<Sidebar collapsible="icon" {...props}> <Sidebar collapsible="icon" {...props}>
<SidebarHeader> <SidebarHeader>
<div className="flex gap-2 py-2 text-sidebar-accent-foreground"> <div className="flex gap-2 py-2 text-sidebar-accent-foreground">
<div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground"> <div className="flex aspect-square size-8 items-center justify-center rounded-lg text-sidebar-primary-foreground">
<company.logo className="size-4" /> {/* <company.logo className="size-4" /> */}
<img src="/logo.png" alt="" />
</div> </div>
<div className="grid flex-1 text-left text-sm leading-tight"> <div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-semibold">{company.name}</span> <span className="truncate font-semibold">{company.name}</span>
<span className="truncate text-xs">{company.plan}</span> <span className="truncate font-semibold text-xs">{company.plan}</span>
</div> </div>
</div> </div>
</SidebarHeader> </SidebarHeader>

View File

@@ -12,7 +12,7 @@ export function LoginForm({
}: React.ComponentPropsWithoutRef<'div'>) { }: React.ComponentPropsWithoutRef<'div'>) {
return ( return (
<div className={cn("flex flex-col gap-6", className)} {...props}> <div className={cn("", className)} {...props}>
<Card className="overflow-hidden"> <Card className="overflow-hidden">
<CardContent className="grid p-0 md:grid-cols-2"> <CardContent className="grid p-0 md:grid-cols-2">
<UserAuthForm /> <UserAuthForm />
@@ -20,7 +20,7 @@ export function LoginForm({
<img <img
src="logo.png" src="logo.png"
alt="Image" alt="Image"
className="absolute inset-0 p-10 h-full w-full object-cover " className="absolute inset-0 p-10 h-full w-full"
/> />
</div> </div>
</CardContent> </CardContent>

View File

@@ -13,17 +13,17 @@ export function LoginForm({
}: React.ComponentPropsWithoutRef<'div'>) { }: React.ComponentPropsWithoutRef<'div'>) {
return ( return (
<div className={cn("flex flex-col gap-6", className)} {...props}> <div className={cn("", className)} {...props}>
<Card className="overflow-hidden"> <Card className="overflow-hidden">
<CardContent className="grid p-0"> <CardContent className="flex p-0">
<UserAuthForm /> <UserAuthForm />
{/* <div className="relative hidden bg-muted md:block"> <div className="hidden bg-muted md:block m-auto">
<img <img
src="logo.png" src="logo.png"
alt="Image" alt="Image"
className="absolute inset-0 p-10 h-full w-full object-cover " className="inset-0 p-5"
/> />
</div> */} </div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>

View File

@@ -72,7 +72,7 @@ export default function UserAuthForm() {
<form className="p-6 md:p-8" onSubmit={form.handleSubmit(onSubmit)}> <form className="p-6 md:p-8" onSubmit={form.handleSubmit(onSubmit)}>
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6">
<div className="flex flex-col items-center text-center"> <div className="flex flex-col items-center text-center">
<h1 className="text-2xl font-bold">Sistema Integral Fondemi</h1> <h1 className="text-2xl font-bold">Sistema para productores</h1>
<p className="text-balance text-muted-foreground"> <p className="text-balance text-muted-foreground">
Ingresa tus datos Ingresa tus datos
</p> </p>

View File

@@ -89,10 +89,10 @@ export default function UserAuthForm() {
<> <>
<Form {...form}> <Form {...form}>
<form className="p-6 md:p-8" onSubmit={form.handleSubmit(onSubmit)}> <form className="flex-none p-6 md:p-8" onSubmit={form.handleSubmit(onSubmit)}>
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6">
<div className="items-center text-center"> <div className="items-center text-center">
<h1 className="text-2xl font-bold">Sistema Integral Fondemi</h1> <h1 className="text-2xl font-bold">Sistema para productores</h1>
<p className="text-balance text-muted-foreground"> <p className="text-balance text-muted-foreground">
Ingresa tus datos Ingresa tus datos
</p> </p>

View File

@@ -39,7 +39,7 @@ export function AccountPlanModal({
} }
}} }}
> >
<DialogContent className="sm:max-w-[600px] z-50 backdrop-blur-lg bg-background/80"> <DialogContent className="sm:max-w-[600px] z-50 backdrop-blur-lg ">
<DialogHeader> <DialogHeader>
<DialogTitle> <DialogTitle>
{defaultValues?.id {defaultValues?.id

View File

@@ -8,7 +8,7 @@ import {
DialogTitle, DialogTitle,
} from '@repo/shadcn/dialog'; } from '@repo/shadcn/dialog';
import { AccountPlan } from '@/feactures/users/schemas/account-plan.schema'; import { AccountPlan } from '@/feactures/users/schemas/account-plan.schema';
import { ModalForm } from './update-user-form'; import { ModalForm } from './update-profile-form';
interface AccountPlanModalProps { interface AccountPlanModalProps {
open: boolean; open: boolean;
@@ -38,7 +38,7 @@ export function AccountPlanModal({
} }
}} }}
> >
<DialogContent className="sm:max-w-[600px] z-50 backdrop-blur-lg bg-background/80"> <DialogContent className="sm:max-w-[600px] z-50 backdrop-blur-lg">
<DialogHeader> <DialogHeader>
<DialogTitle>Actualizar Perfil</DialogTitle> <DialogTitle>Actualizar Perfil</DialogTitle>
<DialogDescription> <DialogDescription>

View File

@@ -73,14 +73,14 @@ export function ModalForm({
phone: defaultValues?.phone || '', phone: defaultValues?.phone || '',
role: undefined, role: undefined,
isActive: defaultValues?.isActive, isActive: defaultValues?.isActive,
state: defaultValues?.state, state: undefined,
municipality: defaultValues?.municipality, municipality: undefined,
parish: defaultValues?.parish parish: undefined
} }
// console.log(defaultValues); console.log(defaultValues);
const form = useForm<UpdateUser>({ const form = useForm<UpdateUser>({
resolver: zodResolver(updateUser), resolver: zodResolver(updateUser),

View File

@@ -22,12 +22,12 @@ export function Profile() {
<h2 className='mt-3 mb-1'>Datos del usuario</h2> <h2 className='mt-3 mb-1'>Datos del usuario</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 "> <div className="grid grid-cols-1 md:grid-cols-2 gap-6 ">
<section className='border bg-muted p-2 rounded-md'> <section className='border bg-neutral-200 dark:bg-neutral-800 p-2 rounded-md'>
<p className='font-bold text-lg'>Usuario:</p> <p className='font-bold text-lg'>Usuario:</p>
<p>{data?.data.username || 'Sin Nombre de Usuario'}</p> <p>{data?.data.username || 'Sin Nombre de Usuario'}</p>
</section> </section>
<section className='border bg-muted p-2 rounded-md'> <section className='border bg-neutral-200 dark:bg-neutral-800 p-2 rounded-md'>
<p className='font-bold text-lg'>Rol:</p> <p className='font-bold text-lg'>Rol:</p>
<p>{data?.data.role || 'Sin Rol'}</p> <p>{data?.data.role || 'Sin Rol'}</p>
</section> </section>
@@ -35,17 +35,17 @@ export function Profile() {
<h2 className='mt-3 mb-1'>Información personal</h2> <h2 className='mt-3 mb-1'>Información personal</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<section className='border bg-muted p-2 rounded-md'> <section className='border bg-neutral-200 dark:bg-neutral-800 p-2 rounded-md'>
<p className='font-bold text-lg'>Nombre completo:</p> <p className='font-bold text-lg'>Nombre completo:</p>
<p>{data?.data.fullname || 'Sin nombre y apellido'}</p> <p>{data?.data.fullname || 'Sin nombre y apellido'}</p>
</section> </section>
<section className='border bg-muted p-2 rounded-md'> <section className='border bg-neutral-200 dark:bg-neutral-800 p-2 rounded-md'>
<p className='font-bold text-lg'>Correo:</p> <p className='font-bold text-lg'>Correo:</p>
<p>{data?.data.email || 'Sin correo'}</p> <p>{data?.data.email || 'Sin correo'}</p>
</section> </section>
<section className='border bg-muted p-2 rounded-md'> <section className='border bg-neutral-200 dark:bg-neutral-800 p-2 rounded-md'>
<p className='font-bold text-lg'>Teléfono:</p> <p className='font-bold text-lg'>Teléfono:</p>
<p>{data?.data.phone || 'Sin teléfono'}</p> <p>{data?.data.phone || 'Sin teléfono'}</p>
</section> </section>
@@ -53,17 +53,17 @@ export function Profile() {
<h2 className='mt-3 mb-1'>Información de ubicación</h2> <h2 className='mt-3 mb-1'>Información de ubicación</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<section className='border bg-muted p-2 rounded-md'> <section className='border bg-neutral-200 dark:bg-neutral-800 p-2 rounded-md'>
<p className='font-bold text-lg'>Estado:</p> <p className='font-bold text-lg'>Estado:</p>
<p>{data?.data.state || 'Sin Estado'}</p> <p>{data?.data.state || 'Sin Estado'}</p>
</section> </section>
<section className='border bg-muted p-2 rounded-md'> <section className='border bg-neutral-200 dark:bg-neutral-800 p-2 rounded-md'>
<p className='font-bold text-lg'>Municipio:</p> <p className='font-bold text-lg'>Municipio:</p>
<p>{data?.data.municipality || 'Sin Municipio'}</p> <p>{data?.data.municipality || 'Sin Municipio'}</p>
</section> </section>
<section className='border bg-muted p-2 rounded-md'> <section className='border bg-neutral-200 dark:bg-neutral-800 p-2 rounded-md'>
<p className='font-bold text-lg'>Parroquia:</p> <p className='font-bold text-lg'>Parroquia:</p>
<p>{data?.data.parish || 'Sin Parroquia'}</p> <p>{data?.data.parish || 'Sin Parroquia'}</p>
</section> </section>

View File

@@ -38,7 +38,7 @@ function DialogOverlay({
<DialogPrimitive.Overlay <DialogPrimitive.Overlay
data-slot="dialog-overlay" data-slot="dialog-overlay"
className={cn( className={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur bg-black/70",
className className
)} )}
{...props} {...props}

View File

@@ -97,7 +97,7 @@ function FormLabel({
<Label <Label
data-slot="form-label" data-slot="form-label"
data-error={!!error} data-error={!!error}
className={cn("data-[error=true]:text-destructive-foreground", className)} className={cn("data-[error=true]:text-red-700", className)}
htmlFor={formItemId} htmlFor={formItemId}
{...props} {...props}
/> />
@@ -147,7 +147,7 @@ function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
<p <p
data-slot="form-message" data-slot="form-message"
id={formMessageId} id={formMessageId}
className={cn("text-destructive-foreground text-sm", className)} className={cn("text-red-700 text-sm", className)}
{...props} {...props}
> >
{body} {body}

View File

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
type={type} type={type}
data-slot="input" data-slot="input"
className={cn( className={cn(
'border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground aria-invalid:outline-destructive/60 aria-invalid:ring-destructive/20 dark:aria-invalid:outline-destructive dark:aria-invalid:ring-destructive/50 ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 aria-invalid:border-destructive/60 dark:aria-invalid:border-destructive flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-4 focus-visible:outline-1 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:focus-visible:ring-[3px] aria-invalid:focus-visible:outline-none md:text-sm dark:aria-invalid:focus-visible:ring-4', 'border-gray-400 dark:border-input border-2 file:text-foreground selection:bg-primary selection:text-primary-foreground aria-invalid:outline-destructive/60 aria-invalid:ring-destructive/20 dark:aria-invalid:outline-destructive dark:aria-invalid:ring-destructive/50 ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 aria-invalid:border-destructive/60 dark:aria-invalid:border-destructive flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-4 focus-visible:outline-1 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:focus-visible:ring-[3px] aria-invalid:focus-visible:outline-none md:text-sm dark:aria-invalid:focus-visible:ring-4',
className, className,
)} )}
{...props} {...props}

View File

@@ -38,7 +38,7 @@ function SelectSearchable({
> >
<SelectPrimitive.Trigger <SelectPrimitive.Trigger
className={cn( className={cn(
'border-input data-[placeholder]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', 'border-gray-400 dark:border-input data-[placeholder]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
disabled && 'bg-muted', disabled && 'bg-muted',
)} )}
> >

View File

@@ -37,7 +37,7 @@ function SelectTrigger({
data-slot="select-trigger" data-slot="select-trigger"
data-size={size} data-size={size}
className={cn( className={cn(
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "border-gray-400 dark:border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className className
)} )}
{...props} {...props}