feat: enhance USERS data structure with idTransaction and update UsersPage to display it

app/pages/dashboard-users/data.ts

@@ -1,6 +1,16 @@
-export const USERS = [
+type TUsers = {
+  id: number
+  idTransaction: number
+  date: string
+  name: string
+  email: string
+  category: string
+  status: string
+}
+export const USERS: TUsers[] = [
   {
     id: 1,
+    idTransaction: 5_512_446_588,
     date: '24/10/2024',
     name: 'Ainun Wijaya',
     email: 'ainun@gmail.com',
@@ -9,6 +19,7 @@ export const USERS = [
   },
   {
     id: 2,
+    idTransaction: 5_512_446_588,
     date: '24/10/2024',
     name: 'Ainun Wijaya',
     email: 'ainun@gmail.com',
@@ -17,6 +28,7 @@ export const USERS = [
   },
   {
     id: 3,
+    idTransaction: 5_512_446_588,
     date: '24/10/2024',
     name: 'Ainun Wijaya',
     email: 'ainun@gmail.com',
@@ -25,6 +37,7 @@ export const USERS = [
   },
   {
     id: 4,
+    idTransaction: 5_512_446_588,
     date: '24/10/2024',
     name: 'Ainun Wijaya',
     email: 'ainun@gmail.com',
@@ -33,6 +46,7 @@ export const USERS = [
   },
   {
     id: 5,
+    idTransaction: 5_512_446_588,
     date: '24/10/2024',
     name: 'Ainun Wijaya',
     email: 'ainun@gmail.com',

app/pages/dashboard-users/index.tsx

@@ -5,9 +5,9 @@ import { Pagination } from '~/components/ui/pagination'
 
 import { USERS } from './data'
 
-export const UsersPage = () => {
 type TColorBadge = 'Baru' | 'Premium' | 'Pembayaran'
 
+export const UsersPage = () => {
   const getStatusBadge = (status: TColorBadge) => {
     const statusColors = {
       Baru: 'bg-[#DFE5FF] text-[#4C5CA0]',
@@ -80,7 +80,9 @@ export const UsersPage = () => {
                   <td>{user.date}</td>
                   <td>
                     {user.name}
-                    <div className="text-sm text-gray-500">id: 5512446588</div>
+                    <div className="text-sm text-gray-500">
+                      id: {user.idTransaction}
+                    </div>
                   </td>
                   <td>{user.email}</td>
                   <td>{user.category}</td>