Merge pull request #248 from fairnesscoop/feat/187-pay-elements

Pay elements

client/i18n/fr.json

@@ -265,6 +265,26 @@
         "not_a_working_date": "Ce jour n'est pas travaillé"
       }
     },
+    "payslips": {
+      "breadcrumb": "Fiches de paies",
+      "title": "Éléments pour les fiches de paie",
+      "user": "Salairé / stagiaire",
+      "contract": "Type de contrat",
+      "executive_position": "Cadre",
+      "joining_date": "Date d'entrée",
+      "annual_earnings": "Salaire brut annuel",
+      "monthly_earnings": "Salaire brut mensuel",
+      "working_time": "TC/TP",
+      "transport_fee": "Transport",
+      "meal_tickets": "Tickets resto",
+      "full_time": "Temps complet",
+      "partial_time": "Temps partiel",
+      "health_insurance": "Mutuelle",
+      "paid_leaves": "Congés payés",
+      "unpaid_leaves": "Congés sans solde",
+      "sick_leaves": "Congés maladie",
+      "exceptional_leaves": "Congés exceptionnels"
+    },
     "leaves": {
       "title": "Congés",
       "requests": {

client/src/components/Nav.svelte

@@ -40,7 +40,7 @@
 
 {#if $session.user}
   <aside
-    class="z-20 hidden overflow-y-auto bg-white dark:bg-gray-800 md:block flex-shrink-0"
+    class="z-20 flex-shrink-0 hidden overflow-y-auto bg-white dark:bg-gray-800 md:block"
     class:open={$settings.openMobileMenu}>
     <div class="py-4 text-gray-500 dark:text-gray-400">
       <a
@@ -188,7 +188,7 @@
               <li class={subLinkClass}>
                 <a
                   class="w-full"
-                  href="human_resources/leaves">{$_('human_resources.leaves.title')}</a>
+                  href="human_resources/payslips">{$_('human_resources.payslips.breadcrumb')}</a>
               </li>
               <li class={subLinkClass}>
                 <a

client/src/routes/human_resources/payslips/_Leave.svelte

@@ -0,0 +1,16 @@
+<script>
+  import { _ } from 'svelte-i18n';
+  import { format } from 'date-fns';
+
+  export let userLeaves;
+
+  // TODO: factorize this function
+  const formatDate = (date) => format(new Date(date), 'dd/MM/yyyy');
+</script>
+
+{#if userLeaves.totalDays > 0}
+  <div><strong>{userLeaves.totalDays}</strong></div>
+  {#each userLeaves.leaves as userLeave}
+    <div>{formatDate(userLeave.startDate)} -> {formatDate(userLeave.endDate)}</div>
+  {/each}
+{/if}

client/src/routes/human_resources/payslips/_Table.svelte

@@ -0,0 +1,53 @@
+<script>
+  import { _ } from 'svelte-i18n';
+  import { format } from 'normalizer/money';
+  import Leave from './_Leave.svelte';
+
+  export let items;
+</script>
+
+<table
+  class="w-full px-4 py-3 mb-8 whitespace-no-wrap bg-white rounded-lg shadow-md dark:bg-gray-800">
+  <thead>
+    <tr
+      class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
+      <th class="px-4 py-3">{$_('human_resources.payslips.user')}</th>
+      <th class="px-4 py-3">{$_('human_resources.payslips.contract')}</th>
+      <th class="px-4 py-3">{$_('human_resources.payslips.joining_date')}</th>
+      <th class="px-4 py-3">{$_('human_resources.payslips.annual_earnings')}</th>
+      <th class="px-4 py-3">{$_('human_resources.payslips.monthly_earnings')}</th>
+      <th class="px-4 py-3">{$_('human_resources.payslips.working_time')}</th>
+      <th class="px-4 py-3">{$_('human_resources.payslips.transport_fee')}</th>
+      <th class="px-4 py-3">{$_('human_resources.payslips.meal_tickets')}</th>
+      <th class="px-4 py-3">{$_('human_resources.payslips.health_insurance')}</th>
+      <th class="px-4 py-3">{$_('human_resources.payslips.paid_leaves')}</th>
+      <th class="px-4 py-3">{$_('human_resources.payslips.unpaid_leaves')}</th>
+      <th class="px-4 py-3">{$_('human_resources.payslips.sick_leaves')}</th>
+      <th class="px-4 py-3">{$_('human_resources.payslips.exceptional_leaves')}</th>
+    </tr>
+  </thead>
+
+  <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
+    {#each items as { firstName, lastName, contract, isExecutivePosition, joiningDate,
+                      annualEarnings, monthlyEarnings, workingTime, transportFee, mealTickets,
+                      healthInsurance, paidLeaves, unpaidLeaves, sickLeaves, exceptionalLeaves }}
+      <tr class="text-gray-700 dark:text-gray-400">
+        <td class="px-4 py-3 text-sm">
+          {firstName} {lastName}
+        </td>
+        <td class="px-4 py-3 text-sm">{contract} {isExecutivePosition ? $_('human_resources.payslips.executive_position') : ''}</td>
+        <td class="px-4 py-3 text-sm">{joiningDate}</td>
+        <td class="px-4 py-3 text-sm">{format(annualEarnings)}</td>
+        <td class="px-4 py-3 text-sm">{format(monthlyEarnings)}</td>
+        <td class="px-4 py-3 text-sm">{$_(`human_resources.users.form.working_time.${workingTime}`)}</td>
+        <td class="px-4 py-3 text-sm">{format(transportFee)}</td>
+        <td class="px-4 py-3 text-sm">{mealTickets}</td>
+        <td class="px-4 py-3 text-sm">{$_(`common.${healthInsurance}`)}</td>
+        <td class="px-4 py-3 text-sm"><Leave userLeaves={paidLeaves}></Leave></td>
+        <td class="px-4 py-3 text-sm"><Leave userLeaves={unpaidLeaves}></Leave></td>
+        <td class="px-4 py-3 text-sm"><Leave userLeaves={sickLeaves}></Leave></td>
+        <td class="px-4 py-3 text-sm"><Leave userLeaves={exceptionalLeaves}></Leave></td>
+      </tr>
+    {/each}
+  </tbody>
+</table>

client/src/routes/human_resources/payslips/index.svelte

@@ -0,0 +1,40 @@
+<script>
+  import { onMount } from 'svelte';
+  import { _ } from 'svelte-i18n';
+  import { format } from 'date-fns';
+  import { fr } from 'date-fns/locale';
+  import Breadcrumb from 'components/Breadcrumb.svelte';
+  import H4Title from 'components/H4Title.svelte';
+  import { errorNormalizer } from 'normalizer/errors';
+  import ServerErrors from 'components/ServerErrors.svelte';
+  import { get } from 'utils/axios';
+  import Table from './_Table.svelte';
+
+  const title = $_('human_resources.payslips.title', {
+    values: {
+      month: format(new Date(), 'MMMM yyyy', { locale: fr }),
+    },
+  });
+
+  let errors;
+  let payslipElements = [];
+
+  onMount(async () => {
+    try {
+      ({ data: payslipElements } = await get('payslips'));
+    } catch (e) {
+      errors = errorNormalizer(e);
+    }
+  });
+</script>
+
+<svelte:head>
+  <title>{title} - {$_('app')}</title>
+</svelte:head>
+
+<Breadcrumb items={[{ title: $_('human_resources.breadcrumb') }, { title: $_('human_resources.payslips.breadcrumb') }]} />
+<ServerErrors {errors} />
+<div class="inline-flex items-center">
+  <H4Title {title} />
+</div>
+<Table items={payslipElements} />