From b8d24732862f80197afaeac7c378117b9aa728b2 Mon Sep 17 00:00:00 2001
From: Leonardo Robol <leo@robol.it>
Date: Tue, 3 Dec 2024 12:01:06 +0100
Subject: [PATCH] Modifiche stilistiche varie.

---
 app/components/Balance.tsx      |   2 +-
 app/components/Credit.tsx       |   2 +-
 app/components/Headers.tsx      | 100 +++++++++++++++++---------------
 app/components/Loading.tsx      |   2 +-
 app/components/Transactions.tsx |  28 ++++-----
 app/globals.css                 |   6 ++
 app/page.tsx                    |   2 +-
 arduino/esp-caffe/esp-caffe.ino |   2 +-
 8 files changed, 78 insertions(+), 66 deletions(-)

diff --git a/app/components/Balance.tsx b/app/components/Balance.tsx
index adfcc46..d91bdcc 100644
--- a/app/components/Balance.tsx
+++ b/app/components/Balance.tsx
@@ -19,7 +19,7 @@ export default function Balance() {
     if (loading) return <Loading />
     if (error) return <Error error={error}/>
     return <div>
-      <p>Bilancio complessivo: <Amount prefix="€" cents={data.balance.cents}/>, caffé: <b>{data.balance.count}</b></p>
+      <p>Bilancio: <Amount prefix="€" cents={data.balance.cents}/> (<b>{data.balance.count}</b> caffè)</p>
     </div>
   }
   
diff --git a/app/components/Credit.tsx b/app/components/Credit.tsx
index d44af87..0248d43 100644
--- a/app/components/Credit.tsx
+++ b/app/components/Credit.tsx
@@ -17,7 +17,7 @@ export default function Credit() {
     if (loading) return <Loading />
     if (error) return <Error error={error}/>
     return <div>
-      <p>Il tuo credito: <Amount prefix="€" cents={data.credit.cents}/>, caffé: <b>{data.credit.count}</b></p>
+      <p>Credito: <Amount prefix="€" cents={data.credit.cents}/> (<b>{data.credit.count}</b> caffè)</p>
     </div>
   }
   
diff --git a/app/components/Headers.tsx b/app/components/Headers.tsx
index a038da6..1d90879 100644
--- a/app/components/Headers.tsx
+++ b/app/components/Headers.tsx
@@ -18,7 +18,7 @@ export default function Headers() {
     const isAdmin = profile?.admin;
 
     const navigation: { name: string, href: string, current: boolean }[] = [
-        { name: 'caffé', href: '/', current: current_path === '/' },
+        { name: 'caffè', href: '/', current: current_path === '/' },
     ]
 
     if (profile && !profile.code) {
@@ -32,60 +32,35 @@ export default function Headers() {
         
     // see: https://tailwindui.com/components/application-ui/navigation/navbars
 
-    return <Disclosure as="nav" className="bg-gray-200">
-        <div className="mx-1 flex items-stretch">
-            <div>
-                dm-coffee
-                <span className="mx-1 text-[10px]">
-                    {package_json.version}
-                </span>
-            </div>
-            <div className="px-4"></div>
-            <div> {/* perché non viene allineato a destra?!? */}
-                { 
-                    session?.user?.email && 
-                        <i>{session?.user?.email}</i>
-                }
-            </div>
-        </div>
-        <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
-        <div className="relative flex h-16 items-center justify-between">
-            <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
+    return <Disclosure as="nav" className="bg-gray-100 drop-shadow lg:rounded-b-lg lg:px-4 md:pb-3">
+        <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">
             {/* Mobile menu button*/}
             <DisclosureButton className="group relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
-                <span className="absolute -inset-0.5" />
+                <span className="-inset-0.5" />
                 <span className="sr-only">Open main menu</span>
                 <Bars3Icon aria-hidden="true" className="block size-6 group-data-[open]:hidden" />
                 <XMarkIcon aria-hidden="true" className="hidden size-6 group-data-[open]:block" />
             </DisclosureButton>
+            </div>            
             </div>
-            <div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
-            <div className="flex shrink-0 items-center">
-                <span className="h-10 w-auto text-lg">
-                    ☕
+            <div className="flex">
+                <span className="h-10 w-auto text-4xl text-lg mr-2 hidden md:block">
+                    ☕ 
+                </span>
+                <div className='h-8 mt-1'>
+                    <span className=''>dm-coffee <br></br></span>
+                    <span className="text-[10px] block">
+                    v{package_json.version}
                 </span>
-            </div>
-            <div className="hidden sm:ml-6 sm:block">
-                <div className="flex space-x-4">
-                {navigation.map((item) => (
-                    <a
-                    key={item.name}
-                    href={item.href}
-                    aria-current={item.current ? 'page' : undefined}
-                    className={classNames(
-                        item.current ? 'bg-myBlue text-white' : 'text-myBlue-dark hover:text-white',
-                        'hover:bg-myBlue-light rounded-md px-3 py-2 text-sm font-medium',
-                    )}
-                    >
-                    {item.name}
-                    </a>
-                ))}
                 </div>
+                
             </div>
-            </div>
-            <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
+            <div className='flex-1'></div>
+            <div className="mt-1">
             {/* Profile dropdown */}
-            <Menu as="div" className="relative ml-3">
+            <Menu as="div" className="relative ml-1">
                 <div>
                 <MenuButton className="relative flex rounded-full bg-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
                     <span className="absolute -inset-1.5" />
@@ -94,16 +69,28 @@ export default function Headers() {
                         ? <img
                             alt=""
                             src={session.user.image}
-                            className="size-8 rounded-full"
+                            className="size-10 rounded-full"
                             />
                         : <UserIcon className="size-8 rounded-full" />
                         }
+                 {        
+                    session?.user?.name && 
+                    <div className='align-left'>
+                        <p className="text-left pl-2 text-sm m-auto block">{session?.user?.name}</p>
+                        <p className="text-left text-gray-700 pl-2 text-sm m-auto block">{session?.user?.email}</p>
+                    </div>
+                }
                 </MenuButton>
                 </div>
                 <MenuItems
                 transition
-                className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 transition focus:outline-none data-[closed]:scale-95 data-[closed]:transform data-[closed]:opacity-0 data-[enter]:duration-100 data-[leave]:duration-75 data-[enter]:ease-out data-[leave]:ease-in"
+                className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-0 shadow-lg ring-1 ring-black/5 transition focus:outline-none data-[closed]:scale-95 data-[closed]:transform data-[closed]:opacity-0 data-[enter]:duration-100 data-[leave]:duration-75 data-[enter]:ease-out data-[leave]:ease-in"
                 >
+                <MenuItem>{ 
+                    session?.user?.email && 
+                        <p className="border-b-2 border-gray-500 bg-gray-200 font-bold block px-4 py-2 text-sm">{session?.user?.email}</p>
+                }
+                </MenuItem>
                 <MenuItem>
                     <a
                     href="/pairing"
@@ -145,7 +132,26 @@ export default function Headers() {
             </Menu>
             </div>
         </div>
-        </div>
+        
+        <div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
+                <div className="hidden ml-5 sm:block">
+                    <div className="flex space-x-2">
+                    {navigation.map((item) => (
+                        <a
+                        key={item.name}
+                        href={item.href}
+                        aria-current={item.current ? 'page' : undefined}
+                        className={classNames(
+                            item.current ? 'bg-myBlue text-white' : 'text-myBlue-dark hover:text-white',
+                            'hover:bg-myBlue-light rounded-md px-3 py-2 text-sm font-medium',
+                        )}
+                        >
+                        {item.name}
+                        </a>
+                    ))}
+                    </div>
+                </div>
+            </div>
 
         <DisclosurePanel className="sm:hidden">
         <div className="space-y-1 px-2 pb-3 pt-2">
diff --git a/app/components/Loading.tsx b/app/components/Loading.tsx
index c936f1a..9f6e60d 100644
--- a/app/components/Loading.tsx
+++ b/app/components/Loading.tsx
@@ -1,5 +1,5 @@
 export default function Loading() {
-    return "..."
+    return <span>...</span>
 }
   
   
\ No newline at end of file
diff --git a/app/components/Transactions.tsx b/app/components/Transactions.tsx
index 53c971b..8f1eff3 100644
--- a/app/components/Transactions.tsx
+++ b/app/components/Transactions.tsx
@@ -22,27 +22,27 @@ export default function Transactions() {
     if (loading) return <Loading />
     if (error) return <Error error={error} />
   
-    return <table className="table-auto">
-        <thead>
+    return <><table className="border-0 lg:rounded-lg mt-2 table-auto overflow-x-auto shadow-md text-align-left">
+        <thead className='border-t-2 border-gray-300 text-xs text-gray-700 uppercase bg-gray-100 dark:bg-gray-700 dark:text-gray-400 text-align-left'>
           <tr>
-            <th colSpan={2}>quando</th>
-            <th>#</th>
-            <th>€</th>
-            <th>descrizione</th>
-            <th>tessera</th>
+            <th scope="col" className="text-left px-6 py-3">quando</th>
+            <th scope="col" className="text-right px-6 py-3">#</th>
+            <th scope="col" className="text-right px-6 py-3">€</th>
+            <th scope="col" className="text-left px-6 py-3">descrizione</th>
+            <th scope="col" className="text-left px-6 py-3">tessera</th>
           </tr>
         </thead>
         <tbody>{data.myTransactions.map((transaction: any, i: number) => 
-            <tr key={i}>
-              <td className="text-sm">{myDate(transaction.timestamp)}</td>
-              <td className="text-sm">{myTime(transaction.timestamp)}</td>
-              <td align="right">{transaction.count || ""}</td>
-              <td align="right"><Amount cents={transaction.amountCents}/></td> 
-              <td><i>{transaction.description}</i></td>
-              <td className="text-sm">{transaction.code||''}</td>
+            <tr className="border-0 odd:bg-white odd:dark:bg-gray-900 even:bg-gray-100 even:dark:bg-gray-800 border-b dark:border-gray-700" key={i}>
+              <td className="border-0 text-sm px-6 py-4">{myDate(transaction.timestamp)} {myTime(transaction.timestamp)}</td>
+              <td className="border-0 text-sm px-6 py-4" align="right">{transaction.count || ""}</td>
+              <td className="border-0 text-sm px-6 py-4" align="right"><Amount cents={transaction.amountCents}/></td> 
+              <td className="border-0 text-sm px-6 py-4">{transaction.description}</td>
+              <td className="border-0 text-sm px-6 py-4">{transaction.code||''}</td>
             </tr>
           )}
         </tbody>
       </table>
+      </>
   }
 
diff --git a/app/globals.css b/app/globals.css
index 6ed65f2..66f6720 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -44,4 +44,10 @@ table td {
 a {
   color: blue;
   text-decoration: none;
+}
+
+body {
+  margin: 0;
+  margin-left: auto;
+  margin-right: auto;
 }
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index cc6d600..01bc4d1 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -16,8 +16,8 @@ export default function Home() {
 function Dashboard() {
   return <main>
     <CoffeeForm />
-    <Balance />
     <Credit />
+    <Balance />
     <Transactions />
   </main>
 }
diff --git a/arduino/esp-caffe/esp-caffe.ino b/arduino/esp-caffe/esp-caffe.ino
index cda254c..ab7d88b 100644
--- a/arduino/esp-caffe/esp-caffe.ino
+++ b/arduino/esp-caffe/esp-caffe.ino
@@ -15,7 +15,7 @@ extern "C" {
 }
 
 #define SS_PIN D8
-#define RST_PIN D3
+#define RST_PIN 0
 
 #define API_URL "https://coffee.dm.unipi.it/graphql"
 #define LCD_TIMEOUT 5000