initial commit

2023-03-14 18:29:01 +01:00
parent a13c963a75
commit a22c74393f
41 changed files with 42730 additions and 1132 deletions
--- a/ui/.gitignore
+++ b/ui/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/ui/.vscode/extensions.json
+++ b/ui/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
--- a/ui/README.md
+++ b/ui/README.md
@@ -0,0 +1,9 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
+
+https://9c6e4825095514.la.deputy.com/exec/devapp/oauth_clients
--- a/ui/index.html
+++ b/ui/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="./vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Salud y Vida PA | Timesheet - 1.5.0</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="./src/main.js"></script>
+</body>
+
+</html>
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
--- a/ui/package.json
+++ b/ui/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "app_ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@formkit/themes": "^1.0.0-beta.11",
+    "@formkit/vue": "^1.0.0-beta.11",
+    "moment": "^2.29.4",
+    "moment-timezone": "^0.5.37",
+    "vue": "^3.2.37",
+    "vue-router": "^4.1.5"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^3.0.3",
+    "sass": "^1.55.0",
+    "vite": "^3.0.7"
+  }
+}
--- a/ui/public/vite.svg
+++ b/ui/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -0,0 +1,22 @@
+<script setup>
+  import { RouterView } from "vue-router";
+</script>
+
+<template>
+  <div>
+    <RouterView />
+  </div>
+</template>
+
+<style scoped>
+  @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
+  html, body {
+    font-family: 'Roboto', sans-serif;
+  }
+  
+  body {
+    color: #121212;
+    margin: 0;
+    padding: 0;
+  }
+</style>
--- a/ui/src/assets/vue.svg
+++ b/ui/src/assets/vue.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
--- a/ui/src/components/HelloWorld.vue
+++ b/ui/src/components/HelloWorld.vue
@@ -0,0 +1,40 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: String
+})
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Install
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+    in your IDE for a better DX
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>
--- a/ui/src/helpers/employee.js
+++ b/ui/src/helpers/employee.js
@@ -0,0 +1,218 @@
+import moment from 'moment';
+
+const getLapse = (from, to) => {
+  return (to - from) / 60 / 60;
+};
+
+const getInProgressTime = (from) => {
+  return ((new Date().getTime() / 1000) - from) / 60 / 60;
+};
+
+const getTotalHours = (timesheets) => timesheets.reduce((acc, ts) => {
+  if (!ts.IsLeave) {
+    if (ts.IsInProgress) {
+      const nowSeconds = (new Date().getTime() / 1000);
+      const startTime = new Date(ts.StartTimeLocalized).getTime() / 1000;
+      const slotsTime = getSlotsTime(ts, nowSeconds);
+      const inprogresstime = getLapse(startTime, nowSeconds);
+      // console.log('inprogresstime, slotsTime :>> ', ts.Id, inprogresstime, slotsTime);
+      // console.log('in progreess ', acc);
+      acc += (inprogresstime - slotsTime);
+      // console.log('in progreess ', acc);
+    } else {
+      acc += ts.TotalTime
+    }
+  }
+  return acc;
+}, 0);
+
+const getSlotsTime = (timesheet, now) => {
+  return (timesheet.Slots || []).reduce((sum, slot) => {
+    const start = slot.intUnixStart;
+    const end = slot.intUnixEnd;
+    const isInProgress = slot.strState === 'In Progress';
+    const isFinished = slot.strState === 'Finished';
+
+    let toAdd = 0;
+    if (isInProgress) {
+      toAdd = getLapse(start, now);
+    } else if (isFinished) {
+      toAdd = getLapse(start, end);
+    }
+    // console.log('timesheet :>> ', timesheet);
+    // console.log('start, end :>> ', start, end);
+    // console.log('getLapse(start, end) :>> ', getLapse(start, end));
+    // console.log('isInProgress :>> ', isInProgress);
+    // const toAdd = !isInProgress ? getLapse(start, end) : getInProgressTime(start);
+    // console.log('toAdd :>>', toAdd);
+    return sum += toAdd;
+  }, 0);
+}
+
+const getTotalLeaveHours = (timesheets) => timesheets.reduce((acc, ts) => {
+  if (ts.IsLeave) {
+    acc += ts.TotalTime
+  }
+  return acc;
+}, 0);
+
+const getEmployeeClasses = (hours, isInProgress) => {
+  const classes = [];
+  if (hours >= 38) {
+    classes.push('red');
+  } else if (hours >= 30) {
+    classes.push('yellow');
+  } else {
+    classes.push('green');
+  }
+  if (isInProgress) {
+    classes.push('in-progress');
+  }
+
+  return classes.join(' ');
+}
+
+const leftPadding = (val, y = 2) => {
+  const exp = (10 ** y) * (val < 0 ? -1 : 1);
+  const v = ((exp + val) + '');
+  return val < 0 ? '-' + v.substring(2) : v.substring(1);
+};
+
+const formatTime = (val) => {
+  const str = Number(val).toFixed(2).split('.');
+  const hours = Number(str[0]);
+  const mins = Math.round((Number('0.' + (str[1] || 0)) * 60));
+  return {
+    hours: leftPadding(hours),
+    minutes: leftPadding(mins)
+  };
+}
+
+const isLunch = ts => {
+  for (let index = 0; index < ts.Slots.length; index++) {
+    const slot = ts.Slots[index];
+    if (slot.strState === 'In Progress' && slot.strType === 'B') {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+export const getEmployeeInfo = (raw) => {
+  const last = raw[raw.length - 1];
+  const totalHours = getTotalHours(raw);
+  const otHours = totalHours - 40;
+  const metadata = last._DPMetaData;
+  const operationalUnit = metadata.OperationalUnitInfo || {};
+  const lunch = isLunch(last);
+  // console.log('isLunch :>> ', last.Id, lunch, metadata.EmployeeInfo.DisplayName);
+  return {
+    displayName: metadata.EmployeeInfo.DisplayName,
+    unit: operationalUnit.OperationalUnitName || '',
+    site: operationalUnit.CompanyName || '',
+    inProgress: hasInProgress(raw),
+    totalTimesheets: raw.length,
+    totalHours,
+    totalHoursObject: formatTime(totalHours),
+    employeeClasses: getEmployeeClasses(totalHours, last.IsInProgress),
+    locationClasses: getEmployeeLocationClass(operationalUnit.CompanyName),
+    overtime: formatTime(otHours),
+    isLunch: lunch,
+  };
+}
+
+const hasInProgress = (raw) => {
+  return raw.filter(d => d.IsInProgress).length > 0;
+}
+
+export const employeeMapper = (data) => {
+  const reduced = data
+    // .filter(d => {
+    //   return d._DPMetaData.EmployeeInfo.DisplayName.indexOf('Bugs') !== -1
+    // })
+    .reduce((acc, val) => {
+      if (!acc[val.Employee]) {
+        acc[val.Employee] = [];
+      }
+      acc[val.Employee].push(val);
+      return acc;
+    }, {});
+  const employees = [];
+  for (const employeeId in reduced) {
+    if (Object.hasOwnProperty.call(reduced, employeeId)) {
+      const timesheets = reduced[employeeId];
+      employees.push(getEmployeeInfo(timesheets));
+    }
+  }
+
+  employees.sort((a, b) => {
+    return a.totalHours > b.totalHours ? -1 : 1;
+  });
+
+  const active = []
+  const inactive = []
+
+  employees.forEach(e => {
+    e.inProgress ? active.push(e) : inactive.push(e);
+  });
+
+  // console.log('active :>> ', active);
+
+  return active.concat(inactive);
+}
+
+function getWeekDelta(cutDay, cutHour, today, hour) {
+  // dia actual mayor que dia de corte Tengo que traer desde el jueves misma semana
+  // mismo dia despues de la hora traer misma semana
+  // dia actual menor que el dia de corte Tengo que traer desde el jueves semana anterior
+  // mismo dia antes de la hora traer semana anterior
+  let weekDelta = (today < cutDay || (today === cutDay && hour < cutHour)) ? -1 : 0;
+  return weekDelta;
+}
+
+export function getTime(timezone, cutDay, cutHour) {
+  const now = moment().tz(timezone);
+  let today = now.day();
+  let hour = now.hour();
+  let weekDelta = getWeekDelta(cutDay, cutHour, today, hour);
+
+  now
+    .day(cutDay)
+    .hour(cutHour)
+    .minute(0)
+    .second(0)
+    .millisecond(0)
+    .add(weekDelta, 'week');
+  // console.log(now.format('HH:mm:ss'), timezone);
+  return now;
+}
+
+const getEmployeeLocationClass = (site = '') => {
+  let k = 'gray';
+  switch (site.toUpperCase()) {
+    case 'SHADOW MOUNTAIN':
+      k = 'pink';
+      break;
+    case 'NORTH LOOP':
+      k = 'blue';
+      break;
+    case 'MONTANA':
+      k = 'white';
+      break;
+    case 'GATEWAY':
+      k = 'green';
+      break;
+    case 'REMOTE':
+      k = 'red';
+      break;
+    case 'ADMINISTRATION':
+      k = 'orange';
+      break;
+
+    default:
+      break;
+  }
+
+  return k;
+}
--- a/ui/src/helpers/fakedata.js
+++ b/ui/src/helpers/fakedata.js
--- a/ui/src/main.js
+++ b/ui/src/main.js
@@ -0,0 +1,35 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import router from './router';
+
+import { plugin, defaultConfig } from '@formkit/vue'
+
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import {
+  faSync,
+  faMagnifyingGlass,
+  faXmark,
+  faUtensils,
+  faCalendarMinus,
+  faCircleInfo,
+  faCircleExclamation,
+  faGear,
+} from '@fortawesome/free-solid-svg-icons';
+import '@formkit/themes/genesis';
+
+library.add(faSync);
+library.add(faMagnifyingGlass);
+library.add(faXmark);
+library.add(faUtensils);
+library.add(faCalendarMinus);
+library.add(faCircleInfo);
+library.add(faCircleExclamation);
+library.add(faGear);
+
+const app = createApp(App)
+  .use(router)
+  .use(plugin, defaultConfig)
+  .component('font-awesome-icon', FontAwesomeIcon)
+  .mount('#app');
--- a/ui/src/router.js
+++ b/ui/src/router.js
@@ -0,0 +1,29 @@
+import { createRouter, createWebHistory, createWebHashHistory } from "vue-router";
+import TimesheetView from "./views/Timesheet/Timesheet.vue";
+import ConfigurationView from './views/Configuration/Configuration.vue';
+
+const routes = [{
+    path: "/",
+    name: "home",
+    component: TimesheetView,
+  }, {
+    path: '/config',
+    name: 'config',
+    component: ConfigurationView
+  }
+  // {
+  //     path: "/about",
+  //     name: "about",
+  //     // route level code-splitting
+  //     // this generates a separate chunk (About.[hash].js) for this route
+  //     // which is lazy-loaded when the route is visited.
+  //     component: () =>
+  //         import ("../views/AboutView.vue"),
+  // },
+];
+const router = createRouter({
+  history: window.IS_ELECTRON ? createWebHashHistory() : createWebHistory(),
+  routes,
+});
+
+export default router;
--- a/ui/src/style.css
+++ b/ui/src/style.css
@@ -0,0 +1,91 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500;1,700&display=swap');
+:root {
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+button:hover {
+  border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 100%;
+  margin: 0 auto;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+   :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
--- a/ui/src/views/Configuration/Configuration.js
+++ b/ui/src/views/Configuration/Configuration.js
@@ -0,0 +1,53 @@
+import { ref } from 'vue';
+import moment from 'moment';
+
+import 'moment-timezone';
+
+export default {
+  setup() {
+
+  },
+  data: () => ({
+    secondsToReload: 60,
+    cutDay: 6,
+    cutHour: 4,
+    timezone: 'America/Denver',
+    apitoken: ''
+  }),
+  async created() {
+    if (window.services) {
+      const {
+        secondsToReload = this.secondsToReload,
+          cutDay = this.cutDay,
+          cutHour = this.cutHour,
+          timezone = this.timezone,
+          apitoken = this.apitoken,
+      } = await window.services.getConfig();
+
+      this.secondsToReload = secondsToReload;
+      this.cutDay = cutDay;
+      this.cutHour = cutHour;
+      this.timezone = timezone;
+      this.apitoken = apitoken;
+    }
+  },
+  methods: {
+    save() {
+      if (window.services) {
+        const config = {
+          secondsToReload: Number(this.secondsToReload),
+          cutDay: Number(this.cutDay),
+          cutHour: Number(this.cutHour),
+          timezone: this.timezone,
+          apitoken: this.apitoken,
+        };
+        console.log('config :>> ', config);
+        window.services.setConfig(config);
+      }
+      this.$router.push('/');
+    },
+    cancel() {
+      this.$router.push('/');
+    }
+  }
+}
--- a/ui/src/views/Configuration/Configuration.scss
+++ b/ui/src/views/Configuration/Configuration.scss
@@ -0,0 +1,14 @@
+h1 {
+  font-size: 24px;
+}
+
+[data-type="button"].cancel-button {
+  .formkit-input {
+    background: #fff;
+    border-color: #121212;
+    color: #121212;
+    &:hover {
+      background: #fefefe;
+    }
+  }
+}
--- a/ui/src/views/Configuration/Configuration.vue
+++ b/ui/src/views/Configuration/Configuration.vue
@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <h1>Configuration</h1>
+    <FormKit
+      type="form"
+      id="config-form"
+      submit-label="Save Config"
+      @submit="save"
+    >
+    <FormKit
+      name="apitoken"
+      label="Deputy Token"
+      type="text"
+      v-model="apitoken"
+    />
+      <FormKit
+        type="select"
+        name="secondsToReload"
+        label="Seconds to Reload"
+        v-model="secondsToReload"
+        :options="[30,45,60,75,90,105,120,150,180,210,240]"
+      />
+      <FormKit
+        type="select"
+        name="cutDay"
+        label="Day"
+        v-model="cutDay"
+        :options="[
+          { label: 'Monday', value: 1},
+          { label: 'Tuesday', value: 2},
+          { label: 'Wednesday', value: 3},
+          { label: 'Thursday', value: 4},
+          { label: 'Friday', value: 5},
+          { label: 'Saturday', value: 6},
+          { label: 'Sunday', value: 0}
+        ]"
+      />
+      <FormKit
+        type="select"
+        name="cutHour"
+        label="Hour"
+        v-model="cutHour"
+        :options="[
+          { label: '1:00', value: 1},
+          { label: '2:00', value: 2},
+          { label: '3:00', value: 3},
+          { label: '4:00', value: 4},
+          { label: '5:00', value: 5},
+          { label: '6:00', value: 6},
+          { label: '7:00', value: 7},
+          { label: '8:00', value: 8},
+          { label: '9:00', value: 9},
+          { label: '10:00', value: 10},
+          { label: '11:00', value: 11},
+          { label: '12:00', value: 12},
+          { label: '13:00', value: 13},
+          { label: '14:00', value: 14},
+          { label: '15:00', value: 15},
+          { label: '16:00', value: 16},
+          { label: '17:00', value: 17},
+          { label: '18:00', value: 18},
+          { label: '19:00', value: 19},
+          { label: '20:00', value: 20},
+          { label: '21:00', value: 21},
+          { label: '22:00', value: 22},
+          { label: '23:00', value: 23},
+        ]"
+      />
+      <FormKit
+        type="select"
+        name="timezone"
+        label="Timezone"
+        v-model="timezone"
+        :options="['America/Denver']"
+      />
+    </FormKit>
+    <FormKit
+      outer-class="cancel-button"
+      type="button"
+      @click="cancel"
+    >Cancel</FormKit>
+  </div>
+</template>
+secondsToReload: 60,
+cutDay: 6,
+cutHour: 4,
+timezone: 'America/Denver'
+<script src="./Configuration.js"></script>
+
+<style lang="scss" src="./Configuration.scss"></style>
--- a/ui/src/views/Timesheet/Timesheet.js
+++ b/ui/src/views/Timesheet/Timesheet.js
@@ -0,0 +1,177 @@
+import { ref } from 'vue'
+import { employeeMapper, getTime } from '../../helpers/employee';
+import { fakeData } from '../../helpers/fakedata';
+import moment from 'moment';
+
+import 'moment-timezone';
+
+
+export default {
+  setup() {
+    const search = ref(null);
+    return {
+      search
+    };
+  },
+  data: () => ({
+    employees: [],
+    loading: true,
+    secondsToReload: 60,
+    cutDay: 6,
+    cutHour: 4,
+    countdown: 0,
+    sinceDate: null,
+    interval: null,
+    timezone: 'America/Denver',
+    searchText: '',
+    searchActive: false,
+    toDate: null,
+    lastWeekMode: false,
+    errorMessage: '',
+  }),
+
+  computed: {
+    hasInfo: function() {
+      return this.employees.length === 0 && !this.lastWeekMode && !this.loading && !this.hasError;
+    },
+    hasMessage: function() {
+      return this.lastWeekMode || this.hasInfo || this.hasError;
+    },
+    hasError: function() {
+      return !!this.errorMessage;
+    },
+    now: function() {
+      return moment().tz(this.timezone);
+    },
+    filteredEmployees: function() {
+      if (!this.searchActive || !this.searchText) {
+        return this.employees;
+      }
+      return this.employees.filter(e => {
+        const toSearch = `${e.displayName}  ${e.unit} ${e.unit}`.toUpperCase();
+        const match = toSearch.indexOf(this.searchText.toUpperCase()) !== -1;
+        return match;
+      });
+    }
+  },
+
+  async created() {
+    console.log('created');
+    await this.initConfig();
+    this.reload();
+  },
+
+  methods: {
+    async initConfig() {
+      if (window.services) {
+        const config = await window.services.getConfig();
+        const {
+          secondsToReload = this.secondsToReload,
+            cutDay = this.cutDay,
+            cutHour = this.cutHour,
+            timezone = this.timezone
+        } = config;
+        this.secondsToReload = secondsToReload;
+        this.cutDay = cutDay;
+        this.cutHour = cutHour;
+        this.timezone = timezone;
+      }
+    },
+    async reload() {
+      this.loading = true;
+      clearInterval(this.interval);
+      await this.fetchData();
+      this.now = moment().tz(this.timezone);
+      this.setReloadInterval();
+      this.loading = false;
+    },
+
+    onClickReload() {
+      this.reload();
+    },
+
+    onClickLastWeekMode() {
+      this.lastWeekMode = !this.lastWeekMode;
+      this.reload();
+    },
+
+    onClickSearch() {
+      this.searchActive = !this.searchActive;
+      if (this.searchActive) {
+        this.search.focus();
+      }
+    },
+
+    setReloadInterval() {
+      this.countdown = this.secondsToReload;
+      this.interval = setInterval(() => {
+        this.countdown -= 1;
+        if (this.countdown === 0) {
+          this.reload();
+        }
+      }, 1000)
+    },
+
+    async fetchData() {
+      let date = getTime(this.timezone, this.cutDay, this.cutHour);
+      let toDate = this.toDate || moment().tz(this.timezone);
+
+      if (this.lastWeekMode) {
+        toDate = date.clone().subtract(1, 'second');
+        date.subtract(1, 'week');
+      }
+
+      this.sinceDate = date.format('MM-DD-YYYY HH:mm:ss');
+      this.nowDate = toDate.format('MM-DD-YYYY HH:mm:ss')
+
+      const body = {
+        search: {
+          s1: {
+            field: 'StartTime',
+            data: Math.floor(date.toDate().getTime() / 1000),
+            type: 'gt',
+          },
+          s2: {
+            field: 'StartTime',
+            data: Math.floor(toDate.toDate().getTime() / 1000),
+            type: 'le',
+          },
+          s3: {
+            field: 'Discarded',
+            data: true,
+            type: 'ns'
+          }
+        },
+        join: ['EmployeeObject'],
+      };
+      let response;
+
+      console.log('body :>> ', body);
+
+      if (window.services) {
+        try {
+          response = await window.services.getTimesheet(body);
+          if (response.status < 200 || response.status >= 300) {
+            this.errorMessage = this.getErrorMessage(response.status);
+          } else {
+            this.employees = employeeMapper(response.body);
+            this.errorMessage = '';
+          }
+
+          console.log('response :>> ', response);
+        } catch (error) {
+          console.log('error :>> ', error);
+        }
+      } else {
+        this.employees = employeeMapper(fakeData);
+      }
+
+    },
+    getErrorMessage(status) {
+      if (status === 401) {
+        return "Unauthorized, please check token."
+      }
+      return `Cannot connect to deputy services. (${status})`;
+    }
+  }
+}
--- a/ui/src/views/Timesheet/Timesheet.scss
+++ b/ui/src/views/Timesheet/Timesheet.scss
@@ -0,0 +1,265 @@
+.time {
+  display: inline-block;
+}
+
+.message {
+  .danger {
+    background-color: #d90429;
+  }
+  .info {
+    background-color: #f6bd60;
+    color: #000814;
+  }
+}
+
+.icon-blue {
+  color: #0077b6;
+}
+
+.icon-red {
+  color: #f08080;
+}
+
+.employees-container {
+  color: #121212;
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  height: 100%;
+  padding-top: 40px;
+  &.with-message {
+    padding-top: 80px;
+  }
+}
+
+.employee-box {
+  min-height: 120px;
+  margin: 3px;
+  padding: 4px 8px 8px;
+  width: 250px;
+  flex-grow: 1;
+  opacity: 0.7;
+  border-radius: 6px;
+  border-width: 2px;
+  border-style: solid;
+  .lunch-marker {
+    float: right;
+    opacity: 0.7;
+    margin-right: 8px;
+  }
+  &.in-progress {
+    opacity: 1;
+  }
+  &-placeholder {
+    margin: 3px;
+    padding: 8px;
+    width: 250px;
+    flex-grow: 1;
+    border: 2px solid transparent;
+  }
+  &.green {
+    background-color: #B7E0D1;
+    border-color: #1E4738;
+    .lunch-marker {
+      color: #1E4738;
+    }
+  }
+  &.red {
+    background-color: #F3A4B4;
+    border-color: #9A132E;
+    .lunch-marker {
+      color: #9A132E;
+    }
+  }
+  &.yellow {
+    background-color: #EAE591;
+    border-color: #9A941D;
+    .lunch-marker {
+      color: #9A941D;
+    }
+  }
+}
+
+.name {
+  text-align: center;
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  width: 98%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.two-cols {
+  margin-top: 8px;
+  display: grid;
+  grid-template-columns: 50% 50%;
+}
+
+.label {
+  text-align: center;
+  font-size: 14px;
+}
+
+.value {
+  text-align: center;
+  font-size: 20px;
+}
+
+.fixed-top {
+  width: 100%;
+  position: fixed;
+  opacity: 1;
+  z-index: 999;
+}
+
+.toolbar {
+  background-color: #213547;
+  color: #fff;
+  display: flex;
+  font-size: 90%;
+  .countdown {
+    display: inline-block;
+    font-size: 90%;
+    opacity: 60%;
+  }
+  &>div {
+    flex-grow: 1;
+    margin: 4px 12px;
+  }
+  .time {
+    max-width: 450px;
+    text-align: left;
+    ;
+  }
+  .search-input {
+    outline: none;
+    width: 0;
+    opacity: 0;
+    margin: 0;
+    padding: 0;
+    border: none;
+    transition-duration: 0.1s, 0.2s;
+    transition-property: opacity, width;
+    transition-timing-function: ease, ease-in;
+    background-color: #D4F4DD;
+    border-radius: 3px;
+    &.active {
+      //  transform: scaleX(1);
+      width: 200px;
+      opacity: 1;
+      border: 0;
+    }
+  }
+  .buttons {
+    max-width: 470px;
+    text-align: right;
+  }
+  &-link {
+    color: #fff;
+    margin: auto 10px;
+    opacity: 0.6;
+    transition-property: opacity;
+    transition-delay: 0.1s;
+    transition-duration: 0.2s;
+    transition-timing-function: ease;
+    &:hover {
+      color: #fff;
+      opacity: 1;
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+    &.last-week-mode.active {
+      color: #d90429;
+    }
+  }
+}
+
+.location {
+  font-size: 63%;
+  color: #050517;
+  text-transform: uppercase;
+  .unit {
+    font-weight: 600;
+  }
+  .site {
+    font-weight: 300;
+  }
+  .pill {
+    background-color: #ded6d1;
+    border-radius: 5px;
+    padding: 0 5px;
+    display: flex;
+    color: #050517;
+    width: auto;
+    gap: 10px;
+    line-height: 18px;
+    justify-content: space-between;
+    border: 0.5px solid #050517;
+  }
+  .topper {
+    display: flex;
+    align-content: center;
+    gap: 4px;
+    .circle {
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      margin-top: 5px;
+      border-radius: 50%;
+      border-width: 1px;
+      border-style: solid;
+      &.gray {
+        background-color: #ded6d1;
+        border-color: #666;
+      }
+      &.pink {
+        background-color: #FF5C95;
+        border-color: #F50056;
+      }
+      &.blue {
+        background-color: #275DAD;
+        border-color: #173564;
+      }
+      &.white {
+        background-color: #FFFFFF;
+        border-color: #666;
+      }
+      &.green {
+        background-color: #0C8346;
+        border-color: #032514;
+      }
+      &.red {
+        background-color: #C42847;
+        border-color: #932525;
+      }
+      &.orange {
+        background-color: #E28413;
+        border-color: #96580D;
+      }
+    }
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+   :root {
+    background-color: #213547;
+    color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+  .toolbar {
+    color: #f9f9f9;
+    background-color: #000;
+    .search-input {
+      background-color: #666;
+      color: #FFF;
+    }
+  }
+}
--- a/ui/src/views/Timesheet/Timesheet.vue
+++ b/ui/src/views/Timesheet/Timesheet.vue
@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <div class="fixed-top">
+      <div class="toolbar">
+        <div class="time">{{this.sinceDate}}&nbsp;&nbsp;to&nbsp;&nbsp;{{this.nowDate}}</div>
+        <div class="title">Salud y Vida - Timesheet</div>
+        <div class="buttons">
+          <div class="countdown">
+            <span v-if="!loading">Reloading in {{countdown}} <span v-if="countdown === 1">second</span><span v-else>seconds</span></span>
+            <span v-else>Loading...</span>
+          </div>
+          <a class="toolbar-link" @click.stop.prevent="onClickReload" href="">
+            <font-awesome-icon v-if="loading" icon="fa-solid fa-sync" spin />
+            <font-awesome-icon v-else icon="fa-solid fa-sync" />
+          </a>
+          <a class="toolbar-link last-week-mode" :class="{active: lastWeekMode}" @click.stop.prevent="onClickLastWeekMode" href="">
+            <font-awesome-icon icon="fa-solid fa-calendar-minus" />
+          </a>
+          
+          <input v-model="searchText" ref="search" type="text" class="search-input" :class="{active: searchActive}" />
+          <a class="toolbar-link" @click.stop.prevent="onClickSearch" href="">
+            <font-awesome-icon v-if="searchActive" icon="fa-solid fa-xmark" />
+            <font-awesome-icon v-else icon="fa-solid fa-magnifying-glass" />
+          </a>
+          <router-link class="toolbar-link" to="/config">
+            <font-awesome-icon icon="fa-solid fa-gear" />
+          </router-link>
+        </div>
+      </div>
+      <div v-show="hasMessage" class="message">
+        <div v-show="lastWeekMode" class="danger">
+          Last week mode active
+        </div>
+        <div v-show="hasInfo" class="info">
+          <font-awesome-icon class="icon-blue" icon="fa-solid fa-circle-info" /> Timeheet is empty, try last week mode.
+        </div>
+        <div v-show="hasError" class="danger">
+          <font-awesome-icon class="icon-red" icon="fa-solid fa-circle-exclamation" /> {{errorMessage}}
+        </div>
+      </div>
+    </div>
+    <div class="employees-container" :class="{'with-message': hasMessage}">
+      <div class="employee-box" :class="employee.employeeClasses" v-for="employee in filteredEmployees" :key="employee.employeeId">
+        <div class="location">
+          <!-- <div class="pill">
+            <div class="unit">{{employee.unit}}</div>
+            <div class="site">{{employee.site}}</div>
+          </div> -->
+          <div class="topper">
+            <span class="circle" :class="employee.locationClasses"></span>
+            <span class="unit">{{employee.unit}}</span>
+            <span v-if="employee.unit || employee.site">|</span>
+            <span class="site">{{employee.site}}</span>
+          </div>
+        </div>
+        <div class="name" :title="employee.displayName">{{employee.displayName}} <span class="lunch-marker"><font-awesome-icon beat-fade size="2xs" v-if="employee.isLunch" icon="fa-solid fa-utensils" /></span></div>
+        
+        <div class="two-cols">
+          <div class="col">
+            <div class="label">Week hours</div>
+            <div class="value">{{employee.totalHoursObject.hours}}h {{employee.totalHoursObject.minutes}}m</div>
+          </div>
+          <div class="col">
+            <div class="label">O.T.</div>
+            <div class="value">{{employee.overtime.hours}}h {{employee.overtime.minutes}}m</div>
+          </div>
+        </div>
+      </div>
+      <div class="employee-box-placeholder"></div>
+      <div class="employee-box-placeholder"></div>
+      <div class="employee-box-placeholder"></div>
+      <div class="employee-box-placeholder"></div>
+      <div class="employee-box-placeholder"></div>
+      <div class="employee-box-placeholder"></div>
+      <div class="employee-box-placeholder"></div>
+      <div class="employee-box-placeholder"></div>
+      <div class="employee-box-placeholder"></div>
+      <div class="employee-box-placeholder"></div>
+    </div>
+  </div>
+</template>
+
+<script src="./Timesheet.js"></script>
+
+<style lang="scss" src="./Timesheet.scss"></style>
--- a/ui/vite.config.js
+++ b/ui/vite.config.js
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue({
+    outDir: '../app/ui'
+  })],
+
+})
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>`