Completato styling tabelle.

app/admin/cost/page.tsx

@@ -6,6 +6,11 @@ import Loading from '../../components/Loading'
 import Error from '../../components/Error'
 import SetCost from '../../components/SetCost'
 import {myDate, myTime} from '../../utils'
+import Table from '../../components/Table'
+import Thead from '@/app/components/Thead'
+import Td from '@/app/components/Td'
+import Th from '@/app/components/Th'
+import Tr from '@/app/components/Tr'
 
 export default function CostPage({}) {
     return <Provider>
@@ -35,24 +40,23 @@ function CostHistory() {
     return <>
         <p>Costo attuale: <b>{(dataCost.cost/100).toFixed(2)}€</b></p>
         <SetCost value={dataCost.cost}/>
-      <table>
-        <thead>
+      <Table>
+        <Thead>
             <tr>
-                <th colSpan={2}>data</th>
-                <th>€</th>
+                <Th className="text-left">data</Th>
+                <Th className="text-right">€</Th>
             </tr>
-        </thead>
+        </Thead>
         <tbody>
             {dataHistory.costHistory.map(({timestamp,cents}: {
                   timestamp: string, 
                   cents: number}) => 
-                <tr key={timestamp}>
-                    <td>{myDate(timestamp)}</td>
-                    <td>{myTime(timestamp)}</td>
-                    <td align="right">{(cents/100).toFixed(2)}€</td>
-                </tr>
+                <Tr key={timestamp}>
+                    <Td>{myDate(timestamp)} {myTime(timestamp)}</Td>
+                    <Td className="text-right">{(cents/100).toFixed(2)}€</Td>
+                </Tr>
             )}
         </tbody>
-      </table>
+      </Table>
     </>
 }

app/admin/import/page.tsx

@@ -8,6 +8,11 @@ import Button from '../../components/Button'
 import Loading from '../../components/Loading'
 import Error from '../../components/Error'
 import { myDate } from '../../utils'
+import Table from '@/app/components/Table'
+import Thead from '@/app/components/Thead'
+import Th from '@/app/components/Th'
+import Tr from '@/app/components/Tr'
+import Td from '@/app/components/Td'
 
 const SAVE_TRANSACTION = gql`
   mutation SaveTransaction($_id: String, $timestamp: String, $email: String, $count: Int, $amountCents: Int, $description: String) {
@@ -131,17 +136,17 @@ function ImportWidget() {
             Carica dati "valid" dalla tabella
         </Button>}
         <div className="my-2"/>
-        <table>
-            <thead>
+        <Table>
+            <Thead>
                 <tr>
-                    <th>state</th>
-                    <th>timestamp</th>
-                    <th>count</th>
-                    <th>amountCents</th>
-                    <th>email</th>
-                    <th>description</th>
+                    <Th>state</Th>
+                    <Th>timestamp</Th>
+                    <Th>count</Th>
+                    <Th>amountCents</Th>
+                    <Th>email</Th>
+                    <Th>description</Th>
                     {Array.from({length: ncols}, (_,i) => i).map(i => 
-                        <th key={i}>
+                        <Th key={i}>
                             <select value={
                                 (Object.entries(mapping)
                                     .filter(([h,n]) => n===i)[0]||[''])[0]
@@ -156,25 +161,25 @@ function ImportWidget() {
                                     <option key={h} value={h}>{h}</option>
                                 )}
                             </select>
-                        </th>)}
+                        </Th>)}
                 </tr>
-            </thead>
+            </Thead>
             <tbody>
                 {table.map((row, i)=> ({row, i, parse: parseRow(mapping, row.cols, COST)})).map(item => 
-                    <tr key={item.i}>
-                        <td className={"bg-gray-300 " + (item.row.state || item.parse.error ? (item.row.state==="imported" ? "text-blue-500" : "text-red-500") : "text-green-500")}>{item.row.state || item.parse.error || 'valid'}</td>
-                        <td>{new Date(item.parse.timestamp||'').toLocaleString()}</td>
-                        <td>{item.parse.count}</td>
-                        <td>{item.parse.amountCents}</td>
-                        <td>{item.parse.email}</td>
-                        <td>{item.parse.description}</td>
+                    <Tr key={item.i}>
+                        <Td className={"bg-gray-300 " + (item.row.state || item.parse.error ? (item.row.state==="imported" ? "text-blue-500" : "text-red-500") : "text-green-500")}>{item.row.state || item.parse.error || 'valid'}</Td>
+                        <Td>{new Date(item.parse.timestamp||'').toLocaleString()}</Td>
+                        <Td>{item.parse.count}</Td>
+                        <Td>{item.parse.amountCents}</Td>
+                        <Td>{item.parse.email}</Td>
+                        <Td>{item.parse.description}</Td>
                         {item.row.cols.map((cell, j) => 
-                            <td className="bg-gray-300" key={j}>{cell}</td>
+                            <Td className="bg-gray-300" key={j}>{cell}</Td>
                         )}
-                    </tr>
+                    </Tr>
                 )}
             </tbody>
-        </table>
+        </Table>
     </>
 
     function importData(incoming_data: string) {

app/admin/page.tsx

@@ -9,6 +9,11 @@ import Loading from '../components/Loading'
 import Error from '../components/Error'
 import Amount from '../components/Amount'
 import { myDate, myTime } from '../utils'
+import Table from '../components/Table'
+import Thead from '../components/Thead'
+import Tr from '../components/Tr'
+import Td from '../components/Td'
+import Th from '../components/Th'
 
 export default function Admin({}) {
     return <Provider>
@@ -53,33 +58,33 @@ function Transactions() {
           modifica
           </a>}
         </div>
-      <table>
-      <thead>
+      <Table>
+      <Thead>
         <tr>
-          <th colSpan={2}>
+          <Th className="text-left">
             data
-          </th>
-          <th>
+          </Th>
+          <Th className="text-left">
             email
-          </th>
-          <th>
+          </Th>
+          <Th className="text-right">
             #
-          </th>
-          <th>
+          </Th>
+          <Th className="text-right">
             €
-          </th>
-          <th>
+          </Th>
+          <Th className="text-left">
             description
-          </th>
+          </Th>
         </tr>
-      </thead>
+      </Thead>
       <tbody>
         {edit && <TransactionRow edit={edit}/>}
         {data.transactions.map((transaction: Transaction) => 
           <TransactionRow key={transaction._id} transaction={transaction} edit={edit}/>
         )}
       </tbody>
-    </table>
+    </Table>
     </>
 }
 
@@ -108,26 +113,25 @@ function TransactionRow({transaction, edit}:{
     refetchQueries: ["GetTransactions"]})
   const date = transaction ? timestamp : new Date().toISOString()
 
-  return <tr>
-    <td>{myDate(date)}</td>
-    <td>{myTime(date)}</td>
-    <td>{transaction && !editing 
+  return <Tr>
+    <Td>{myDate(date)} {myTime(date)}</Td>
+    <Td>{transaction && !editing 
       ? originalEmail
       : <input type="email" placeholder="email" value={newEmail} onChange={e => setEmail(e.target.value)} />}
-    </td>
-    <td align="right">{transaction && !editing 
+    </Td>
+    <Td className="text-right">{transaction && !editing 
       ? (originalCount || '')
       : <input type="number" placeholder="count" value={newCount || ''} size={4} onChange={e => setCount(parseInt(e.target.value) || 0)} />}
-    </td>
-    <td align="right">{transaction && !editing 
+    </Td>
+    <Td className="text-right">{transaction && !editing 
       ? <Amount cents={originalAmount}/>
       : <input type="number" placeholder="cents" value={newAmount || ''} onChange={e => setAmount(parseInt(e.target.value))} />}
-    </td>
-    <td>{transaction && !editing ?originalDescription
+    </Td>
+    <Td>{transaction && !editing ?originalDescription
     :<input type="text" placeholder="description" value={newDescription} onChange={e => setDescription(e.target.value)} />}
-    </td>
+    </Td>
     {edit && 
-      <td>{modified && 
+      <Td>{modified && 
         <button className="text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800"
           disabled={transactionMutation.loading}
           onClick={save}>
@@ -143,9 +147,9 @@ function TransactionRow({transaction, edit}:{
           onClick={e => setEditing(true)}>
           <PencilIcon className="h-5 w-5"/>
         </button>}
-      </td>
+      </Td>
     }
-  </tr>
+  </Tr>
 
   function cancel() {
     setEmail(originalEmail)

app/admin/users/page.tsx

@@ -7,6 +7,11 @@ import Loading from '../../components/Loading'
 import Error from '../../components/Error'
 import Amount from '../../components/Amount'
 import {myDate, myTime} from '../../utils'
+import Table from '@/app/components/Table'
+import Thead from '@/app/components/Thead'
+import Th from '@/app/components/Th'
+import Tr from '@/app/components/Tr'
+import Td from '@/app/components/Td'
 
 export default function UsersPage({}) {
     return <Provider>
@@ -29,25 +34,25 @@ function Users() {
     if (loading) return <Loading />
     if (error) return <Error error={error}/>
     return <>
-      <table>
-        <thead>
+      <Table>
+        <Thead>
             <tr>
-                <th>email</th>
-                <th>#</th>
-                <th>€</th>
-                <th>data</th>
+                <Th className="text-left">email</Th>
+                <Th className="text-right">#</Th>
+                <Th className="text-right">€</Th>
+                <Th className="text-left">data</Th>
             </tr>
-        </thead>
+        </Thead>
         <tbody>
             {data.users.map((user: any, i: number) => 
-                <tr key={i}>
-                    <td>{user.email}</td>
-                    <td align="right">{user.count||""}</td>
-                    <td align="right"><Amount cents={user.creditCents}/></td>
-                    <td align="right">{myDate(user.timestamp)}</td>
-                </tr>
+                <Tr key={i}>
+                    <Td>{user.email}</Td>
+                    <Td className="text-right">{user.count||""}</Td>
+                    <Td className="text-right"><Amount cents={user.creditCents}/></Td>
+                    <Td className="text-left">{myDate(user.timestamp)}</Td>
+                </Tr>
             )}
         </tbody>
-      </table>
+      </Table>
     </>
 }

app/components/Headers.tsx

@@ -32,7 +32,7 @@ export default function Headers() {
 
     // see: https://tailwindui.com/components/application-ui/navigation/navbars
 
-    return <Disclosure as="nav" className="bg-gray-100 drop-shadow lg:rounded-b-lg lg:px-4 md:pb-3">
+    return <Disclosure as="nav" className="bg-gray-100 drop-shadow lg:rounded-b-lg lg:px-4 md:pb-3 mb-5">
         <div className="mx-1 p-3 lg:px-2 flex items-stretch justify-between space-x-3">
         <div className="flex justify-center sm:hidden">
             <div className="items-center my-2">

app/pairing/page.tsx

@@ -28,11 +28,15 @@ function Pairing({}) {
     const profile = useProfile()
     const [ removePairing, {}] = useMutation(REMOVE_PAIRING, {refetchQueries: ["GetProfile"]}) 
     if (profile?.code) {
-      return <div>Hai associato la tessera {profile.code}. <Button variant="alert" onClick={removePairing}>disaccoppia!</Button></div>
+      return <>
+        <h2 className="mt-2">Tessera associata</h2>
+        <div>Hai associato la tessera <span className="font-bold">{profile.code}</span>. <Button variant="alert" onClick={removePairing}>Rimuovi associazione</Button></div>
+      </>
     } else return <PairingRequest />
 }
 
 function PairingRequest({}) {
+    const profile = useProfile()
     const [submitPairing, {loading, error, data}] = useMutation(REQUEST_PAIRING,{
       onCompleted: completed})
     const [countdown, setCountdown] = useState(0)
@@ -43,12 +47,13 @@ function PairingRequest({}) {
       return <p>Passa la tessera sul lettore entro <b>{countdown}</b> secondi!</p>
     }
     return <>
-      <p>Non hai associato nessuna tessera.</p>
-      <p>Se hai una tessera e sei in sala caffé premi il pulsante {}
-      <Button onClick={() => submitPairing()}>
-        associazione tessera
-      </Button> 
-      </p>
+      <h2 className="mt-2">Associare una nuova tessera</h2>
+      <p>Puoi associare una nuova tessera al tuo account seguendo queste istruzioni:</p>
+      <ul>
+        <li className="ml-4 my-2">1. Recati in Sala Caffè</li>
+        <li className="ml-4 my-2">2. Premi il pulsante <Button onClick={() => submitPairing()}>associazione tessera</Button></li>
+        <li className="ml-4 my-2">3. Passa la tessera sul lettore per associarla.</li>
+      </ul>
     </>
 
     function completed(data: {card_request_pairing: number}) {