1- import { ChevronsUpDown , CircleUser , Cog , MessageCircle , RefreshCw } from "lucide-react" ;
1+ import {
2+ ChevronsUpDown ,
3+ CircleUser ,
4+ Cog ,
5+ MessageCircle ,
6+ RefreshCw ,
7+ } from "lucide-react" ;
28import { useMemo , useState } from "react" ;
39import { useTranslation } from "react-i18next" ;
410import { Link } from "react-router-dom" ;
@@ -8,9 +14,25 @@ import { InstanceStatus } from "@/components/instance-status";
814import { InstanceToken } from "@/components/instance-token" ;
915import { Avatar , AvatarImage } from "@/components/ui/avatar" ;
1016import { Button } from "@/components/ui/button" ;
11- import { Card , CardContent , CardFooter , CardHeader } from "@/components/ui/card" ;
12- import { Dialog , DialogClose , DialogContent , DialogFooter , DialogHeader } from "@/components/ui/dialog" ;
13- import { DropdownMenu , DropdownMenuContent , DropdownMenuCheckboxItem , DropdownMenuTrigger } from "@/components/ui/dropdown-menu" ;
17+ import {
18+ Card ,
19+ CardContent ,
20+ CardFooter ,
21+ CardHeader ,
22+ } from "@/components/ui/card" ;
23+ import {
24+ Dialog ,
25+ DialogClose ,
26+ DialogContent ,
27+ DialogFooter ,
28+ DialogHeader ,
29+ } from "@/components/ui/dialog" ;
30+ import {
31+ DropdownMenu ,
32+ DropdownMenuContent ,
33+ DropdownMenuCheckboxItem ,
34+ DropdownMenuTrigger ,
35+ } from "@/components/ui/dropdown-menu" ;
1436import { Input } from "@/components/ui/input" ;
1537
1638import { useFetchInstances } from "@/lib/queries/instance/fetchInstances" ;
@@ -24,7 +46,9 @@ import { TooltipWrapper } from "@/components/ui/tooltip";
2446function Dashboard ( ) {
2547 const { t } = useTranslation ( ) ;
2648
27- const [ deleteConfirmation , setDeleteConfirmation ] = useState < string | null > ( null ) ;
49+ const [ deleteConfirmation , setDeleteConfirmation ] = useState < string | null > (
50+ null ,
51+ ) ;
2852 const { deleteInstance, logout } = useManageInstance ( ) ;
2953 const { data : instances , refetch } = useFetchInstances ( ) ;
3054 const [ deleting , setDeleting ] = useState < string [ ] > ( [ ] ) ;
@@ -59,11 +83,15 @@ function Dashboard() {
5983 const filteredInstances = useMemo ( ( ) => {
6084 let instancesList = instances ? [ ...instances ] : [ ] ;
6185 if ( searchStatus !== "all" ) {
62- instancesList = instancesList . filter ( ( instance ) => instance . connectionStatus === searchStatus ) ;
86+ instancesList = instancesList . filter (
87+ ( instance ) => instance . connectionStatus === searchStatus ,
88+ ) ;
6389 }
6490
6591 if ( nameSearch !== "" ) {
66- instancesList = instancesList . filter ( ( instance ) => instance . name . toLowerCase ( ) . includes ( nameSearch . toLowerCase ( ) ) ) ;
92+ instancesList = instancesList . filter ( ( instance ) =>
93+ instance . name . toLowerCase ( ) . includes ( nameSearch . toLowerCase ( ) ) ,
94+ ) ;
6795 }
6896
6997 return instancesList ;
@@ -89,7 +117,11 @@ function Dashboard() {
89117 </ div >
90118 < div className = "my-4 flex items-center justify-between gap-3 px-4" >
91119 < div className = "flex-1" >
92- < Input placeholder = { t ( "dashboard.search" ) } value = { nameSearch } onChange = { ( e ) => setNameSearch ( e . target . value ) } />
120+ < Input
121+ placeholder = { t ( "dashboard.search" ) }
122+ value = { nameSearch }
123+ onChange = { ( e ) => setNameSearch ( e . target . value ) }
124+ />
93125 </ div >
94126 < DropdownMenu >
95127 < DropdownMenuTrigger asChild >
@@ -106,7 +138,8 @@ function Dashboard() {
106138 if ( checked ) {
107139 setSearchStatus ( status . value ) ;
108140 }
109- } } >
141+ } }
142+ >
110143 { status . label }
111144 </ DropdownMenuCheckboxItem >
112145 ) ) }
@@ -142,7 +175,10 @@ function Dashboard() {
142175 </ Avatar >
143176 < div className = "space-y-1" >
144177 < strong > { instance . profileName } </ strong >
145- < p className = "text-sm text-muted-foreground" > { instance . ownerJid && instance . ownerJid . split ( "@" ) [ 0 ] } </ p >
178+ < p className = "text-sm text-muted-foreground" >
179+ { instance . ownerJid &&
180+ instance . ownerJid . split ( "@" ) [ 0 ] }
181+ </ p >
146182 </ div >
147183 </ >
148184 ) }
@@ -151,19 +187,39 @@ function Dashboard() {
151187 < div className = "flex items-center justify-end gap-4 text-sm" >
152188 < div className = "flex flex-col items-center justify-center gap-1" >
153189 < CircleUser className = "text-muted-foreground" size = "20" />
154- < span > { new Intl . NumberFormat ( "pt-BR" ) . format ( instance ?. _count ?. Contact || 0 ) } </ span >
190+ < span >
191+ { new Intl . NumberFormat ( "pt-BR" ) . format (
192+ instance ?. _count ?. Contact || 0 ,
193+ ) }
194+ </ span >
155195 </ div >
156196 < div className = "flex flex-col items-center justify-center gap-1" >
157- < MessageCircle className = "text-muted-foreground" size = "20" />
158- < span > { new Intl . NumberFormat ( "pt-BR" ) . format ( instance ?. _count ?. Message || 0 ) } </ span >
197+ < MessageCircle
198+ className = "text-muted-foreground"
199+ size = "20"
200+ />
201+ < span >
202+ { new Intl . NumberFormat ( "pt-BR" ) . format (
203+ instance ?. _count ?. Message || 0 ,
204+ ) }
205+ </ span >
159206 </ div >
160207 </ div >
161208 </ div >
162209 </ CardContent >
163210 < CardFooter className = "justify-between" >
164211 < InstanceStatus status = { instance . connectionStatus } />
165- < Button variant = "destructive" size = "sm" onClick = { ( ) => setDeleteConfirmation ( instance . name ) } disabled = { deleting . includes ( instance . name ) } >
166- { deleting . includes ( instance . name ) ? < span > { t ( "button.deleting" ) } </ span > : < span > { t ( "button.delete" ) } </ span > }
212+ < Button
213+ variant = "destructive"
214+ size = "sm"
215+ onClick = { ( ) => setDeleteConfirmation ( instance . name ) }
216+ disabled = { deleting . includes ( instance . name ) }
217+ >
218+ { deleting . includes ( instance . name ) ? (
219+ < span > { t ( "button.deleting" ) } </ span >
220+ ) : (
221+ < span > { t ( "button.delete" ) } </ span >
222+ ) }
167223 </ Button >
168224 </ CardFooter >
169225 </ Card >
@@ -177,13 +233,22 @@ function Dashboard() {
177233 < DialogContent >
178234 < DialogClose />
179235 < DialogHeader > { t ( "modal.delete.title" ) } </ DialogHeader >
180- < p > { t ( "modal.delete.message" , { instanceName : deleteConfirmation } ) } </ p >
236+ < p >
237+ { t ( "modal.delete.message" , { instanceName : deleteConfirmation } ) }
238+ </ p >
181239 < DialogFooter >
182240 < div className = "flex items-center gap-4" >
183- < Button onClick = { ( ) => setDeleteConfirmation ( null ) } size = "sm" variant = "outline" >
241+ < Button
242+ onClick = { ( ) => setDeleteConfirmation ( null ) }
243+ size = "sm"
244+ variant = "outline"
245+ >
184246 { t ( "button.cancel" ) }
185247 </ Button >
186- < Button onClick = { ( ) => handleDelete ( deleteConfirmation ) } variant = "destructive" >
248+ < Button
249+ onClick = { ( ) => handleDelete ( deleteConfirmation ) }
250+ variant = "destructive"
251+ >
187252 { t ( "button.delete" ) }
188253 </ Button >
189254 </ div >
0 commit comments