coloring balance

app/admin/page.tsx

@@ -7,6 +7,7 @@ import Provider from '../components/Provider'
 import Balance from '../components/Balance'
 import Loading from '../components/Loading'
 import Error from '../components/Error'
+import Amount from '../components/Amount'
 import { myDate, myTime } from '../utils'
 
 export default function Admin({}) {
@@ -114,11 +115,13 @@ function TransactionRow({transaction, edit}:{
       ? originalEmail
       : <input type="email" placeholder="email" value={newEmail} onChange={e => setEmail(e.target.value)} />}
     </td>
-    <td>{transaction && !editing ? originalCount
-      :<input type="number" placeholder="count" value={newCount || ''} size={4} onChange={e => setCount(parseInt(e.target.value) || 0)} />}
+    <td align="right">{transaction && !editing 
+      ? (originalCount || '')
+      : <input type="number" placeholder="count" value={newCount || ''} size={4} onChange={e => setCount(parseInt(e.target.value) || 0)} />}
     </td>
-    <td>{transaction && !editing ?(`${(originalAmount/100).toFixed(2)}€`)
-      :<input type="number" placeholder="cents" value={newAmount || ''} onChange={e => setAmount(parseInt(e.target.value))} />}
+    <td align="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
     :<input type="text" placeholder="description" value={newDescription} onChange={e => setDescription(e.target.value)} />}

app/admin/users/page.tsx

@@ -5,6 +5,7 @@ import { useState } from 'react'
 import Provider from '../../components/Provider'
 import Loading from '../../components/Loading'
 import Error from '../../components/Error'
+import Amount from '../../components/Amount'
 import {myDate, myTime} from '../../utils'
 
 export default function UsersPage({}) {
@@ -41,8 +42,8 @@ function Users() {
             {data.users.map((user: any, i: number) => 
                 <tr key={i}>
                     <td>{user.email}</td>
-                    <td align="right">{user.count}</td>
-                    <td align="right">{(user.creditCents/100).toFixed(2)}€</td>
+                    <td align="right">{user.count||""}</td>
+                    <td align="right"><Amount cents={user.creditCents}/></td>
                     <td align="right">{myDate(user.timestamp)}</td>
                 </tr>
             )}

app/components/Amount.tsx

@@ -0,0 +1,6 @@
+export default function Amount({cents,prefix}:{
+    cents:number,
+    prefix?:string
+}) {
+    return <b className={cents<0?"text-red-500":"text-blue-500"}>{prefix} {(cents/100).toFixed(2)}</b>
+}

app/components/Balance.tsx

@@ -2,6 +2,7 @@ import { useQuery, gql } from '@apollo/client'
 
 import Loading from './Loading'
 import Error from './Error'
+import Amount from './Amount'
 
 const GET_BALANCE = gql`
   query GetBalance {
@@ -18,7 +19,7 @@ export default function Balance() {
     if (loading) return <Loading />
     if (error) return <Error error={error}/>
     return <div>
-      <p>Bilancio complessivo: € {(data.balance.cents / 100).toFixed(2)} per {data.balance.count} caffé</p>
+      <p>Bilancio complessivo: <Amount prefix="€" cents={data.balance.cents}/> per <b>{data.balance.count}</b> caffé</p>
     </div>
   }
 

app/components/Credit.tsx

@@ -2,6 +2,7 @@ import { useQuery, gql } from '@apollo/client'
 
 import Loading from './Loading'
 import Error from './Error'
+import Amount from './Amount'
 
 const GET_CREDIT = gql`
   query GetCredit {
@@ -16,7 +17,7 @@ export default function Credit() {
     if (loading) return <Loading />
     if (error) return <Error error={error}/>
     return <div>
-      <p>Il tuo credito: € {(data.credit.cents / 100).toFixed(2)}, caffé: {data.credit.count}</p>
+      <p>Il tuo credito: <Amount prefix="€" cents={data.credit.cents}/>, caffé: {data.credit.count}</p>
     </div>
   }
 

app/components/Transactions.tsx

@@ -2,6 +2,7 @@ import { gql, useQuery } from '@apollo/client'
 
 import Loading from './Loading'
 import Error from './Error'
+import Amount from './Amount'
 import { myDate, myTime } from '../utils'
 
 const GET_MY_TRANSACTIONS = gql`
@@ -36,7 +37,7 @@ export default function Transactions() {
               <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"><b>{(transaction.amountCents/100).toFixed(2)}</b></td> 
+              <td align="right"><Amount cents={transaction.amountCents}/></td> 
               <td><i>{transaction.description}</i></td>
               <td className="text-sm">{transaction.code||''}</td>
             </tr>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dm-coffee",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "private": true,
   "scripts": {
     "dev": "next dev",