Commissions variable usage, commissions variable schema verification, user-facing commissions list

Author: faisalnjs

frontend/pages/user.ejs

@@ -11,4 +11,13 @@
 <div class="buttons">
 	<a class="button" href="<%= tenant.domain %><%= tenant.path %>/create">New Commission</a>
 </div>
+<div class="commissions">
+	<% session[vars.commissions].forEach(commission => { %>
+	<div class="commission">
+		<h2><%= commission.id %></h2>
+		<p><%= commission.status.replaceAll('-', ' ').replace(/\w\S*/g, function(txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase() }) %></p>
+		<a class="button" href="<%= tenant.domain %><%= tenant.path %>/<%= commission.id %>"><%= commission.locked ? 'View' : 'Edit' %></a>
+	</div>
+	<% }) %>
+</div>
 <%- include('foot.ejs') %>

frontend/public/styles.css

@@ -229,12 +229,13 @@ main {
 		display: flex;
 		flex-direction: column;
 		align-items: flex-start;
-		justify-content: center;
+		justify-content: flex-start;
 		align-self: center;
 		gap: 10px;
 		width: 80%;
 		max-width: 1000px;
-		height: 100%;
+		height: fit-content;
+		max-height: 100%;
 		position: relative;
 		transition-timing-function: ease-in-out;
 		opacity: 0;
@@ -244,6 +245,10 @@ main {
 		}
 	}
 
+	.inner:has(.commissions) {
+		overflow: scroll;
+	}
+
 	.inputField {
 		display: flex;
 		flex-direction: column;
@@ -261,6 +266,55 @@ main {
 		opacity: 0;
 		transition: 0.25s;
 	}
+
+	.commissions {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 5px;
+		width: -webkit-fill-available;
+		max-width: 500px;
+		margin-top: 10px;
+
+		.commission {
+			display: flex;
+			align-items: center;
+			gap: 10px;
+			width: -webkit-fill-available;
+			justify-content: flex-start;
+			position: relative;
+			padding-left: 10px;
+
+			.button {
+				margin-left: auto;
+                width: fit-content;
+                min-width: 35px;
+			}
+
+			p {
+				margin-right: 20px;
+			}
+		}
+
+		.commission::before {
+			content: "";
+			height: -webkit-fill-available;
+			width: min(80%, 450px);
+			background: transparent;
+			border-top: 1px solid #ffffff;
+			border-bottom: 1px solid #ffffff;
+			position: absolute;
+			margin-left: -50px;
+			opacity: 0;
+			transition: 0.25s;
+		}
+
+		.commission:has(.button:hover)::before {
+			margin-left: -10px;
+			opacity: 1;
+			transition: 0.25s;
+		}
+	}
 }
 
 @keyframes out {

index.js

@@ -121,6 +121,28 @@ app.get('/', async (req, res) => {
   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) || !['completed', 'in-progress', 'on-hold', 'cancelled'].some(status => commission.status.includes(status)) || (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);
   switch (getUserRole(req.session)) {
     case 'admin':
       res.render('admin', { tenant, title: 'Admin View', session: req.session, vars });
@@ -129,6 +151,7 @@ app.get('/', async (req, res) => {
       res.render('dev', { tenant, title: 'Developer View', session: req.session, vars });
       break;
     default:
+      req.session[vars.commissions] = req.session[vars.commissions].filter(commission => commission.user === req.session[vars.userId]);
       res.render('user', { tenant, title: '', session: req.session, vars, fields });
       break;
   };