first deploy with astro

dashboard_js/app/layouts/app/layout.jsx

@@ -68,7 +68,7 @@ export default function Layout() {
           </div>
         </header>
 
-        <main className="p-4 lg:p-8">
+        <main className="p-4 lg:p-8 space-y-5">
           {isNavigating ? <Loading /> : <Outlet />}
         </main>
       </section>

dashboard_js/app/routes/users/index.jsx

@@ -1,17 +1,74 @@
-import { useSuspenseQuery } from '@tanstack/react-query'
+import { memo } from 'react'
+import { Heading } from '~/components/heading'
+import { CpfCnpj } from '~/components/cpf-cnpj'
+import { Table, Tbody, Td, Th, Thead, Tr } from '~/components/table'
+import { Abbr } from '~/components/abbr'
+import { Datetime } from '~/components/datetime'
+import axios from '~/axios'
 
 export function meta({}) {
   return [{ title: 'Usuários' }]
 }
 
-export default function Component() {
-  const info = useSuspenseQuery({
-    queryKey: ['users'],
-    queryFn: async () => {
-      await new Promise((r) => setTimeout(r, 3000))
-      return { data: 'todos' }
-    },
-  })
-
-  return <>users index</>
+export async function clientLoader() {
+  await new Promise((r) => setTimeout(r, 2000))
+  const index = 'users'
+  const { data } = await axios.get('/search/', { params: { index } })
+  return data
 }
+
+export default function Component({ loaderData: { hits = [] } }) {
+  return (
+    <>
+      <Heading>Usuários</Heading>
+
+      <Table>
+        <Thead>
+          <Tr>
+            <Th>&nbsp;</Th>
+            <Th>Nome</Th>
+            <Th>CPF/CNPJ</Th>
+            <Th>Email</Th>
+            <Th>Último acesso</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {hits.map((props) => (
+            <Row key={props.id} {...props} />
+          ))}
+
+          {hits.length === 0 && (
+            <Tr className="no-hover">
+              <Td colSpan={5}>Nada encontrado</Td>
+            </Tr>
+          )}
+        </Tbody>
+      </Table>
+    </>
+  )
+}
+
+const Row = memo(function Row({
+  id,
+  name,
+  cpf,
+  cnpj,
+  email,
+  lastLogin: last_login,
+}) {
+  return (
+    <Tr className="cursor-pointer" data-hover={!cnpj}>
+      <Td>
+        <Abbr maxLen={6}>{id}</Abbr>
+      </Td>
+      <Td>
+        <Abbr>{name}</Abbr>
+      </Td>
+      <CpfCnpj as={Td}>{cpf ?? cnpj}</CpfCnpj>
+      <Td>
+        <Abbr>{email}</Abbr>
+      </Td>
+      <Datetime as={Td}>{last_login}</Datetime>
+    </Tr>
+  )
+})

dashboard_js/package-lock.json

@@ -17,6 +17,7 @@
         "@uidotdev/usehooks": "^2.4.1",
         "aws-amplify": "^6.13.1",
         "axios": "^1.7.9",
+        "bodybuilder": "^2.5.1",
         "clsx": "^2.1.1",
         "isbot": "^5.1.17",
         "js-base64": "^3.7.7",
@@ -4377,6 +4378,19 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "license": "MIT"
     },
+    "node_modules/bodybuilder": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/bodybuilder/-/bodybuilder-2.5.1.tgz",
+      "integrity": "sha512-eI7F7QJ7U0l3iF1VNN62X8ofQ39TPC1heuRJhPbf/VhttSOT1mACpE4iSIidp8Pr1sXbUZ9Uc6R4RkfF7+4MtQ==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash.clonedeep": "4.5.0",
+        "lodash.isobject": "3.0.2",
+        "lodash.isplainobject": "4.0.6",
+        "lodash.merge": "4.6.2",
+        "lodash.unset": "4.5.2"
+      }
+    },
     "node_modules/bowser": {
       "version": "2.11.0",
       "resolved": "https://registry.npmjs.org/bowser/-/bowser-2.11.0.tgz",
@@ -5998,6 +6012,36 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "license": "MIT"
     },
+    "node_modules/lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isobject": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-3.0.2.tgz",
+      "integrity": "sha512-3/Qptq2vr7WeJbB4KHUSKlq8Pl7ASXi3UG6CMbBm8WRtXi8+GHm7mKaU3urfpSEzWe2wCIChs6/sdocUsTKJiA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.unset": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/lodash.unset/-/lodash.unset-4.5.2.tgz",
+      "integrity": "sha512-bwKX88k2JhCV9D1vtE8+naDKlLiGrSmf8zi/Y9ivFHwbmRfA8RxS/aVJ+sIht2XOwqoNr4xUPUkGZpc1sHFEKg==",
+      "license": "MIT"
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",

dashboard_js/package.json

@@ -19,6 +19,7 @@
     "@uidotdev/usehooks": "^2.4.1",
     "aws-amplify": "^6.13.1",
     "axios": "^1.7.9",
+    "bodybuilder": "^2.5.1",
     "clsx": "^2.1.1",
     "isbot": "^5.1.17",
     "js-base64": "^3.7.7",

dashboard_js/react-router.config.js

@@ -2,4 +2,4 @@ export default {
   // Config options...
   // Server-side render by default, to enable SPA mode set this to `false`
   ssr: false,
-};
+}