diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/admin/AccountList.tsx')
| -rw-r--r-- | packages/demobank-ui/src/pages/admin/AccountList.tsx | 182 |
1 files changed, 115 insertions, 67 deletions
diff --git a/packages/demobank-ui/src/pages/admin/AccountList.tsx b/packages/demobank-ui/src/pages/admin/AccountList.tsx index 56b15818b..56d9c45f9 100644 --- a/packages/demobank-ui/src/pages/admin/AccountList.tsx +++ b/packages/demobank-ui/src/pages/admin/AccountList.tsx @@ -9,10 +9,10 @@ interface Props { onAction: (type: AccountAction, account: string) => void; account: string | undefined; onRegister: () => void; - + onCreateAccount: () => void; } -export function AccountList({ account, onAction, onRegister }: Props): VNode { +export function AccountList({ account, onAction, onCreateAccount, onRegister }: Props): VNode { const result = useBusinessAccounts({ account }); const { i18n } = useTranslationContext(); @@ -22,48 +22,60 @@ export function AccountList({ account, onAction, onRegister }: Props): VNode { } const { customers } = result.data; - return <section - id="main" - style={{ width: 600, marginLeft: "auto", marginRight: "auto" }} - > - {!customers.length ? ( - <div></div> - ) : ( - <article> - <h2>{i18n.str`Accounts:`}</h2> - <div class="results"> - <table class="pure-table pure-table-striped"> - <thead> - <tr> - <th>{i18n.str`Username`}</th> - <th>{i18n.str`Name`}</th> - <th>{i18n.str`Balance`}</th> - <th>{i18n.str`Actions`}</th> - </tr> - </thead> - <tbody> - {customers.map((item, idx) => { - const balance = !item.balance - ? undefined - : Amounts.parse(item.balance.amount); - const balanceIsDebit = - item.balance && - item.balance.credit_debit_indicator == "debit"; - return ( - <tr key={idx}> - <td> - <a - href="#" - onClick={(e) => { - e.preventDefault(); - onAction("show-details", item.username) - }} - > - {item.username} - </a> + return <div class="px-4 sm:px-6 lg:px-8"> + <div class="sm:flex sm:items-center"> + <div class="sm:flex-auto"> + <h1 class="text-base font-semibold leading-6 text-gray-900"> + <i18n.Translate>Accounts</i18n.Translate> + </h1> + <p class="mt-2 text-sm text-gray-700"> + <i18n.Translate>A list of all business account in the bank.</i18n.Translate> + </p> + </div> + <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none"> + <button type="button" class="block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" + onClick={(e) => { + e.preventDefault() + onCreateAccount() + }}> + <i18n.Translate>Create account</i18n.Translate> + </button> + </div> + </div> + <div class="mt-8 flow-root"> + <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> + <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> + {!customers.length ? ( + <div></div> + ) : ( + <table class="min-w-full divide-y divide-gray-300"> + <thead> + <tr> + <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0">{i18n.str`Username`}</th> + <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">{i18n.str`Name`}</th> + <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">{i18n.str`Balance`}</th> + <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-0"> + <span class="sr-only">{i18n.str`Actions`}</span> + </th> + </tr> + </thead> + <tbody class="divide-y divide-gray-200"> + {customers.map((item, idx) => { + const balance = !item.balance + ? undefined + : Amounts.parse(item.balance.amount); + const balanceIsDebit = + item.balance && + item.balance.credit_debit_indicator == "debit"; + + return <tr key={idx}> + <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0"> + {item.username} </td> - <td>{item.name}</td> - <td> + <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"> + {item.name} + </td> + <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"> {!balance ? ( i18n.str`unknown` ) : ( @@ -77,9 +89,8 @@ export function AccountList({ account, onAction, onRegister }: Props): VNode { </span> )} </td> - <td> - <a - href="#" + <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0"> + <a href="#" class="text-indigo-600 hover:text-indigo-900" onClick={(e) => { e.preventDefault(); onAction("update-password", item.username) @@ -87,34 +98,71 @@ export function AccountList({ account, onAction, onRegister }: Props): VNode { > change password </a> - - <a - href="#" - onClick={(e) => { - e.preventDefault(); - onAction("show-cashout", item.username) - }} + <br/> + <a href="#" class="text-indigo-600 hover:text-indigo-900" onClick={(e) => { + e.preventDefault(); + onAction("show-cashout", item.username) + }} > cashouts </a> - - <a - href="#" - onClick={(e) => { - e.preventDefault(); - onAction("remove-account", item.username) - }} + <br/> + <a href="#" class="text-indigo-600 hover:text-indigo-900" onClick={(e) => { + e.preventDefault(); + onAction("remove-account", item.username) + }} > remove </a> </td> </tr> - ); - })} - </tbody> - </table> + })} + + {/* <!-- More people... --> */} + </tbody> + </table> + )} </div> - </article> - )} - </section> + </div> + </div> + </div> + + // return <section + // id="main" + // style={{ width: 600, marginLeft: "auto", marginRight: "auto" }} + // > + // <article> + // <h2>{i18n.str`Accounts:`}</h2> + // <div class="results"> + // <table class="pure-table pure-table-striped"> + // <tbody> + // return ( + // <tr key={idx}> + // <td> + // <a + // href="#" + // onClick={(e) => { + // e.preventDefault(); + // onAction("show-details", item.username) + // }} + // > + // {item.username} + // </a> + // </td> + // <td>{item.name}</td> + // <td> + // + // </td> + // <td> + + // </td> + // </tr> + // ); + // })} + // </tbody> + // </table> + // </div> + // </article> + // )} + // </section> }
\ No newline at end of file |