API tools faq
paste
Advertisement
stronk_8s

Untitled

stronk_8s
Jun 5th, 2025
317
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.19 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml"
  3.      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
  4.      xmlns:h="http://xmlns.jcp.org/jsf/html"
  5.      xmlns:p="http://primefaces.org/ui"
  6.      xmlns:f="http://xmlns.jcp.org/jsf/core">
  7. <h:head>
  8. <style>
  9. /* Card Styles */
  10. .card {
  11.     background-color: #ffffff;
  12.     border-radius: 10px;
  13.     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  14.     padding: 1.5rem;
  15.     margin-bottom: 1.5rem;
  16. }
  17.  
  18. .card-header {
  19.     display: flex;
  20.     justify-content: space-between;
  21.     align-items: center;
  22.     margin-bottom: 1rem;
  23. }
  24.  
  25. .card-title {
  26.     font-size: 1.2rem;
  27.     font-weight: 600;
  28.     color: #4a5568;
  29. }
  30. /*.card-title {*/
  31. /*     font-size: 0.9rem;*/
  32. /*     color: #6c757d;*/
  33. /*     text-transform: uppercase;*/
  34. /*     font-weight: 600;*/
  35. /* }*/
  36.  
  37.  
  38. .card-icon {
  39.     width: 40px;
  40.     height: 40px;
  41.     border-radius: 50%;
  42.     display: flex;
  43.     align-items: center;
  44.     justify-content: center;
  45. }
  46.  
  47. /*.card-icon {*/
  48. /*    font-size: 1.8rem;*/
  49. /*    margin-right: 1rem;*/
  50. /*    width: 50px;*/
  51. /*    height: 50px;*/
  52. /*    border-radius: 50%;*/
  53. /*    display: flex;*/
  54. /*    align-items: center;*/
  55. /*    justify-content: center;*/
  56. /*}*/
  57.  
  58. .card-icon.income {
  59.     background-color: #e9f7ef;
  60.     color: #38a169;
  61. }
  62.  
  63. .card-value {
  64.     font-size: 1.8rem;
  65.     font-weight: 700;
  66.     color: #2d3748;
  67.     margin-bottom: 0.5rem;
  68. }
  69.  
  70.  
  71. /* Form Styles */
  72. .form-grid {
  73.     display: grid;
  74.     grid-template-columns: 1fr;
  75.     gap: 1rem;
  76. }
  77.  
  78. @media (min-width: 768px) {
  79.     .form-grid {
  80.         grid-template-columns: 1fr 1fr;
  81.     }
  82. }
  83.  
  84. .form-field {
  85.     margin-bottom: 1.25rem;
  86. }
  87.  
  88. .form-field label {
  89.     display: block;
  90.     margin-bottom: 0.5rem;
  91.     font-weight: 600;
  92.     color: #4a5568;
  93. }
  94.  
  95. /* Button Styles */
  96. .action-buttons {
  97.     display: flex;
  98.     justify-content: flex-end;
  99.     margin-top: 1rem;
  100.     gap: 0.5rem;
  101. }
  102.  
  103. /* Table Styles */
  104. .table-actions {
  105.     display: flex;
  106.     gap: 0.5rem;
  107. }
  108.  
  109. .income-table .p-datatable-thead th {
  110.     background-color: #f8f9fa;
  111.     font-weight: 600;
  112. }
  113.  
  114. .income-table .p-datatable-tbody td {
  115.     vertical-align: middle;
  116. }
  117. .cancel-btn {
  118.     background: #f8f9fa !important;
  119.     border: 1px solid #dee2e6 !important;
  120.     color: #495057 !important;
  121.     transition: all 0.3s ease;
  122. }
  123.  
  124. .cancel-btn:hover {
  125.     background: #e9ecef !important;
  126.     border-color: #ced4da !important;
  127. }
  128.  
  129. .cancel-btn:focus {
  130.     box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25) !important;
  131. }
  132.  
  133. .action-buttons {
  134.     display: flex;
  135.     justify-content: flex-end;
  136.     gap: 0.75rem;
  137.     margin-top: 1.5rem;
  138. }
  139.  
  140. /* Button sizing */
  141. .p-button {
  142.     padding: 0.65rem 1.25rem !important;
  143.     font-size: 1rem !important;
  144. }
  145. /* Expense icon styling */
  146. .card-icon.expense {
  147.     background-color: #fce8e6;
  148.     color: #e53e3e;
  149. }
  150.  
  151.  
  152.  
  153.  
  154.  
  155. /* dashboard.css */
  156.  
  157. .dashboard-header {
  158.     display: flex;
  159.     justify-content: space-between;
  160.     align-items: center;
  161.     margin-bottom: 1.5rem;
  162. }
  163.  
  164. .header-title h1 {
  165.     color: #2e384d;
  166.     margin-bottom: 0.25rem;
  167. }
  168.  
  169. .welcome-message {
  170.     color: #6c757d;
  171.     font-size: 0.9rem;
  172. }
  173.  
  174. .card-container {
  175.     display: grid;
  176.     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  177.     gap: 1.5rem;
  178.     margin-bottom: 2rem;
  179. }
  180.  
  181. .summary-card {
  182.     background: white;
  183.     border-radius: 10px;
  184.     padding: 1.5rem;
  185.     box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  186.     border-top: 4px solid;
  187. }
  188.  
  189. .balance-card {
  190.     border-color: #4e73df;
  191. }
  192.  
  193. .expense-card {
  194.     border-color: #e74a3b;
  195. }
  196.  
  197. .income-card {
  198.     border-color: #1cc88a;
  199. }
  200.  
  201.  
  202.  
  203.  
  204. .balance-card .card-icon {
  205.     background-color: #e0e6f7;
  206.     color: #4e73df;
  207. }
  208.  
  209. .expense-card .card-icon {
  210.     background-color: #fbe9e8;
  211.     color: #e74a3b;
  212. }
  213.  
  214. .income-card .card-icon {
  215.     background-color: #e6f4f0;
  216.     color: #1cc88a;
  217. }
  218.  
  219.  
  220. .card-trend {
  221.     font-size: 0.9rem;
  222.     display: flex;
  223.     align-items: center;
  224. }
  225.  
  226. .positive {
  227.     color: #1cc88a;
  228. }
  229.  
  230. .negative {
  231.     color: #e74a3b;
  232. }
  233.  
  234. .panel-container {
  235.     background: white;
  236.     border-radius: 10px;
  237.     overflow: hidden;
  238.     box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  239. }
  240.  
  241. .panel-header {
  242.     display: flex;
  243.     justify-content: space-between;
  244.     align-items: center;
  245.     padding: 0.5rem 0;
  246. }
  247.  
  248. .transactions-table {
  249.     border: none;
  250. }
  251.  
  252. .transaction-info {
  253.     display: flex;
  254.     align-items: center;
  255. }
  256.  
  257. .transaction-icon {
  258.     width: 40px;
  259.     height: 40px;
  260.     border-radius: 8px;
  261.     background-color: #f0f5ff;
  262.     display: flex;
  263.     align-items: center;
  264.     justify-content: center;
  265.     margin-right: 1rem;
  266.     color: #4e73df;
  267. }
  268.  
  269. .transaction-name {
  270.     font-weight: 600;
  271.     color: #2e384d;
  272. }
  273.  
  274. .transaction-category {
  275.     font-size: 0.85rem;
  276.     color: #6c757d;
  277. }
  278.  
  279. .transaction-date {
  280.     color: #2e384d;
  281.     font-weight: 500;
  282. }
  283.  
  284. .transaction-time {
  285.     font-size: 0.8rem;
  286.     color: #adb5bd;
  287. }
  288.  
  289. .transaction-amount {
  290.     font-weight: 700;
  291.     font-size: 1.1rem;
  292. }
  293.  
  294. .transaction-actions {
  295.     display: flex;
  296.     gap: 0.5rem;
  297. }
  298.  
  299. .action-btn {
  300.     width: 32px;
  301.     height: 32px;
  302.     border-radius: 50%;
  303. }
  304.  
  305. .delete-btn {
  306.     color: #e74a3b !important;
  307.     background-color: #fbe9e8 !important;
  308. }
  309.  
  310. .credit-row {
  311.     border-left: 3px solid #1cc88a;
  312. }
  313.  
  314. .debit-row {
  315.     border-left: 3px solid #e74a3b;
  316. }
  317.  
  318. .btn-primary {
  319.     background: #4e73df !important;
  320.     border: none !important;
  321. }
  322.  
  323. .btn-outline {
  324.     background: transparent !important;
  325.     border: 1px solid #4e73df !important;
  326.     color: #4e73df !important;
  327. }
  328. </style>
  329.     <title>Monivo Dashboard</title>
  330. </h:head>
  331. <h:body>
  332.     <ui:composition template="/WEB-INF/templates/user.xhtml">
  333.         <ui:define name="content">
  334.             <h:outputStylesheet library="css" name="user-dashboard.css"/>
  335.             <div class="dashboard-container">
  336.                 <!-- Header -->
  337.                 <div class="dashboard-header">
  338.                     <div class="header-title">
  339.                         <h1>Dashboard</h1>
  340.                         <p class="welcome-message">Welcome back, #{userAccountcdi.user.name}!</p>
  341.                     </div>
  342.                     <div class="header-controls">
  343.                         <p:commandButton value="Add Transaction"
  344.                                         icon="pi pi-plus"
  345.                                         styleClass="btn-primary"
  346.                                         action="#{transactionController.openDialog}"/>
  347.                     </div>
  348.                 </div>
  349.  
  350.                 <!-- Financial Summary Cards -->
  351.                 <div class="card-container">
  352.                     <!-- Total Balance Card -->
  353.                     <div class="summary-card balance-card">
  354.                         <div class="card-header">
  355.                             <div>
  356.                                 <span class="card-title">TOTAL BALANCE</span>
  357.                                 <h3 class="card-value">$2,543</h3>
  358.                             </div>
  359.                         </div>
  360.                         <div class="card-trend positive">
  361.                             <i class="pi pi-arrow-up"></i> 2.5% from last month
  362.                         </div>
  363.                     </div>
  364.  
  365.                     <!-- Monthly Expenses Card -->
  366.                     <div class="summary-card expense-card">
  367.                         <div class="card-header">
  368.                             <div>
  369.                                 <span class="card-title">MONTHLY EXPENSES</span>
  370.                                 <h3 class="card-value">$3,240.00</h3>
  371.                             </div>
  372.                         </div>
  373.                         <div class="card-trend negative">
  374.                             <i class="pi pi-arrow-down"></i> 0.8% from last month
  375.                         </div>
  376.                     </div>
  377.  
  378.                     <!-- Monthly Income Card -->
  379.                     <div class="summary-card income-card">
  380.                         <div class="card-header">
  381.                             <div>
  382.                                 <span class="card-title">MONTHLY INCOME</span>
  383.                                 <h3 class="card-value">$6,800.00</h3>
  384.                             </div>
  385.                         </div>
  386.                         <div class="card-trend positive">
  387.                             <i class="pi pi-arrow-up"></i> 4.2% from last month
  388.                         </div>
  389.                     </div>
  390.                 </div>
  391.  
  392.                 <!-- Recent Transactions Panel -->
  393.                 <div class="panel-container">
  394.                     <p:panel>
  395.                         <f:facet name="header">
  396.                             <div class="panel-header">
  397.                                 <h3>Recent Transactions</h3>
  398.                             </div>
  399.                         </f:facet>
  400.  
  401.                         <p:dataTable value="#{transactionController.recentTransactions}"
  402.                                     var="txn"
  403.                                     styleClass="transactions-table"
  404.                                     emptyMessage="No records found."
  405.                                     rowStyleClass="#{txn.amount lt 0 ? 'debit-row' : 'credit-row'}">
  406.                             <p:column headerText="Description">
  407.                                 <div class="transaction-info">
  408.                                     <div class="transaction-icon">
  409.                                         <i class="pi #{txn.category.icon}"></i>
  410.                                     </div>
  411.                                     <div>
  412.                                         <div class="transaction-name">#{txn.description}</div>
  413.                                         <div class="transaction-category">#{txn.category.name}</div>
  414.                                     </div>
  415.                                 </div>
  416.                             </p:column>
  417.  
  418.                             <p:column headerText="Amount">
  419.                                 <div class="transaction-amount #{txn.amount lt 0 ? 'negative' : 'positive'}">
  420.                                     <h:outputText value="#{txn.amount}">
  421.                                         <f:convertNumber type="currency" currencySymbol="$"/>
  422.                                     </h:outputText>
  423.                                 </div>
  424.                             </p:column>
  425.  
  426.                             <p:column headerText="Actions">
  427.                                 <div class="transaction-actions">
  428.                                     <p:commandButton icon="pi pi-pencil"
  429.                                                     styleClass="action-btn"
  430.                                                     action="#{transactionController.edit(txn)}"/>
  431.                                     <p:commandButton icon="pi pi-trash"
  432.                                                     styleClass="action-btn delete-btn"
  433.                                                     action="#{transactionController.delete(txn)}"/>
  434.                                 </div>
  435.                             </p:column>
  436.                         </p:dataTable>
  437.                     </p:panel>
  438.                 </div>
  439.             </div>
  440.         </ui:define>
  441.     </ui:composition>
  442. </h:body>
  443. </html>
  444.  
  445.  
  446.  
  447.  
  448.  
  449.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!