initial commit

2023-03-14 18:29:01 +01:00 · 2023-03-14 18:29:01 +01:00 · a22c74393f
commit a22c74393f
parent a13c963a75
41 changed files with 42730 additions and 1132 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,3 +1,5 @@
 node_modules
 out
 .history
 env.json
 dist
--- a/app/config.js
+++ b/app/config.js
@ -0,0 +1,36 @@
 const fs = require('fs-extra');
 const path = require('path');
 const { app } = require('electron');
 const userDataPath = app.getPath('userData');
 const CONFIG_FILE_NAME = 'timesheet-config.json';
 const configPath = path.join(userDataPath, CONFIG_FILE_NAME);
 function initializeConfig() {
  const initial = require('./config.json');
  saveConfig(initial);
 }
 function saveConfig(config) {
  console.log('Saving: ' + JSON.stringify(config));
  fs.writeJSONSync(configPath, config, {
    encoding: 'utf-8',
    spaces: 2
  });
 }
 function getConfig() {
  if (!fs.existsSync(configPath)) {
    initializeConfig();
  }
  const options = fs.readJSONSync(configPath, 'utf-8');
  return options;
 }
 function setConfig(config) {
  saveConfig(config);
 }
 module.exports = {
  getConfig,
  setConfig
 };
--- a/app/config.json
+++ b/app/config.json
@ -0,0 +1,6 @@
 {
  "secondsToReload": 60,
  "cutDay": 6,
  "cutHour": 4,
  "timezone": "America/Denver"
 }
--- a/app/dist/index.html
+++ b/app/dist/index.html
@ -0,0 +1,18 @@
 <!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>
  <script type="module" crossorigin src="./assets/index.680f16a8.js"></script>
  <link rel="stylesheet" href="./assets/index.6a5e126f.css">
 </head>
 <body>
  <div id="app"></div>
 </body>
 </html>
--- a/app/dist/vite.svg
+++ b/app/dist/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/app/favicon-32x32.png
+++ b/app/favicon-32x32.png
--- a/app_main/index.htm_
+++ b/app_main/index.htm_
--- a/app_main/index.html
+++ b/app_main/index.html
--- a/app/main.js
+++ b/app/main.js
@ -0,0 +1,57 @@
 const { app, BrowserWindow, ipcMain } = require('electron');
 const path = require('path');
 const { post } = require('./request')
 const { deputyUrl, deputyToken } = require('../env.json');
 const { getConfig, setConfig } = require('./config');
 function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 1440 ,
    height: 900,
    show: false,
    icon: path.join(__dirname, 'favicon-32x32.png'),
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      allowRunningInsecureContent: true,
    }
  });
  ipcMain.handle('getTimesheet', async(event, body) => {
    try {
      const { apitoken } = getConfig();
      const token = apitoken || deputyToken;
      return await post(deputyUrl, body, { Authorization: `OAuth ${token}` });
    } catch (err) {
      console.log('err :>> ', err);
    }
  });
  ipcMain.handle('getAppConfig', () => {
    const config = getConfig();
    return {... { apitoken: deputyToken }, ...config };
  });
  ipcMain.handle('setAppConfig', (event, config) => {
    return setConfig(config);
  })
  mainWindow.maximize();
  mainWindow.removeMenu();
  mainWindow.loadFile(path.join(__dirname, '..', 'ui', 'dist', 'index.html'));
  // Open the DevTools.
  // mainWindow.webContents.openDevTools();
  mainWindow.show();
 }
 app.whenReady().then(() => {
  createWindow();
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  })
 });
 app.on('window-all-closed', function() {
  if (process.platform !== 'darwin') app.quit()
 });
--- a/app/preload.js
+++ b/app/preload.js
@ -0,0 +1,16 @@
 const { contextBridge, ipcRenderer } = require('electron');
 contextBridge.exposeInMainWorld('IS_ELECTRON', true);
 contextBridge.exposeInMainWorld('versions', {
  node: () => process.versions.node,
  chrome: () => process.versions.chrome,
  electron: () => process.versions.electron,
  app: () => '1.2.2',
 });
 contextBridge.exposeInMainWorld('services', {
  getTimesheet: (body) => ipcRenderer.invoke('getTimesheet', body),
  getConfig: () => ipcRenderer.invoke('getAppConfig'),
  setConfig: config => ipcRenderer.invoke('setAppConfig', config),
 });
--- a/app/renderer.js
+++ b/app/renderer.js
@ -0,0 +1,7 @@
 const func = async() => {
  const response = window.versions.app
  console.log(response);
  window.title += ` ${window.versions.app}`;
 }
 func();
--- a/app/request.js
+++ b/app/request.js
@ -0,0 +1,64 @@
 const { net } = require('electron');
 async function get(url, headers) {
  return request({ url, method: 'GET', headers })
 }
 async function post(url, body, headers) {
  return request({ url, method: 'POST', headers }, body)
 }
 async function request(options, body) {
  return new Promise((resolve, reject) => {
    const responseBody = [];
    let responseHeaders;
    let responseStatus;
    const request = net.request(options);
    request.on('response', (response) => {
      responseStatus = response.statusCode;
      responseHeaders = response.headers;
      response.on('data', (chunk) => {
        if (chunk) {
          responseBody.push(`${chunk}`);
        }
      });
      response.on('end', () => {
        resolve({
          status: responseStatus,
          headers: responseHeaders,
          body: parseReponseBody(responseBody),
        });
      });
      response.on('aborted', () => console.log('request aborted'));
      response.on('error', (error) => reject(error));
    });
    request.on('error', (error) => reject(error));
    request.setHeader('Content-Type', 'application/json');
    if (['POST'].includes(options.method.toUpperCase())) {
      request.write(JSON.stringify(body), 'utf-8')
    }
    request.end();
  });
 }
 function parseReponseBody(body) {
  if (Array.isArray(body)) {
    if (body.length) {
      return JSON.parse(body.join(''));
    }
  }
 }
 module.exports = {
  get,
  post
 };
--- a/app_main/style.css
+++ b/app_main/style.css
--- a/app_main/main.js
+++ b/app_main/main.js
@ -1,45 +0,0 @@
 const { app, BrowserWindow, ipcMain, net } = require('electron');
 const path = require('path');
 const { marked } = require('marked');
 const { get } = require('./request')
 function createWindow() {
    const mainWindow = new BrowserWindow({
        // width: 800,
        // height: 600,
        show: false,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
            nodeIntegration: true,
        }
    });
    ipcMain.handle('ping', () => 'pong');
    ipcMain.handle('renderMarkdownToHtml', (event, markdown) => {
        return marked.parse(markdown);
    });
    ipcMain.handle('acars', async() => {
        const url = 'http://lsaapi.gairacalabs.com:3100/api/acars';
        // const url = 'http://lsaapi.gairacalabs.com:3100/graphql';
        const response = await get(url);
        return response;
    });
    mainWindow.loadFile(path.join(__dirname, 'index.html'));
    // Open the DevTools.
    mainWindow.webContents.openDevTools()
    mainWindow.show();
 }
 app.whenReady().then(() => {
    createWindow();
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow();
    })
 });
 app.on('window-all-closed', function() {
    if (process.platform !== 'darwin') app.quit()
 });
--- a/app_main/preload.js
+++ b/app_main/preload.js
@ -1,11 +0,0 @@
 const { contextBridge, ipcRenderer } = require('electron');
 const marked = require('marked');
 contextBridge.exposeInMainWorld('versions', {
    node: () => process.versions.node,
    chrome: () => process.versions.chrome,
    electron: () => process.versions.electron,
    ping: () => ipcRenderer.invoke('ping'),
    renderMarkdownToHtml: (currentContent) => ipcRenderer.invoke('renderMarkdownToHtml', currentContent),
    acars: () => ipcRenderer.invoke('acars'),
 });
--- a/app_main/renderer.js
+++ b/app_main/renderer.js
@ -1,33 +0,0 @@
 const markdownView = document.querySelector('#markdown');
 const htmlView = document.querySelector('#html');
 // const newFileButton = document.querySelector('#new-file');
 // const openFileButton = document.querySelector('#open-file');
 // const saveMarkdownButton = document.querySelector('#save-markdown');
 // const revertButton = document.querySelector('#revert');
 // const saveHtmlButton = document.querySelector('#save-html');
 // const showFileButton = document.querySelector('#show-file');
 // const openInDefaultButton = document.querySelector('#open-in-default');
 console.log(document.querySelector('#markdown'));
 const renderMarkdownToHtml = async(markdown) => {
    const response = await window.versions.renderMarkdownToHtml(markdown);
    htmlView.innerHTML = response;
 };
 markdownView.addEventListener('keyup', event => {
    const currentContent = event.target.value;
    console.log('currentContent :>> ', currentContent);
    renderMarkdownToHtml(currentContent);
 });
 const information = document.getElementById('info')
 information.innerText = `This app is using Chrome (v${versions.chrome()}), Node.js (v${versions.node()}), and Electron (v${versions.electron()})`
 const func = async() => {
    const acars = await window.versions.acars()
    const response = await window.versions.ping()
    console.log(acars) // prints out 'pong'
 }
 func()
--- a/app_main/request.js
+++ b/app_main/request.js
@ -1,57 +0,0 @@
 const { net } = require('electron');
 async function get(url) {
    return request({ url, method: 'GET' })
 }
 async function post(url, body) {
    return request({ url, method: 'POST' }, body)
 }
 async function request(options, body) {
    return new Promise((resolve, reject) => {
        const responseBody = [];
        let responseHeaders;
        let responseStatus;
        console.log(options);
        const request = net.request(options);
        request.on('response', (response) => {
            responseStatus = response.statusCode;
            responseHeaders = response.headers;
            response.on('data', (chunk) => {
                if (chunk) {
                    responseBody.push(`${chunk}`);
                }
            });
            response.on('end', () => {
                resolve({
                    status: responseStatus,
                    headers: responseHeaders,
                    body: JSON.parse(responseBody.join('')),
                });
            });
            response.on('aborted', () => console.log('request aborted'));
            response.on('error', (error) => reject(error));
        });
        request.on('error', (error) => reject(error));
        request.setHeader('Content-Type', 'application/json');
        if (['POST'].includes(options.method.toUpperCase())) {
            request.write(body, 'utf-8')
        }
        request.end();
    });
 }
 module.exports = {
    get
 };
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,8 +1,8 @@
 {
-    "name": "firesale",
+  "name": "syv-timesheet",
-    "version": "1.0.0",
+  "version": "1.5.0",
  "description": "Salud y Vida Timesheet",
-    "main": "app_main/main.js",
+  "main": "app/main.js",
  "scripts": {
    "start": "electron-forge start",
    "postinstall": "electron-rebuild",
@ -13,8 +13,11 @@
  "author": "José Conde",
  "license": "ISC",
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.2.0",
    "@fortawesome/free-solid-svg-icons": "^6.2.0",
    "@fortawesome/vue-fontawesome": "^3.0.1",
    "electron-squirrel-startup": "^1.0.0",
-        "marked": "^4.1.0"
+    "fs-extra": "^10.1.0"
  },
  "devDependencies": {
    "@electron-forge/cli": "^6.0.0-beta.65",
--- 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>`