feat: tambah kolom Last Activity di tabel user management desa-plus

src/frontend/routes/apps.$appId.users.index.tsx

@@ -34,6 +34,7 @@ import {
   TbBriefcase,
   TbCircleCheck,
   TbCircleX,
+  TbClock,
   TbHome2,
   TbId,
   TbMail,
@@ -68,6 +69,7 @@ interface APIUser {
   idVillage: string
   idGroup: string
   idPosition: string
+  lastActivity: string | null
 }
 
 interface BaseUserForm {
@@ -97,6 +99,15 @@ const REQUIRED_FIELDS = ['name', 'nik', 'phone', 'email', 'gender', 'idUserRole'
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json())
 
+function getLastActivityInfo(lastActivity: string | null): { label: string; color: string } {
+  if (!lastActivity) return { label: 'Never', color: 'gray' }
+  const days = Math.floor((Date.now() - new Date(lastActivity).getTime()) / (1000 * 60 * 60 * 24))
+  if (days < 1) return { label: 'Today', color: 'teal' }
+  if (days < 7) return { label: `${days}d ago`, color: 'teal' }
+  if (days <= 30) return { label: `${days}d ago`, color: 'yellow' }
+  return { label: `${days}d ago`, color: 'red' }
+}
+
 interface UserFormFieldsProps {
   values: BaseUserForm
   onChange: (updates: Partial<BaseUserForm>) => void
@@ -698,11 +709,12 @@ function UsersIndexPage() {
               <Table.Thead>
                 <Table.Tr>
                   {[
-                    { label: 'User & ID', col: 'name', width: '28%' },
+                    { label: 'User & ID', col: 'name', width: '24%' },
-                    { label: 'Contact', col: null, width: '25%' },
+                    { label: 'Contact', col: null, width: '21%' },
-                    { label: 'Organization', col: null, width: '22%' },
+                    { label: 'Organization', col: null, width: '20%' },
-                    { label: 'Role', col: 'idUserRole', width: '15%' },
+                    { label: 'Role', col: 'idUserRole', width: '13%' },
                     { label: 'Status', col: 'isActive', width: '10%' },
+                    { label: 'Last Activity', col: null, width: '12%' },
                   ].map(({ label, col, width }) => (
                     <Table.Th
                       key={label}
@@ -816,6 +828,17 @@ function UsersIndexPage() {
                         )}
                       </Stack>
                     </Table.Td>
+                    <Table.Td>
+                      {(() => {
+                        const { label, color } = getLastActivityInfo(user.lastActivity)
+                        return (
+                          <Group gap={6} wrap="nowrap">
+                            <TbClock size={13} color={`var(--mantine-color-${color}-5)`} />
+                            <Text size="xs" fw={600} c={`${color}.5`}>{label}</Text>
+                          </Group>
+                        )
+                      })()}
+                    </Table.Td>
                   </Table.Tr>
                 ))}
               </Table.Tbody>