Single commission view

Author: faisalnjs

frontend/pages/commission.ejs

@@ -0,0 +1,60 @@
+<%- include('head.ejs') %>
+<img src="<%= tenant.logo %>" alt="<%= tenant.name %>">
+<h1><%= title %></h1>
+<% if (commission.locked) { %><p>This commission is locked from editing.</p><% } %>
+<table>
+	<tr>
+		<th>Status</th>
+		<td><%= commission.status %></td>
+	</tr>
+	<tr>
+		<th>Owner</th>
+		<td><%= commission.user %><%= (commission.user === session[vars.userId]) ? ' (you)' : '' %></td>
+	</tr>
+	<% if (commission.amount !== null) { %>
+	<tr>
+		<th>Amount</th>
+		<td><%= commission.amount %> <%= commission.currency %></td>
+	</tr>
+	<% } %>
+	<% if (commission.date !== null) { %>
+	<tr>
+		<th>Date</th>
+		<td><%= new Date(commission.date).toLocaleString() %></td>
+	</tr>
+	<% } %>
+</table>
+<table>
+	<% for (const field of fields) { %>
+	<tr>
+		<th><%= field.label %></th>
+		<% switch (field.type) {
+			case 'number': %>
+		<td><%= (commission.fields[field.id] === null) ? '-' : Number(commission.fields[field.id]) %></td>
+		<% break;
+			case 'date': %>
+		<td><%= isNaN(new Date(commission.fields[field.id]).getTime()) ? '-' : new Date(commission.fields[field.id]).toLocaleString() %></td>
+		<% break;
+			case 'checkbox': %>
+		<td><%= commission.fields[field.id] ? 'Yes': 'No' %></td>
+		<% break;
+			case 'radio': %>
+		<td><%= commission.fields[field.id] || '-' %></td>
+		<% break;
+			case 'select': %>
+		<td><%= commission.fields[field.id] || '-' %></td>
+		<% break;
+			default: %>
+		<td><%= commission.fields[field.id] || '-' %></td>
+		<% break;
+			} %>
+	</tr>
+	<% } %>
+</table>
+<div class="buttons">
+	<a class="button" href="<%= tenant.domain %><%= tenant.path %>">Back</a>
+	<% if (!commission.locked || (role !== 'user')) { %>
+	<a class="button" href="<%= tenant.domain %><%= tenant.path %>/<%= commission.id %>/edit">Edit</a>
+	<% } %>
+</div>
+<%- include('foot.ejs') %>

frontend/public/styles.css

@@ -254,7 +254,8 @@ main {
 		}
 	}
 
-	.inner:has(.commissions) {
+	.inner:has(.commissions),
+	.inner:has(table) {
 		overflow: scroll;
 	}
 
@@ -329,6 +330,17 @@ main {
 			transition: 0.25s;
 		}
 	}
+
+	table {
+		display: flex;
+		padding: 12.5px 0;
+		background: #161616;
+		border-radius: 10px;
+		text-align: left;
+		border-spacing: 20px 4px;
+		width: -webkit-fill-available;
+		max-width: 500px;
+	}
 }
 
 @keyframes out {

index.js

@@ -204,7 +204,40 @@ app.put('/sync', async (req, res) => {
       return res.status(500).json({ status: 'error', message: 'An error occurred while processing your request. Please try again later.' });
     };
   };
-  res.status(200).json({ status: 'success', message: 'Your commissions were synchronized successfully.' });
+  return res.status(200).json({ status: 'success', message: 'Your commissions were synchronized successfully.' });
+});
+
+app.get('/:id', async (req, res) => {
+  if (!on) return res.render('off', { tenant, title: 'Activation' });
+  if (!req.session) return res.render('session', { tenant, title: 'Session' });
+  if (!tenant.slug || !tenant.name || !tenant.domain) return res.render('tenant', { tenant, title: 'Configuration' });
+  if (tenant.auth && tenant.auth.enabled && vars.userId && !req.session[vars.userId]) return res.render('auth', { tenant, title: 'Authenticate' });
+  req.session[vars.commissions] = (req.session[vars.commissions] || []).map(commission => {
+    if (!commission.id || !commission.user || (commission.date ? isNaN(new Date(commission.date).getTime()) : false) || (typeof commission.status !== 'string') || (typeof commission.tasks !== 'object')) return null;
+    return {
+      id: commission.id,
+      user: commission.user,
+      amount: commission.amount ? Number(commission.amount) : null,
+      currency: commission.currency ? String(commission.currency) : 'USD',
+      date: commission.date ? new Date(commission.date) : null,
+      status: commission.status,
+      fields: fields.reduce((acc, field) => {
+        acc[field.id] = (commission.fields && (commission.fields[field.id] !== undefined)) ? commission.fields[field.id] : null;
+        return acc;
+      }, {}),
+      tasks: (commission.tasks || []).map(task => {
+        return {
+          done: task.done || false,
+          content: task.content ? String(task.content) : ''
+        }
+      }),
+      locked: commission.locked || false
+    };
+  }).filter(commission => commission !== null);
+  if (getUserRole(req.session) === 'user') req.session[vars.commissions] = req.session[vars.commissions].filter(commission => commission.user === req.session[vars.userId]);
+  const commission = (req.session[vars.commissions] || []).find(commission => (String(commission.id) === String(req.params.id)) && (commission.user === req.session[vars.userId]));
+  if (!commission) return res.status(404).render('error', { tenant, title: 'Not Found', message: 'The requested commission was not found.' });
+  return res.render('commission', { tenant, title: `Commission ${commission.id}`, session: req.session, vars, fields, role: getUserRole(req.session), commission });
 });
 
 app.use((req, res) => {