Skip to content

Commit 51f1159

Browse files
AngeloCarnevaleAngeloCarnevale
committed
rm: calendar component
1 parent f1e3ba1 commit 51f1159

19 files changed

+1095
-24
lines changed

‎package.json

+6
Original file line numberDiff line numberDiff line change
@@ -12,24 +12,30 @@
1212
"dependencies": {
1313
"@hookform/resolvers": "^3.9.0",
1414
"@radix-ui/react-avatar": "^1.1.0",
15+
"@radix-ui/react-checkbox": "^1.1.1",
1516
"@radix-ui/react-dialog": "^1.1.1",
1617
"@radix-ui/react-dropdown-menu": "^2.1.1",
1718
"@radix-ui/react-icons": "^1.3.0",
1819
"@radix-ui/react-label": "^2.1.0",
20+
"@radix-ui/react-popover": "^1.1.1",
1921
"@radix-ui/react-radio-group": "^1.2.0",
2022
"@radix-ui/react-select": "^2.1.1",
23+
"@radix-ui/react-separator": "^1.1.0",
2124
"@radix-ui/react-slot": "^1.1.0",
2225
"@radix-ui/react-tabs": "^1.1.0",
2326
"@radix-ui/react-toast": "^1.2.1",
2427
"@radix-ui/react-tooltip": "^1.1.2",
2528
"@tanstack/react-table": "^8.20.5",
2629
"class-variance-authority": "^0.7.0",
2730
"clsx": "^2.1.1",
31+
"cmdk": "1.0.0",
32+
"date-fns": "^4.0.0",
2833
"lucide-react": "^0.439.0",
2934
"next": "14.2.9",
3035
"next-auth": "5.0.0-beta.20",
3136
"next-themes": "^0.3.0",
3237
"react": "^18",
38+
"react-day-picker": "8.10.1",
3339
"react-dom": "^18",
3440
"react-hook-form": "^7.53.0",
3541
"sot": "file:",

‎src/app/app/(main)/_components/create-service-order-workshop-dialog.tsx

+218
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
"use client"
2+
3+
import { Button } from '@/components/ui/button'
4+
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
5+
import { FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription, Form } from '@/components/ui/form'
6+
import { Input } from '@/components/ui/input'
7+
import { Textarea } from '@/components/ui/textarea'
8+
import { PropsWithChildren, useRef, useState } from 'react'
9+
import { useForm } from 'react-hook-form'
10+
import { zodResolver } from '@hookform/resolvers/zod'
11+
import { CreateNewWorkshopServiceOrder, createNewWorkshopServiceOrderSchema } from '../schema'
12+
import { createNewWorkshopServiceOrder } from '../action'
13+
import { toast } from '@/hooks/use-toast'
14+
import { Checkbox } from '@/components/ui/checkbox'
15+
import { useRouter } from 'next/navigation'
16+
import { CheckIcon } from '@radix-ui/react-icons'
17+
18+
export default function CreateServiceOrderWorkshopDialog({ children }: PropsWithChildren) {
19+
const ref = useRef<HTMLDivElement>(null)
20+
const [open, setOpen] = useState(false)
21+
const form = useForm<CreateNewWorkshopServiceOrder>({
22+
resolver: zodResolver(createNewWorkshopServiceOrderSchema),
23+
defaultValues: {
24+
automaker: '',
25+
project: '',
26+
isIntern: true,
27+
model: '',
28+
chassis: '',
29+
fleet: '',
30+
vehicleLocation: '',
31+
keyLocation: '',
32+
serviceInformations: null,
33+
deliveryDate: '',
34+
requestedBy: ''
35+
},
36+
})
37+
const router = useRouter()
38+
async function onSubmit(values: CreateNewWorkshopServiceOrder) {
39+
await createNewWorkshopServiceOrder(values)
40+
setOpen(false)
41+
router.refresh()
42+
toast({
43+
description: (
44+
<div className="w-full flex items-center">
45+
<CheckIcon className="mr-2 w-4 h-4" />
46+
<span className="first-letter:capitalize">Ordem de serviço da oficina criada com sucesso.</span>
47+
</div>
48+
)
49+
})
50+
}
51+
52+
return (
53+
<Dialog open={open} onOpenChange={setOpen}>
54+
<DialogTrigger asChild>
55+
<div ref={ref}>{children}</div>
56+
</DialogTrigger>
57+
<DialogContent className="sm:max-w-[600px] md:max-w-[700px] lg:max-w-[800px] xl:max-w-[900px]">
58+
<DialogHeader>
59+
<DialogTitle>Criar ordem de serviço da oficina</DialogTitle>
60+
<DialogDescription>
61+
Insira os detalhes da ordem de serviço abaixo.
62+
</DialogDescription>
63+
</DialogHeader>
64+
<Form {...form}>
65+
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
66+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
67+
<FormField
68+
control={form.control}
69+
name="automaker"
70+
render={({ field }) => (
71+
<FormItem>
72+
<FormLabel>Montadora</FormLabel>
73+
<FormControl>
74+
<Input placeholder="Automaker" {...field} />
75+
</FormControl>
76+
<FormMessage />
77+
</FormItem>
78+
)}
79+
/>
80+
<FormField
81+
control={form.control}
82+
name="project"
83+
render={({ field }) => (
84+
<FormItem>
85+
<FormLabel>Projeto</FormLabel>
86+
<FormControl>
87+
<Input placeholder="Project" {...field} />
88+
</FormControl>
89+
<FormMessage />
90+
</FormItem>
91+
)}
92+
/>
93+
<FormField
94+
control={form.control}
95+
name="model"
96+
render={({ field }) => (
97+
<FormItem>
98+
<FormLabel>Modelo</FormLabel>
99+
<FormControl>
100+
<Input placeholder="Model" {...field} />
101+
</FormControl>
102+
<FormMessage />
103+
</FormItem>
104+
)}
105+
/>
106+
<FormField
107+
control={form.control}
108+
name="chassis"
109+
render={({ field }) => (
110+
<FormItem>
111+
<FormLabel>Chassi</FormLabel>
112+
<FormControl>
113+
<Input placeholder="Chassis" {...field} />
114+
</FormControl>
115+
<FormMessage />
116+
</FormItem>
117+
)}
118+
/>
119+
<FormField
120+
control={form.control}
121+
name="fleet"
122+
render={({ field }) => (
123+
<FormItem>
124+
<FormLabel>Frota</FormLabel>
125+
<FormControl>
126+
<Input placeholder="Fleet" {...field} />
127+
</FormControl>
128+
<FormMessage />
129+
</FormItem>
130+
)}
131+
/>
132+
<FormField
133+
control={form.control}
134+
name="vehicleLocation"
135+
render={({ field }) => (
136+
<FormItem>
137+
<FormLabel>Localização do veículo</FormLabel>
138+
<FormControl>
139+
<Input placeholder="Vehicle Location" {...field} />
140+
</FormControl>
141+
<FormMessage />
142+
</FormItem>
143+
)}
144+
/>
145+
<FormField
146+
control={form.control}
147+
name="keyLocation"
148+
render={({ field }) => (
149+
<FormItem>
150+
<FormLabel>Localização da chave</FormLabel>
151+
<FormControl>
152+
<Input placeholder="Key Location" {...field} />
153+
</FormControl>
154+
<FormMessage />
155+
</FormItem>
156+
)}
157+
/>
158+
<FormField
159+
control={form.control}
160+
name="deliveryDate"
161+
render={({ field }) => (
162+
<FormItem className="flex flex-col">
163+
<FormLabel>Data de entrega</FormLabel>
164+
<FormControl>
165+
<Input type="date" {...field} />
166+
</FormControl>
167+
<FormMessage />
168+
</FormItem>
169+
)}
170+
/>
171+
</div>
172+
<FormField
173+
control={form.control}
174+
name="isIntern"
175+
render={({ field }) => (
176+
<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
177+
<FormControl>
178+
<Checkbox
179+
checked={field.value}
180+
onCheckedChange={field.onChange}
181+
/>
182+
</FormControl>
183+
<div className="space-y-1 leading-none">
184+
<FormLabel>
185+
Interno
186+
</FormLabel>
187+
<FormDescription>
188+
Marque se o projeto for interno
189+
</FormDescription>
190+
</div>
191+
</FormItem>
192+
)}
193+
/>
194+
<FormField
195+
control={form.control}
196+
name="serviceInformations"
197+
render={({ field }) => (
198+
<FormItem>
199+
<FormLabel>Informações do serviço</FormLabel>
200+
<FormControl>
201+
<Textarea
202+
placeholder="Service Informations"
203+
{...field}
204+
value={field.value || ''}
205+
onChange={(e) => field.onChange(e.target.value || null)}
206+
/>
207+
</FormControl>
208+
<FormMessage />
209+
</FormItem>
210+
)}
211+
/>
212+
<Button type="submit">Criar</Button>
213+
</form>
214+
</Form>
215+
</DialogContent>
216+
</Dialog>
217+
)
218+
}

‎src/app/app/(main)/_components/data-table-faceted-filter.tsx

+131
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import * as React from "react"
2+
import { CheckIcon, PlusCircledIcon } from "@radix-ui/react-icons"
3+
import { Column } from "@tanstack/react-table"
4+
5+
import { cn } from "@/lib/utils"
6+
import { Button } from "@/components/ui/button"
7+
import { Separator } from "@/components/ui/separator"
8+
import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover"
9+
import { CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, Command } from "@/components/ui/command"
10+
import { Badge } from "@/components/ui/badge"
11+
12+
interface DataTableFacetedFilterProps<TData, TValue> {
13+
column?: Column<TData, TValue>
14+
title?: string
15+
options: {
16+
label: string
17+
value: string
18+
}[]
19+
}
20+
21+
export function DataTableFacetedFilter<TData, TValue>({
22+
column,
23+
title,
24+
options,
25+
}: DataTableFacetedFilterProps<TData, TValue>) {
26+
const facets = column?.getFacetedUniqueValues()
27+
const selectedValues = new Set(column?.getFilterValue() as string[])
28+
29+
return (
30+
<Popover>
31+
<PopoverTrigger asChild>
32+
<Button variant="outline" size="sm" className="h-8 border-dashed">
33+
<PlusCircledIcon className="mr-2 h-4 w-4" />
34+
{title}
35+
{selectedValues?.size > 0 && (
36+
<>
37+
<Separator orientation="vertical" className="mx-2 h-4" />
38+
<Badge
39+
variant="secondary"
40+
className="rounded-sm px-1 font-normal lg:hidden"
41+
>
42+
{selectedValues.size}
43+
</Badge>
44+
<div className="hidden space-x-1 lg:flex">
45+
{selectedValues.size > 2 ? (
46+
<Badge
47+
variant="secondary"
48+
className="rounded-sm px-1 font-normal"
49+
>
50+
{selectedValues.size} selected
51+
</Badge>
52+
) : (
53+
options
54+
.filter((option) => selectedValues.has(option.value))
55+
.map((option) => (
56+
<Badge
57+
variant="secondary"
58+
key={option.value}
59+
className="rounded-sm px-1 font-normal"
60+
>
61+
{option.label}
62+
</Badge>
63+
))
64+
)}
65+
</div>
66+
</>
67+
)}
68+
</Button>
69+
</PopoverTrigger>
70+
<PopoverContent className="w-[200px] p-0 dark:bg-[#1a1a1a]" align="start">
71+
<Command>
72+
<CommandInput placeholder={title} />
73+
<CommandList>
74+
<CommandEmpty>No results found.</CommandEmpty>
75+
<CommandGroup>
76+
{options.map((option) => {
77+
const isSelected = selectedValues.has(option.value)
78+
return (
79+
<CommandItem
80+
key={option.value}
81+
onSelect={() => {
82+
if (isSelected) {
83+
selectedValues.delete(option.value)
84+
} else {
85+
selectedValues.add(option.value)
86+
}
87+
const filterValues = Array.from(selectedValues)
88+
column?.setFilterValue(
89+
filterValues.length ? filterValues : undefined
90+
)
91+
}}
92+
>
93+
<div
94+
className={cn(
95+
"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
96+
isSelected
97+
? "bg-primary text-primary-foreground"
98+
: "opacity-50 [&_svg]:invisible"
99+
)}
100+
>
101+
<CheckIcon className={cn("h-4 w-4")} />
102+
</div>
103+
<span>{option.label}</span>
104+
{facets?.get(option.value) && (
105+
<span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
106+
{facets.get(option.value)}
107+
</span>
108+
)}
109+
</CommandItem>
110+
)
111+
})}
112+
</CommandGroup>
113+
{selectedValues.size > 0 && (
114+
<>
115+
<CommandSeparator />
116+
<CommandGroup>
117+
<CommandItem
118+
onSelect={() => column?.setFilterValue(undefined)}
119+
className="justify-center text-center"
120+
>
121+
Limpar filtros
122+
</CommandItem>
123+
</CommandGroup>
124+
</>
125+
)}
126+
</CommandList>
127+
</Command>
128+
</PopoverContent>
129+
</Popover>
130+
)
131+
}

0 commit comments

Comments
 (0)