@@ -10,6 +10,7 @@ import { Badge } from '@/components/ui/badge'
1010import { Button } from '@/components/ui/button'
1111import ConfirmationModal from '@/components/confirmation-modal'
1212import { DeleteIcon } from '@/config/svgs/DeleteIcon'
13+ import { DestructiveConfirmation } from '@/config/svgs/Auth'
1314import Loader from '@/components/Loader'
1415import { RootState } from '@/lib/store'
1516import { SESSION_TYPE } from '@/components/types/Sessions'
@@ -18,7 +19,6 @@ import { useAppSelector } from '@/lib/hooks'
1819
1920function Sessions ( ) : JSX . Element {
2021 const [ loading , setLoading ] = useState ( true )
21- const [ showDetails , setShowDetails ] = useState < string > ( '' )
2222 const [ sessions , setSessions ] = useState < Session [ ] > ( )
2323 const [ error , setError ] = useState < string | null > ( null )
2424 const [ success , setSuccess ] = useState < string | null > ( null )
@@ -43,7 +43,19 @@ function Sessions(): JSX.Element {
4343 typeof response !== 'string' &&
4444 response ?. data ?. statusCode === apiStatusCodes . API_STATUS_SUCCESS
4545 ) {
46- setSessions ( response . data . data )
46+ const sortByDate = response . data . data
47+ . sort (
48+ ( a : Session , b : Session ) =>
49+ new Date ( b . createdAt ) . getTime ( ) - new Date ( a . createdAt ) . getTime ( ) ,
50+ )
51+ . filter ( ( session : Session ) => session . id !== currentSession )
52+ const activeSession = response . data . data . filter (
53+ ( session : Session ) => session . id === currentSession ,
54+ )
55+ if ( activeSession . length > 0 ) {
56+ sortByDate . unshift ( ...activeSession )
57+ }
58+ setSessions ( sortByDate )
4759 }
4860 } catch ( error ) {
4961 console . error ( 'Error fetching user sessions:' , error )
@@ -158,14 +170,15 @@ function Sessions(): JSX.Element {
158170 openModal = { showConfirmation }
159171 closeModal = { ( ) => setShowConfirmation ( false ) }
160172 onSuccess = { handleDelete }
161- message = { 'This Session will be Deleted Permanently .' }
173+ message = { 'This session will be deleted permanently .' }
162174 buttonTitles = { [
163175 confirmationMessages . cancelConfirmation ,
164176 confirmationMessages . sureConfirmation ,
165177 ] }
166178 isProcessing = { loading }
167179 setFailure = { setError }
168180 setSuccess = { setSuccess }
181+ image = { < DestructiveConfirmation /> }
169182 />
170183 { sessions &&
171184 Array . isArray ( sessions ) &&
@@ -177,10 +190,10 @@ function Sessions(): JSX.Element {
177190 return (
178191 < div
179192 key = { record ?. id }
180- className = "mt-2 rounded-md border p-4 md:flex-row"
193+ className = "mt-2 h-auto rounded-md border p-4 md:flex-row"
181194 >
182- < div className = "flex flex-col items-center justify-between md:flex-row " >
183- < div className = "flex items-center gap-4" >
195+ < div className = "flex h-full cursor-default flex-wrap items-center justify-between" >
196+ < div className = "flex min-w-[300px] items-center gap-4" >
184197 < div className = "px-2" >
185198 { clientInfo ? (
186199 getSessionIcon ( record , clientInfo )
@@ -194,9 +207,9 @@ function Sessions(): JSX.Element {
194207 </ div >
195208 < div >
196209 { clientInfo ?. ip && (
197- < div >
210+ < div className = "font-mono text-sm font-semibold" >
198211 IP:{ ' ' }
199- < span className = "text-muted-foreground break-all" >
212+ < span className = "break-all" >
200213 { clientInfo ?. ip ?? 'Not Available' }
201214 </ span >
202215 </ div >
@@ -223,8 +236,38 @@ function Sessions(): JSX.Element {
223236 </ div >
224237 </ div >
225238 </ div >
239+ { clientInfo &&
240+ clientInfo ?. ip &&
241+ record . sessionType !== SESSION_TYPE . ORGANIZATION && (
242+ < div
243+ className = {
244+ 'grid h-auto w-[250px] items-center justify-start overflow-hidden rounded-md p-4 pl-20 text-sm transition-all duration-500 lg:pl-4'
245+ }
246+ >
247+ < div className = "flex justify-start" >
248+ < dt > Browser : </ dt >
249+ < dd className = "text-muted-foreground" >
250+ { clientInfo ?. browser }
251+ </ dd >
252+ </ div >
253+ < div className = "flex justify-start" >
254+ < dt > OS : </ dt >
255+ < dd className = "text-muted-foreground" >
256+ { clientInfo ?. os }
257+ </ dd >
258+ </ div >
259+ < div className = "flex justify-start" >
260+ < dt > Device : </ dt >
261+ < dd className = "text-muted-foreground" >
262+ { clientInfo ?. deviceType }
263+ </ dd >
264+ </ div >
265+ </ div >
266+ ) }
226267 < div
227- className = { `sm:w-0.5/3 flex h-[100px] items-center ${ record . sessionType !== SESSION_TYPE . ORGANIZATION && clientInfo ?. ip && 'pt-10' } }
268+ className = {
269+ 'flex h-[50px] grow items-center justify-end md:w-[130px] lg:grow-0'
270+ }
228271 >
229272 { record ?. id === currentSession ? (
230273 < Badge className = "success-alert rounded-full p-1 px-3" >
@@ -242,58 +285,14 @@ function Sessions(): JSX.Element {
242285 setShowConfirmation ( true )
243286 setDeletionId ( record . id )
244287 } }
245- className = "flex justify-end bg-transparent p-0 shadow-none hover:bg-transparent focus:ring-0"
288+ className = "flex justify-end bg-transparent p-0 px-3 shadow-none hover:bg-transparent focus:ring-0"
246289 >
247290 < DeleteIcon />
248291 </ Button >
249292 </ div >
250293 ) }
251294 </ div >
252295 </ div >
253-
254- { clientInfo ?. ip &&
255- record . sessionType !== SESSION_TYPE . ORGANIZATION && (
256- < Button
257- onClick = { ( ) => {
258- setShowDetails ( ( prev ) => {
259- if ( record . id === prev ) {
260- return ''
261- }
262- return record . id
263- } )
264- } }
265- variant = { 'secondary' }
266- className = "mt-2 h-[30px] px-2"
267- >
268- { showDetails === record . id
269- ? 'Hide Details'
270- : 'Show Details' }
271- </ Button >
272- ) }
273- { clientInfo && (
274- < div
275- className = { `${ showDetails === record . id ? 'mt-6 h-auto rounded-md border p-4' : '' } }
276- >
277- < div className = "grid justify-center" >
278- < dt > Browser</ dt >
279- < dd className = "text-muted-foreground" >
280- { clientInfo ?. browser }
281- </ dd >
282- </ div >
283- < div className = "grid justify-center" >
284- < dt > OS</ dt >
285- < dd className = "text-muted-foreground" >
286- { clientInfo ?. os }
287- </ dd >
288- </ div >
289- < div className = "grid justify-center" >
290- < dt > Device</ dt >
291- < dd className = "text-muted-foreground" >
292- { clientInfo ?. deviceType }
293- </ dd >
294- </ div >
295- </ div >
296- ) }
297296 </ div >
298297 )
299298 } ) }
0 commit comments