From b7b2bd25f7e16d7078c098e2f01477411697b709 Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Wed, 24 Sep 2025 14:03:03 +0800
Subject: [PATCH] Updated register page

---
 src/pages/RegisterPage/Register.sass |  2 +
 src/pages/RegisterPage/Register.tsx  | 66 ++++++++++++++++++----------
 2 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/src/pages/RegisterPage/Register.sass b/src/pages/RegisterPage/Register.sass
index e69de29..e0f9cfd 100644
--- a/src/pages/RegisterPage/Register.sass
+++ b/src/pages/RegisterPage/Register.sass
@@ -0,0 +1,2 @@
+.back-button-text
+  font-size: 1rem
diff --git a/src/pages/RegisterPage/Register.tsx b/src/pages/RegisterPage/Register.tsx
index d7c6442..5ac29d4 100644
--- a/src/pages/RegisterPage/Register.tsx
+++ b/src/pages/RegisterPage/Register.tsx
@@ -1,34 +1,54 @@
-import { Button, Logo, Link, Page, Row, Column, Display, Padding } from '../../components'
-// import RegistrationForm from '../components/RegistrationForm/RegistrationForm'
+import './Register.sass'
+import { Logo, Link, Page, Row, Padding, Form, Combobox, Box } from '../../components'
+import { IoChevronBack } from 'solid-icons/io'
+import { Show, createSignal } from 'solid-js'
 
 export default () => {
+  const assessors = JSON.parse(sessionStorage.getItem('assessors')!)
+  const approvers = JSON.parse(sessionStorage.getItem('approvers')!)
+  const roles = ['ASSESSOR', 'APPROVER']
+
+  const [role, setRole] = createSignal('')
+  const [name, setName] = createSignal('')
+
   return (
     <>
       <Page alignment="column">
         <Padding left={4.75} right={4.75}>
-          <Display desktop tablet>
-            <Row content="split">
-              <Link to="/">
-                <Row content="left" gap={2}>
-                  <Logo size={200} />
-                  <h1>OCBO e-Sign</h1>
-                </Row>
-              </Link>
+          <Row content="split">
+            <Link to="/">
+              <Row content="left" gap={2}>
+                <Logo size={200} />
+                <h1>OCBO e-Sign</h1>
+              </Row>
+            </Link>
 
-              <Button label="Register" edges="curved" to="/main" />
+            <Link to="/">
+              <Row content="right">
+                <IoChevronBack size={45} />
+                <span class="back-button-text">Back</span>
+              </Row>
+            </Link>
+          </Row>
+
+          <Padding top={2} left={0} right={0}>
+            <Row>
+              <Box curved thickness={2} padding={2} color="#2f465cd7">
+                <Form>
+                  <h4>Role</h4>
+                  <Combobox options={roles} placeholder="Select your role" value={role()} onChange={setRole} />
+                  <Show when={role() === 'ASSESSOR'}>
+                    <h4>List of Assessors</h4>
+                    <Combobox options={assessors} placeholder="Select your name" value={name()} onChange={setName} />
+                  </Show>
+                  <Show when={role() === 'APPROVER'}>
+                    <h4>List of Approvers</h4>
+                    <Combobox options={approvers} placeholder="Select your name" value={name()} onChange={setName} />
+                  </Show>
+                </Form>
+              </Box>
             </Row>
-
-            <Display mobile>
-              <Column content="center">
-                <Link to="/">
-                  <Logo size={120} />
-                  <h1>OCBO e-Sign</h1>
-                </Link>
-
-                <Button label="Register" edges="curved" to="/main" />
-              </Column>
-            </Display>
-          </Display>
+          </Padding>
         </Padding>
       </Page>
     </>