@@ -60,7 +60,7 @@ export default function AccountManagementScreen() {
60
60
} ;
61
61
62
62
return (
63
- < div >
63
+ < >
64
64
< h1 className = "text-2xl font-semibold" > Account Management</ h1 >
65
65
< div className = "flex justify-between items-center w-full py-4" >
66
66
< div className = "relative w-1/3" >
@@ -102,47 +102,49 @@ export default function AccountManagementScreen() {
102
102
< CgSpinner className = "w-16 h-16 animate-spin opacity-50" />
103
103
</ div >
104
104
) : (
105
- < table className = "min-w-full mt-4 rounded-t-lg overflow-hidden" >
106
- < thead >
107
- < tr className = "bg-gray-100 border-b-2" >
108
- < th className = "px-4 py-2 text-left font-normal" > Name</ th >
109
- < th className = "px-4 py-2 text-left font-normal" > Email</ th >
110
- < th className = "px-4 py-2 text-left font-normal" > Role</ th >
111
- < th className = "px-4 py-2 text-left font-normal" > Status</ th >
112
- < th className = "px-4 py-2 text-left font-normal" > Manage</ th >
113
- </ tr >
114
- </ thead >
115
- < tbody >
116
- { filteredUsers . map ( ( user , index ) => (
117
- < tr
118
- key = { index }
119
- data-odd = { index % 2 !== 0 }
120
- className = "bg-white data-[odd=true]:bg-gray-50"
121
- >
122
- < td className = "border-b px-4 py-2 w-1/5" > { user . name } </ td >
123
- < td className = "border-b px-4 py-2 w-1/5" > { user . email } </ td >
124
- < td className = "border-b px-4 py-2 w-1/5" >
125
- { formatUserType ( user . type ) }
126
- </ td >
127
- < td className = "border-b px-4 py-2 w-1/5" >
128
- < span className = "px-2 py-1 rounded bg-green-primary whitespace-nowrap" >
129
- Account created
130
- </ span >
131
- </ td >
132
- < td className = "border-b px-4 py-2 w-12" >
133
- < div className = "float-right" >
134
- < DotsThree
135
- weight = "bold"
136
- className = "cursor-pointer"
137
- onClick = { ( ) => { } }
138
- />
139
- </ div >
140
- </ td >
105
+ < div className = "overflow-x-scroll" >
106
+ < table className = "mt-4 rounded-t-lg overflow-hidden" >
107
+ < thead >
108
+ < tr className = "bg-gray-100 border-b-2" >
109
+ < th className = "px-4 py-2 text-left font-normal" > Name</ th >
110
+ < th className = "px-4 py-2 text-left font-normal" > Email</ th >
111
+ < th className = "px-4 py-2 text-left font-normal" > Role</ th >
112
+ < th className = "px-4 py-2 text-left font-normal" > Status</ th >
113
+ < th className = "px-4 py-2 text-left font-normal" > Manage</ th >
141
114
</ tr >
142
- ) ) }
143
- </ tbody >
144
- </ table >
115
+ </ thead >
116
+ < tbody >
117
+ { filteredUsers . map ( ( user , index ) => (
118
+ < tr
119
+ key = { index }
120
+ data-odd = { index % 2 !== 0 }
121
+ className = "bg-white data-[odd=true]:bg-gray-50"
122
+ >
123
+ < td className = "border-b px-4 py-2 w-1/5" > { user . name } </ td >
124
+ < td className = "border-b px-4 py-2 w-1/5" > { user . email } </ td >
125
+ < td className = "border-b px-4 py-2 w-1/5" >
126
+ { formatUserType ( user . type ) }
127
+ </ td >
128
+ < td className = "border-b px-4 py-2 w-1/5" >
129
+ < span className = "px-2 py-1 rounded bg-green-primary whitespace-nowrap" >
130
+ Account created
131
+ </ span >
132
+ </ td >
133
+ < td className = "border-b px-4 py-2 w-12" >
134
+ < div className = "float-right" >
135
+ < DotsThree
136
+ weight = "bold"
137
+ className = "cursor-pointer"
138
+ onClick = { ( ) => { } }
139
+ />
140
+ </ div >
141
+ </ td >
142
+ </ tr >
143
+ ) ) }
144
+ </ tbody >
145
+ </ table >
146
+ </ div >
145
147
) }
146
- </ div >
148
+ </ >
147
149
) ;
148
150
}
0 commit comments