[FE] Modify batch layout to show actions and recent certificates

src/views/AulaVirtual/DniEntry.tsx

@@ -61,7 +61,7 @@ export function DniEntry(props: {dni: string}) {
     return (
         <>
             <Show when={status() !== Status.Error}>
-                <div class="grid gap-1 grid-cols-[7rem_10rem_10rem_16rem] hover:bg-c-surface-variant hover:text-c-on-surface-variant">
+                <div class="grid gap-1 grid-cols-[7rem_10rem_10rem_16rem_7rem_auto] hover:bg-c-surface-variant hover:text-c-on-surface-variant">
                     <div class="text-center font-mono">
                         {props.dni}
                     </div>
@@ -71,12 +71,16 @@ export function DniEntry(props: {dni: string}) {
                             <div class="text-center font-mono"></div>
                             <div class="text-center font-mono"></div>
                             <div class="text-center font-mono"></div>
+                            <div></div>
+                            <div class="border-l"></div>
                         </Match>
 
                         <Match when={status() === Status.Loading}>
                             <div class="text-center font-mono">...</div>
                             <div class="text-center font-mono">...</div>
                             <div class="text-center font-mono">...</div>
+                            <div></div>
+                            <div class="border-l"></div>
                         </Match>
 
                         <Match when={status() === Status.Ok}>
@@ -89,6 +93,14 @@ export function DniEntry(props: {dni: string}) {
                             <div class="text-center font-mono">
                                 {person()?.nombres ?? "!"}
                             </div>
+                            <div class="text-center">
+                                <button
+                                    class={"rounded-full px-2 hover:bg-c-error first:text-c-error first:hover:text-c-on-error"}
+                                >
+                                    <i class="ph ph-x"></i>
+                                </button>
+                            </div>
+                            <div class="border-l"></div>
                         </Match>
 
                     </Switch>

src/views/AulaVirtual/DniEntry/DniRegister.tsx

@@ -46,7 +46,7 @@ export function DniRegister(props: {dni: string, onSuccess: () => void}) {
     };
 
     return (
-        <form class="grid gap-1 grid-cols-[7rem_10rem_10rem_16rem_7rem] w-full" onsubmit={register}>
+        <form class="grid gap-1 grid-cols-[7rem_10rem_10rem_16rem_7rem_auto] w-full" onsubmit={register}>
             <div class="text-center font-mono">
                 {props.dni}
             </div>
@@ -91,14 +91,17 @@ export function DniRegister(props: {dni: string, onSuccess: () => void}) {
                 disabled={loading()}
             />
 
-            <input
+            <div class="text-center">
-                class={`bg-c-primary text-c-on-primary px-4 py-2 rounded-md cursor-pointer
+                <button
-                        disabled:opacity-50 disabled:cursor-not-allowed 
+                    class={`rounded-full py-1 px-2 bg-c-success text-c-on-success shadow ${loading() ? "animate-pulse" : ""}`}
-                        ${loading() ? "animate-pulse" : ""}`}
                     type="submit"
-                value="Registrar"
                     disabled={loading()}
-            />
+                >
+                    <i class="ph ph-user-plus"></i>
+                </button>
+            </div>
+
+            <div class="border-l"></div>
         </form>
     );
 }

src/views/AulaVirtual/DniGroup.tsx

@@ -7,13 +7,15 @@ export function DniGroup(props: {group: string, index: number}) {
     console.log("Loading group...");
 
     return (
-        <div class="grid grid-cols-[53rem_auto] gap-2 my-8">
+        <div class=" grid-cols-[53rem_auto] gap-2 my-8">
             <div class="border border-c-outline rounded-xl">
-                <div class="grid gap-1 grid-cols-[7rem_10rem_10rem_16rem] border-b">
+                <div class="grid gap-1 grid-cols-[7rem_10rem_10rem_16rem_7rem_auto] border-b">
                     <div class="text-center">DNI</div>
                     <div class="text-center">Apellido Paterno</div>
                     <div class="text-center">Apellido Materno</div>
                     <div class="text-center">Nombres</div>
+                    <div class="text-center">Acciones</div>
+                    <div class="border-l pl-4">Certificados recientes (último año)</div>
                 </div>
 
                 <For each={dnis()}>

src/views/components/Registers.tsx

@@ -9,8 +9,8 @@ export function Registers(props: { person: Person | null, lastUpdate: number })
     createEffect(() => {
         const person = props.person;
         const lastUpdate = props.lastUpdate;
-        // This comment is important, it retrieves
+        // This comment is important, it makes solid's reactivy wake up,
-        // certificates from DB on any change
+        // which then retrieves certificates from the DB on any change
         console.log(`Loading registers for ${person?.nombres} (update ${lastUpdate})`);
 
         // Load certificates from DB
@@ -18,7 +18,6 @@ export function Registers(props: { person: Person | null, lastUpdate: number })
     });
 
     const loadCertificates = async() => {
-        console.log("loading from db...");
         setLoading(true);
 
         if (props.person === null) return;