From a0844a193f429a5883e6e1aaa0284b72718a5f2b Mon Sep 17 00:00:00 2001
From: Gerard <g.roura.v@protonmail.com>
Date: Thu, 21 Nov 2024 12:55:00 +0100
Subject: [PATCH 1/3] tables WIP padding

---
 .../Organization/Dashboard/ProcessCard.tsx    | 70 +++++--------------
 .../Organization/Dashboard/ProcessesList.tsx  | 46 ++++--------
 src/elements/dashboard/processes/index.tsx    |  7 +-
 src/theme/components/table.ts                 | 27 +++++++
 src/theme/index.ts                            |  2 +
 5 files changed, 61 insertions(+), 91 deletions(-)
 create mode 100644 src/theme/components/table.ts

diff --git a/src/components/Organization/Dashboard/ProcessCard.tsx b/src/components/Organization/Dashboard/ProcessCard.tsx
index a03a3dc0..234cecec 100644
--- a/src/components/Organization/Dashboard/ProcessCard.tsx
+++ b/src/components/Organization/Dashboard/ProcessCard.tsx
@@ -1,11 +1,9 @@
-import { Box, Flex, Text } from '@chakra-ui/react'
+import { Td } from '@chakra-ui/react'
 import { ElectionStatusBadge, ElectionTitle, QuestionsTypeBadge } from '@vocdoni/chakra-components'
 import { useElection } from '@vocdoni/react-providers'
-import { ensure0x, InvalidElection } from '@vocdoni/sdk'
+import { InvalidElection } from '@vocdoni/sdk'
 import { useTranslation } from 'react-i18next'
-import { generatePath, Link as RouterLink } from 'react-router-dom'
 import { useDateFns } from '~i18n/use-date-fns'
-import { Routes } from '~src/router/routes'
 
 const ProcessCard = () => {
   const { election } = useElection()
@@ -15,58 +13,24 @@ const ProcessCard = () => {
   if (!election || election instanceof InvalidElection) return null
 
   return (
-    <Box
-      as={RouterLink}
-      to={generatePath(Routes.dashboard.process, { id: ensure0x(election.id) })}
-      w='full'
-      display='flex'
-      gap={5}
-      textDecoration='none'
-      py='10px'
-      borderRadius='xl'
-      px={4}
-      _hover={{
-        bgColor: 'process.card_hover.light',
-
-        _dark: {
-          bgColor: 'process.card_hover.dark',
-        },
-      }}
-    >
-      <ElectionTitle
-        flexGrow={1}
-        flexShrink={0}
-        flexBasis={48}
-        mb={0}
-        mt={1}
-        fontSize='md'
-        textAlign='left'
-        fontWeight='500'
-        isTruncated
-      />
-      <Box flexGrow={1} flexShrink={0} flexBasis={60} fontWeight='500'>
-        <Text as='span'>{format(election.startDate, t('organization.date_format'))}</Text> -{' '}
-        <Text as='span'>{format(election.endDate, t('organization.date_format'))}</Text>
-      </Box>
-      <Box
-        flexGrow={1}
-        flexShrink={0}
-        flexBasis={36}
-        sx={{
-          label: {
-            fontWeight: 500,
-          },
-        }}
-      >
+    <>
+      <Td>
+        <ElectionTitle mb={0} fontSize='md' textAlign='left' fontWeight='500' isTruncated />
+      </Td>
+      <Td>
+        {format(election.startDate, t('organization.date_format'))} -{' '}
+        {format(election.endDate, t('organization.date_format'))}
+      </Td>
+      <Td>
         <QuestionsTypeBadge />
-      </Box>
-      <Flex flexGrow={1} flexShrink={0} flexBasis={24}>
+      </Td>
+      <Td>
         <ElectionStatusBadge />
-      </Flex>
-      <Flex flexGrow={1} flexShrink={0} flexBasis={24} fontWeight='500'>
+      </Td>
+      <Td>
         {election.voteCount}/{election.census.size}
-      </Flex>
-    </Box>
+      </Td>
+    </>
   )
 }
 
diff --git a/src/components/Organization/Dashboard/ProcessesList.tsx b/src/components/Organization/Dashboard/ProcessesList.tsx
index 6579a72b..be618eec 100644
--- a/src/components/Organization/Dashboard/ProcessesList.tsx
+++ b/src/components/Organization/Dashboard/ProcessesList.tsx
@@ -1,9 +1,7 @@
-import { Alert, AlertDescription, Flex, Progress, Text, VStack } from '@chakra-ui/react'
+import { Table, Tbody, Th, Thead, Tr } from '@chakra-ui/react'
 import { ElectionProvider } from '@vocdoni/react-providers'
 import { InvalidElection, PublishedElection } from '@vocdoni/sdk'
 import { useTranslation } from 'react-i18next'
-import { HSeparator } from '~components/Auth/SignIn'
-import NoElections from '../NoElections'
 import ProcessCard from './ProcessCard'
 
 type Election = PublishedElection | InvalidElection
@@ -18,32 +16,17 @@ const ProcessesList = ({ loading, processes, error }: ProcessesListProps) => {
   const { t } = useTranslation()
 
   return (
-    <VStack w='full' overflowX='auto' borderRadius='lg' py={{ base: 2.5, lg: 5 }} px={{ base: 5, lg: 10 }}>
-      {loading && <Progress isIndeterminate w='full' colorScheme='primary' size='xs' />}
-      {error && (
-        <Alert>
-          <AlertDescription>{error.message.toString()}</AlertDescription>
-        </Alert>
-      )}
-      <Flex w='full' gap={5} fontSize='sm' pl={4}>
-        <Text flexGrow={1} flexShrink={0} flexBasis={48} textTransform='uppercase'>
-          {t('process_list.title', { defaultValue: 'Title' })}
-        </Text>
-        <Text flexGrow={1} flexShrink={0} flexBasis={60} textTransform='uppercase'>
-          {t('process_list.start_end_date', { defaultValue: 'Start-end date' })}
-        </Text>
-        <Text flexGrow={1} flexShrink={0} flexBasis={36} textTransform='uppercase'>
-          {t('process_list.type', { defaultValue: 'Type' })}
-        </Text>
-        <Text flexGrow={1} flexShrink={0} flexBasis={24} textTransform='uppercase'>
-          {t('process_list.status', { defaultValue: 'Status' })}
-        </Text>
-        <Text flexGrow={1} flexShrink={0} flexBasis={24} textTransform='uppercase'>
-          {t('process_list.voters', { defaultValue: 'Voters' })}
-        </Text>
-      </Flex>
-      <HSeparator />
-      <VStack w='full'>
+    <Table>
+      <Thead>
+        <Tr>
+          <Th>{t('process_list.title', { defaultValue: 'Title' })}</Th>
+          <Th>{t('process_list.start_end_date', { defaultValue: 'Start-end date' })}</Th>
+          <Th>{t('process_list.type', { defaultValue: 'Type' })}</Th>
+          <Th>{t('process_list.status', { defaultValue: 'Status' })}</Th>
+          <Th>{t('process_list.voters', { defaultValue: 'Voters' })}</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
         {processes &&
           processes.length &&
           processes?.map((election) => (
@@ -51,9 +34,8 @@ const ProcessesList = ({ loading, processes, error }: ProcessesListProps) => {
               <ProcessCard />
             </ElectionProvider>
           ))}
-        {!loading && (!processes || !processes.length) && <NoElections />}
-      </VStack>
-    </VStack>
+      </Tbody>
+    </Table>
   )
 }
 
diff --git a/src/elements/dashboard/processes/index.tsx b/src/elements/dashboard/processes/index.tsx
index 16ae649c..8aa87f1d 100644
--- a/src/elements/dashboard/processes/index.tsx
+++ b/src/elements/dashboard/processes/index.tsx
@@ -2,7 +2,6 @@ import { ElectionListWithPagination } from '@vocdoni/sdk'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useLoaderData, useOutletContext } from 'react-router-dom'
-import { DashboardContents } from '~components/Layout/Dashboard'
 import Votings from '~components/Organization/Dashboard/Votings'
 import { DashboardLayoutContext } from '~elements/LayoutDashboard'
 
@@ -17,11 +16,7 @@ const OrganizationVotings = () => {
     setBack(null)
   }, [setTitle, setBack])
 
-  return (
-    <DashboardContents>
-      <Votings data={data as ElectionListWithPagination} />
-    </DashboardContents>
-  )
+  return <Votings data={data as ElectionListWithPagination} />
 }
 
 export default OrganizationVotings
diff --git a/src/theme/components/table.ts b/src/theme/components/table.ts
new file mode 100644
index 00000000..0aa89197
--- /dev/null
+++ b/src/theme/components/table.ts
@@ -0,0 +1,27 @@
+import { tableAnatomy } from '@chakra-ui/anatomy'
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+
+const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(tableAnatomy.keys)
+
+const baseStyle = definePartsStyle((props) => ({
+  table: {
+    borderRadius: 'lg',
+    bgColor: 'white',
+    overflow: 'hidden',
+  },
+  thead: {
+    bg: 'gray.100',
+    bgColor: 'lightBlue',
+  },
+  th: {
+    textTransform: 'normal',
+    fontWeight: 600,
+    'padding-top': '160px !important',
+    textAlign: 'left',
+  },
+  td: {},
+}))
+
+export const Table = defineMultiStyleConfig({
+  baseStyle,
+})
diff --git a/src/theme/index.ts b/src/theme/index.ts
index ed0dc68e..e82b8a99 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -23,6 +23,7 @@ import { Text } from './components/text'
 import { Textarea } from './components/textarea'
 import { editor } from './editor'
 import { spacing } from './space'
+import { Table } from './components/table'
 
 export const theme = extendTheme(vtheme, {
   config: {
@@ -94,6 +95,7 @@ export const theme = extendTheme(vtheme, {
     Pagination,
     Radio,
     Stepper,
+    Table,
     Tabs,
     Text,
     Textarea,

From 5891075b9fb118fd4d1cd23eab22c46bc098109f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=92scar=20Casajuana?= <elboletaire@gmail.com>
Date: Thu, 21 Nov 2024 13:07:53 +0100
Subject: [PATCH 2/3] una empenteta

---
 src/components/Organization/Dashboard/ProcessCard.tsx | 6 +++---
 src/theme/components/table.ts                         | 8 +++++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/Organization/Dashboard/ProcessCard.tsx b/src/components/Organization/Dashboard/ProcessCard.tsx
index 234cecec..b828322e 100644
--- a/src/components/Organization/Dashboard/ProcessCard.tsx
+++ b/src/components/Organization/Dashboard/ProcessCard.tsx
@@ -1,4 +1,4 @@
-import { Td } from '@chakra-ui/react'
+import { Td, Tr } from '@chakra-ui/react'
 import { ElectionStatusBadge, ElectionTitle, QuestionsTypeBadge } from '@vocdoni/chakra-components'
 import { useElection } from '@vocdoni/react-providers'
 import { InvalidElection } from '@vocdoni/sdk'
@@ -13,7 +13,7 @@ const ProcessCard = () => {
   if (!election || election instanceof InvalidElection) return null
 
   return (
-    <>
+    <Tr>
       <Td>
         <ElectionTitle mb={0} fontSize='md' textAlign='left' fontWeight='500' isTruncated />
       </Td>
@@ -30,7 +30,7 @@ const ProcessCard = () => {
       <Td>
         {election.voteCount}/{election.census.size}
       </Td>
-    </>
+    </Tr>
   )
 }
 
diff --git a/src/theme/components/table.ts b/src/theme/components/table.ts
index 0aa89197..d2ed3104 100644
--- a/src/theme/components/table.ts
+++ b/src/theme/components/table.ts
@@ -16,12 +16,18 @@ const baseStyle = definePartsStyle((props) => ({
   th: {
     textTransform: 'normal',
     fontWeight: 600,
-    'padding-top': '160px !important',
     textAlign: 'left',
   },
   td: {},
 }))
 
+const md = definePartsStyle({
+  th: {
+    paddingTop: '160px',
+  },
+})
+
 export const Table = defineMultiStyleConfig({
   baseStyle,
+  sizes: { md },
 })

From f6e40874a1194ec4108321329fb8815fbf59d453 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=92scar=20Casajuana?= <elboletaire@gmail.com>
Date: Thu, 21 Nov 2024 13:39:58 +0100
Subject: [PATCH 3/3] Add table container

---
 .../Organization/Dashboard/ProcessesList.tsx  | 44 ++++++++++---------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/components/Organization/Dashboard/ProcessesList.tsx b/src/components/Organization/Dashboard/ProcessesList.tsx
index be618eec..f83a99db 100644
--- a/src/components/Organization/Dashboard/ProcessesList.tsx
+++ b/src/components/Organization/Dashboard/ProcessesList.tsx
@@ -1,4 +1,4 @@
-import { Table, Tbody, Th, Thead, Tr } from '@chakra-ui/react'
+import { Table, TableContainer, Tbody, Th, Thead, Tr } from '@chakra-ui/react'
 import { ElectionProvider } from '@vocdoni/react-providers'
 import { InvalidElection, PublishedElection } from '@vocdoni/sdk'
 import { useTranslation } from 'react-i18next'
@@ -16,26 +16,28 @@ const ProcessesList = ({ loading, processes, error }: ProcessesListProps) => {
   const { t } = useTranslation()
 
   return (
-    <Table>
-      <Thead>
-        <Tr>
-          <Th>{t('process_list.title', { defaultValue: 'Title' })}</Th>
-          <Th>{t('process_list.start_end_date', { defaultValue: 'Start-end date' })}</Th>
-          <Th>{t('process_list.type', { defaultValue: 'Type' })}</Th>
-          <Th>{t('process_list.status', { defaultValue: 'Status' })}</Th>
-          <Th>{t('process_list.voters', { defaultValue: 'Voters' })}</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
-        {processes &&
-          processes.length &&
-          processes?.map((election) => (
-            <ElectionProvider election={election} id={election.id} key={election.id}>
-              <ProcessCard />
-            </ElectionProvider>
-          ))}
-      </Tbody>
-    </Table>
+    <TableContainer>
+      <Table>
+        <Thead>
+          <Tr>
+            <Th>{t('process_list.title', { defaultValue: 'Title' })}</Th>
+            <Th>{t('process_list.start_end_date', { defaultValue: 'Start-end date' })}</Th>
+            <Th>{t('process_list.type', { defaultValue: 'Type' })}</Th>
+            <Th>{t('process_list.status', { defaultValue: 'Status' })}</Th>
+            <Th>{t('process_list.voters', { defaultValue: 'Voters' })}</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {processes &&
+            processes.length &&
+            processes?.map((election) => (
+              <ElectionProvider election={election} id={election.id} key={election.id}>
+                <ProcessCard />
+              </ElectionProvider>
+            ))}
+        </Tbody>
+      </Table>
+    </TableContainer>
   )
 }