onboarding frontend style completed

public/assets/css/colors.css

@@ -5,7 +5,7 @@
     --bs-pink: #d63384;
     --bs-red: #dc3545;
     --bs-orange: #fd7e14;
-    --bs-yellow: #ffc107;
+    --bs-yellow: #FAD308;
     --bs-green: #198754;
     --bs-teal: #20c997;
     --bs-cyan: #0dcaf0;
@@ -136,6 +136,7 @@
     --light-border: #dceee6;
     --theme-default: #413e9d;
     --theme-secondary: #ffffff;
+    --theme-tertiary: #FAD308;
     --body-color: #f9f7f6;
     --primary-color: #413e9d;
     --secondary-color: #ffffff;
@@ -166,7 +167,7 @@
     --table-border: #e4e4e4;
     --alert-light-light: #f1efee;
     --border-light-color: #f3f3f3;
-    --form-select: #ced4da;
+    --form-select: #000000;
     --timline-dot-line: #52526c;
     --light2: #1d1e26;
     --pitch-color: #fe8a7d;

public/assets/css/style.css

@@ -156,6 +156,14 @@ ul ol {
     margin-bottom: 0;
 }
 
+ul.standard-list {
+    margin-left: 2em;
+}
+
+ul.standard-list li {
+    list-style: disc;
+}
+
 dt {
     font-weight: 700;
 }
@@ -2075,6 +2083,15 @@ progress {
     transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
         border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
+.form-control::file-selector-button {
+    padding-right: 30px;
+    border-radius: var(--bs-border-radius);
+    border: 1px solid;
+    border-radius: var(--bs-border-radius);
+    display: inline-block;
+    margin-left: -0.74rem;
+    scale: 1.06;
+}
 @media (prefers-reduced-motion: reduce) {
     .form-control::file-selector-button {
         transition: none;
@@ -2875,6 +2892,7 @@ textarea.form-control.is-invalid {
     color: var(--bs-btn-color);
     text-align: center;
     text-decoration: none;
+    text-transform: uppercase;
     vertical-align: middle;
     cursor: pointer;
     user-select: none;
@@ -3234,6 +3252,10 @@ fieldset:disabled .btn {
     color: var(--bs-btn-hover-color);
 }
 
+.btn-medium {
+    width: 110px;
+    max-width: 100%;
+}
 .btn-large {
     width: 200px;
     max-width: 100%;
@@ -25239,20 +25261,27 @@ input::-webkit-inner-spin-button {
     display: none;
 }
 .form-wizard .step {
-    height: 10px;
-    width: 10px;
+    height: 8px;
+    width: 8px;
     margin: 0 2px;
-    background-color: var(--theme-default);
+    background-color: var(--theme-tertiary);
     border: none;
-    border-radius: 50%;
+    border-radius: 8px;
     display: inline-block;
     opacity: 0.5;
+    will-change: width;
+    transition: width 0.5s ease;
 }
 .form-wizard .step.active {
     opacity: 1;
+    width: 24px;
 }
 .form-wizard .step.finish {
-    background-color: var(--theme-secondary);
+    background-color: var(--theme-tertiary);
+}
+a#prevBtn {
+    position: absolute;
+    font-size: 25px;
 }
 
 .wizard-4 .bg-color {
@@ -46211,7 +46240,8 @@ pre {
 }
 
 .login-card,
-.registration-card {
+.registration-card,
+.onboarding-card {
     min-height: 100vh;
     display: flex;
     align-items: center;
@@ -46220,7 +46250,8 @@ pre {
     padding: 30px 12px;
 	background-color: var(--bs-body-bg);
 }
-.registration-card {
+.registration-card,
+.onboarding-card {
 	background-color: var(--primary-color);
 }
 .login-card.login-bg {
@@ -46268,7 +46299,8 @@ pre {
     vertical-align: bottom;
 }
 .login-card .login-main,
-.registration-card .registration-main {
+.registration-card .registration-main,
+.onboarding-card .onboarding-main {
     max-width: 650px;
     width: 100dvw;
     padding: 80px 40px;
@@ -46276,17 +46308,25 @@ pre {
     box-shadow: 0 0 37px rgba(0, 0, 0, 0.05);
     margin: 0 auto;
     background-color: var(--bs-body-bg);
+    min-height: 700px;
 }
-.registration-card .registration-main {
+.registration-card .registration-main,
+.onboarding-card .onboarding-main {
     max-width: 1075px;
     background-color: var(--bs-body-bg);
 }
-.login-card .login-main .login-inner,
+.login-card .login-main .login-inner {
+    max-width: 422px;
+}
 .registration-card .registration-main .registration-inner {
     max-width: 860px;
 }
+.onboarding-card .onboarding-main .onboarding-inner {
+    max-width: 690px;
+}
 .login-card .login-main .login-inner .form-logo,
-.registration-card .registration-main .registration-inner .form-logo {
+.registration-card .registration-main .registration-inner .form-logo,
+.onboarding-card .onboarding-main .onboarding-inner .form-logo {
     max-width: min(330px, 100%);
 }
 @media (max-width: 991.98px) {
@@ -46317,10 +46357,14 @@ pre {
     margin-right: auto;
 }
 .login-card .login-main .theme-form label,
-.registration-card .registration-main .theme-form label {
+.registration-card .registration-main .theme-form label{
     font-size: 16px;
 	font-weight: 600;
 }
+.onboarding-card .onboarding-main .theme-form label {
+    font-size: 16px;
+	font-weight: 400;
+}
 .login-card .login-main .theme-form .checkbox label::before {
     background-color: var(--white);
     border: 1px solid var(--font-color);
@@ -46473,7 +46517,8 @@ pre {
     color: var(--theme-default);
 }
 .login-card .login-main .theme-form .show-hide,
-.registration-card .registration-main .theme-form .show-hide {
+.registration-card .registration-main .theme-form .show-hide,
+.onboarding-card .onboarding-main .theme-form .show-hide {
     top: 50%;
 }
 
@@ -55650,3 +55695,7 @@ label {
 .setting-sidebar .customizer-footer .btn svg {
     transition: color 0.3s;
 }
+
+.row.w-100 {
+    width: calc(100% + var(--bs-gutter-x)) !important;
+}

public/assets/js/form-wizard/form-wizard.js

@@ -11,9 +11,10 @@ function showTab(n) {
     document.getElementById("prevBtn").style.display = "inline";
   }
   if (n == x.length - 1) {
-    document.getElementById("nextBtn").innerHTML = "Submit";
+    // document.getElementById("nextBtn").innerHTML = "Invia";
+    document.getElementById("nextBtn").innerHTML = "Avanti";
   } else {
-    document.getElementById("nextBtn").innerHTML = "Next";
+    document.getElementById("nextBtn").innerHTML = "Avanti";
   }
   fixStepIndicator(n);
 }
@@ -88,10 +89,10 @@ function nextStep() {
       removeClass(step, "done");
     }
     if (currentStep == stepLength - 1) {
-      document.getElementById("nextbtn").textContent = "Finish";
+      document.getElementById("nextbtn").textContent = "Avanti";
     }
     if (currentStep > stepLength - 1) {
-      document.getElementById("nextbtn").textContent = "Finish";
+      document.getElementById("nextbtn").textContent = "Avanti";
       addClass(step, "done");
       addClass(step, "active");
       removeClass(step, "editing");

resources/views/livewire/onboarding.blade.php

@@ -1,12 +1,14 @@
 <div class="container-fluid p-0">
     <div class="row m-0">
         <div class="col-12 p-0">
-            <div class="registration-card">
+            <div class="onboarding-card">
                 <div>
-                    <div class="registration-main d-flex justify-content-center">
-                        <div class="registration-inner w-100">
+                    <div class="onboarding-main d-flex align-items-stretch justify-content-center">
+                        <div class="onboarding-inner w-100 d-flex flex-column">
+                            <a href="#" id="prevBtn" onclick="nextPrev(-1)"><i class="iconly-Arrow-Left icli arrow-back"></i></a>
                             <img class="d-block img-fluid m-auto mb-5 form-logo" src="/assets/images/logo.png" alt="logo" />
-                            <form class="theme-form form-wizard" id="onboarding" method="POST" action="#">
+                            <form class="theme-form form-wizard flex-fill d-flex flex-column" id="onboarding" method="POST" action="#">
+                                {{-- Step 1 --}}
                                 <div class="tab">
                                     <div class="row">
                                         <div class="col-xs-12 mb-3">
@@ -14,60 +16,195 @@
                                         </div>
                                         <div class="col-md-6 col-xs-12 mb-3">
                                             <div class="form-group">
-                                                <label for="firstname">Nome</label>
-                                                <input class="form-control" id="firstname" name="firstname" type="text" placeholder="Inserisci" required>
+                                                <label for="company">Ragione sociale</label>
+                                                <input class="form-control" id="company" name="company" type="text" placeholder="Inserisci" required>
                                             </div>
                                         </div>
                                         <div class="col-md-6 col-xs-12 mb-3">
                                             <div class="form-group">
-                                                <label for="lastname">Cognome</label>
-                                                <input class="form-control" id="lastname" name="lastname" type="text" placeholder="Inserisci" required>
+                                                <label for="business">Nome business</label>
+                                                <input class="form-control" id="business" name="business" type="text" placeholder="Inserisci" required>
                                             </div>
                                         </div>
                                         <div class="col-md-6 col-xs-12 mb-3">
                                             <div class="form-group">
-                                                <label for="company">Nome azienda</label>
-                                                <input class="form-control" id="company" name="company" type="text" placeholder="Inserisci" required>
+                                                <label for="sector">Settore</label>
+                                                <select class="form-select" id="sector" name="sector" type="text" required>
+                                                    <option value="" selected disabled>Seleziona</option>
+                                                    <option value="sector_1">sector_1</option>
+                                                </select>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6 col-xs-12 mb-3">
+                                            <div class="form-group">
+                                                <label for="activity">Attività</label>
+                                                <select class="form-select" id="activity" name="activity" type="text" required>
+                                                    <option value="" selected disabled>Seleziona</option>
+                                                    <option value="activity_1">activity_1</option>
+                                                </select>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6 col-xs-12 mb-3">
+                                            <div class="form-group">
+                                                <label for="website">Sito web</label>
+                                                <input class="form-control" id="website" name="text" type="text" placeholder="Inserisci" required>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6 col-xs-12 mb-3">
+                                            <div class="form-group">
+                                                <label for="logo">Logo</label>
+                                                <input class="form-control" id="logo" name="logo" type="file" placeholder="Nessun file selezionato" accept="image/*" required>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                {{-- END - Step 1 --}}
+
+                                {{-- Step 2 --}}
+                                <div class="tab">
+                                    <div class="row">
+                                        <div class="col-xs-12 mb-3">
+                                            <p class="text-center">Personalizza il calendario del timesheet in base alle tue esigenze.</p>
+                                        </div>
+                                        <div class="col-md-6 col-xs-12 mb-3">
+                                            <div class="form-group">
+                                                <label for="calendar_type">Tipologia di calendario</label>
+                                                <select class="form-select" id="calendar_type" name="calendar_type" type="text" required>
+                                                    <option value="" selected disabled>Seleziona</option>
+                                                    <option value="sector_1">calendar_type_1</option>
+                                                </select>
                                             </div>
                                         </div>
                                         <div class="col-md-6 col-xs-12 mb-3">
                                             <div class="form-group">
-                                                <label for="email">Email</label>
-                                                <input class="form-control" id="email" name="email" type="email" placeholder="Inserisci" required>
+                                                <label for="slot_interval">Intervallo slot</label>
+                                                <select class="form-select" id="slot_interval" name="slot_interval" type="text" required>
+                                                    <option value="" selected disabled>Seleziona</option>
+                                                    <option value="sector_1">slot_interval_1</option>
+                                                </select>
                                             </div>
                                         </div>
                                         <div class="col-md-6 col-xs-12 mb-3">
                                             <div class="form-group">
-                                                <label for="password">Password</label>
-                                                <div class="form-input position-relative">
-                                                    <input class="form-control" id="password" name="password" type="password" placeholder="Inserisci" required />
-                                                    <div class="show-hide"><span class="show"> </span></div>
-                                                </div>
+                                                <label for="start_hour">Ora inizio visualizzazione</label>
+                                                <select class="form-select" id="start_hour" name="start_hour" type="text" required>
+                                                    <option value="" selected disabled>Seleziona</option>
+                                                    <option value="0">0</option>
+                                                    <option value="1">1</option>
+                                                    <option value="2">2</option>
+                                                    <option value="3">3</option>
+                                                    <option value="4">4</option>
+                                                    <option value="5">5</option>
+                                                    <option value="6">6</option>
+                                                    <option value="7">7</option>
+                                                    <option value="8">8</option>
+                                                    <option value="9">9</option>
+                                                    <option value="10">10</option>
+                                                    <option value="11">11</option>
+                                                    <option value="12">12</option>
+                                                    <option value="13">13</option>
+                                                    <option value="14">14</option>
+                                                    <option value="15">15</option>
+                                                    <option value="16">16</option>
+                                                    <option value="17">17</option>
+                                                    <option value="18">18</option>
+                                                    <option value="19">19</option>
+                                                    <option value="20">20</option>
+                                                    <option value="21">21</option>
+                                                    <option value="22">22</option>
+                                                    <option value="23">23</option>
+                                                </select>
                                             </div>
                                         </div>
                                         <div class="col-md-6 col-xs-12 mb-3">
                                             <div class="form-group">
-                                                <label for="confirm_password">Conferma password</label>
-                                                <div class="form-input position-relative">
-                                                    <input class="form-control" id="confirm_password" name="confirm_password" type="password" placeholder="Inserisci" required />
-                                                    <div class="show-hide"><span class="show"> </span></div>
-                                                </div>
+                                                <label for="end_hour">Ora fine visualizzazione</label>
+                                                <select class="form-select" id="end_hour" name="end_hour" type="text" required>
+                                                    <option value="" selected disabled>Seleziona</option>
+                                                    <option value="0">0</option>
+                                                    <option value="1">1</option>
+                                                    <option value="2">2</option>
+                                                    <option value="3">3</option>
+                                                    <option value="4">4</option>
+                                                    <option value="5">5</option>
+                                                    <option value="6">6</option>
+                                                    <option value="7">7</option>
+                                                    <option value="8">8</option>
+                                                    <option value="9">9</option>
+                                                    <option value="10">10</option>
+                                                    <option value="11">11</option>
+                                                    <option value="12">12</option>
+                                                    <option value="13">13</option>
+                                                    <option value="14">14</option>
+                                                    <option value="15">15</option>
+                                                    <option value="16">16</option>
+                                                    <option value="17">17</option>
+                                                    <option value="18">18</option>
+                                                    <option value="19">19</option>
+                                                    <option value="20">20</option>
+                                                    <option value="21">21</option>
+                                                    <option value="22">22</option>
+                                                    <option value="23">23</option>
+                                                </select>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
+                                {{-- END - Step 2 --}}
 
+                                {{-- Step 3 --}}
+                                <div class="tab">
+                                    <div class="row">
+                                        <div class="col-xs-12 mb-5">
+                                            <p class="text-left">Definisci il workflow di approvazione delle ore lavorate e delle spese sostenute dalle risorse:</p>
+                                            <ul class="standard-list">
+                                                <li><b>Auto approvazione</b>: vengono automaticamente convalidati, senza bisogno di revisione.</li>
+                                                <li><b>Approvazione del Supervisor</b>: devono essere approvati dal supervisor assegnato alla risorsa.</li>
+                                                <li><b>Approvazione del Project Manager</b>: devono essere approvati dal responsabile del progetto.</li>
+                                            </ul>
+                                        </div>
+                                        <div class="col-md-6 col-xs-12 mb-3">
+                                            <div class="form-group">
+                                                <label for="workflow_approval_slot">Workflow approvazione slot</label>
+                                                <select class="form-select" id="workflow_approval_slot" name="workflow_approval_slot" type="text" required>
+                                                    <option value="" selected disabled>Seleziona</option>
+                                                    <option value="sector_1">workflow_approval_slot_1</option>
+                                                </select>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6 col-xs-12 mb-3">
+                                            <div class="form-group">
+                                                <label for="workflow_approval_expenses">Workflow approvazione spese</label>
+                                                <select class="form-select" id="workflow_approval_expenses" name="workflow_approval_expenses" type="text" required>
+                                                    <option value="" selected disabled>Seleziona</option>
+                                                    <option value="sector_1">workflow_approval_expenses_1</option>
+                                                </select>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6 col-xs-12 mb-3">
+                                            <div class="form-group">
+                                                <label for="workflow_approval_absence">Workflow approvazione assenze</label>
+                                                <select class="form-select" id="workflow_approval_absence" name="workflow_approval_absence" type="text" required>
+                                                    <option value="" selected disabled>Seleziona</option>
+                                                    <option value="sector_1">workflow_approval_absence_1</option>
+                                                </select>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                {{-- END - Step 3 --}}
 
-                                <div>
-                                    <div class="text-end btn-mb">
-                                        {{-- <button class="btn btn-secondary" id="prevBtn" type="button" onclick="nextPrev(-1)">Previous</button> --}}
-                                        <button class="btn btn-primary" id="nextBtn" type="button" onclick="nextPrev(1)">Avanti</button>
+                                <div class="align-items-center mt-auto row w-100">
+                                    <div class="col-auto">
+                                        <div class="text-start"><span class="step"></span><span class="step"></span><span class="step"></span></div>
+                                    </div>
+                                    <div class="col">
+                                        <div class="text-end btn-mb">
+                                            {{-- <button class="btn btn-secondary" id="prevBtn" type="button" onclick="nextPrev(-1)">Indietro</button> --}}
+                                            <button class="btn btn-primary btn-medium" id="nextBtn" type="button" onclick="nextPrev(1)">Avanti</button>
+                                        </div>
                                     </div>
                                 </div>
-                                <!-- Circles which indicates the steps of the form:-->
-                                <div class="text-center"><span class="step"></span><span class="step"></span><span class="step"></span><span class="step"></span></div>
-                                <!-- Circles which indicates the steps of the form:-->
-                                <!-- Container-fluid Ends-->
                             </form>
                         </div>
                     </div>

resources/views/livewire/registration.blade.php

@@ -3,10 +3,10 @@
         <div class="col-12 p-0">
             <div class="registration-card">
                 <div>
-                    <div class="registration-main d-flex justify-content-center">
-                        <div class="registration-inner w-100">
+                    <div class="registration-main d-flex align-items-stretch justify-content-center">
+                        <div class="registration-inner w-100 d-flex flex-column">
                             <img class="d-block img-fluid m-auto mb-5 form-logo" src="/assets/images/logo.png" alt="logo" />
-                            <form class="theme-form" id="registration" method="POST" action="#">
+                            <form class="theme-form flex-fill" id="registration" method="POST" action="#">
                                 <div class="row">
                                     <div class="col-md-6 col-xs-12 mb-3">
                                         <div class="form-group">