2023-11-08 20:38:40 +00:00
38 changed files with 5624 additions and 1224 deletions
--- a/cista-front/components.d.ts
+++ b/cista-front/components.d.ts
@ -0,0 +1,34 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    ABreadcrumb: typeof import('ant-design-vue/es')['Breadcrumb']
+    ABreadcrumbItem: typeof import('ant-design-vue/es')['BreadcrumbItem']
+    AButton: typeof import('ant-design-vue/es')['Button']
+    ACol: typeof import('ant-design-vue/es')['Col']
+    AForm: typeof import('ant-design-vue/es')['Form']
+    AFormItem: typeof import('ant-design-vue/es')['FormItem']
+    AImage: typeof import('ant-design-vue/es')['Image']
+    AInput: typeof import('ant-design-vue/es')['Input']
+    APageHeader: typeof import('ant-design-vue/es')['PageHeader']
+    APopover: typeof import('ant-design-vue/es')['Popover']
+    AppNavigation: typeof import('./src/components/AppNavigation.vue')['default']
+    AProgress: typeof import('ant-design-vue/es')['Progress']
+    ARow: typeof import('ant-design-vue/es')['Row']
+    ATable: typeof import('ant-design-vue/es')['Table']
+    ATooltip: typeof import('ant-design-vue/es')['Tooltip']
+    FileCarousel: typeof import('./src/components/FileCarousel.vue')['default']
+    FileExplorer: typeof import('./src/components/FileExplorer.vue')['default']
+    FileViewer: typeof import('./src/components/FileViewer.vue')['default']
+    HeaderMain: typeof import('./src/components/HeaderMain.vue')['default']
+    NotificationLoading: typeof import('./src/components/NotificationLoading.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    UploadButton: typeof import('./src/components/UploadButton.vue')['default']
+  }
+}
--- a/cista-front/index.html
+++ b/cista-front/index.html
@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Vite App</title>
  </head>
  <body>
--- a/cista-front/package-lock.json
+++ b/cista-front/package-lock.json
--- a/cista-front/package.json
+++ b/cista-front/package.json
@ -1,27 +1,49 @@
 {
-  "name": "cista-front",
+  "name": "front",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
+    "test:unit": "vitest",
    "build-only": "vite build",
-    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
+    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/"
  },
  "dependencies": {
-    "pinia": "^2.1.7",
+    "@ant-design/icons-vue": "^7.0.0",
+    "@vueuse/core": "^10.4.1",
+    "ant-design-vue": "^4.0.3",
+    "axios": "^1.5.0",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
+    "pinia": "^2.1.6",
+    "unplugin-vue-components": "^0.25.2",
+    "vite-plugin-rewrite-all": "^1.0.1",
    "vue": "^3.3.4",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.4"
  },
  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.3.3",
    "@tsconfig/node18": "^18.2.2",
-    "@types/node": "^18.18.5",
-    "@vitejs/plugin-vue": "^4.4.0",
+    "@types/jsdom": "^21.1.3",
+    "@types/lodash-es": "^4.17.10",
+    "@types/node": "^18.17.17",
+    "@vitejs/plugin-vue": "^4.3.4",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/test-utils": "^2.4.1",
    "@vue/tsconfig": "^0.4.0",
-    "npm-run-all2": "^6.1.1",
+    "eslint": "^8.49.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "jsdom": "^22.1.0",
+    "npm-run-all2": "^6.0.6",
+    "prettier": "^3.0.3",
    "typescript": "~5.2.0",
-    "vite": "^4.4.11",
-    "vue-tsc": "^1.8.19"
+    "vite": "^4.4.9",
+    "vitest": "^0.34.4",
+    "vue-tsc": "^1.8.11"
  }
 }
--- a/cista-front/src/App.vue
+++ b/cista-front/src/App.vue
@ -1,85 +1,65 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
+  import { RouterView } from 'vue-router'
+  import type { ComputedRef } from 'vue'
+  import { watchEffect } from 'vue'
+  import createWebSocket from '@/repositories/WS'
+  import { url_document_watch_ws, url_document_upload_ws, DocumentHandler, DocumentUploadHandler } from '@/repositories/Document'
+  import { useDocumentStore } from '@/stores/documents'
+
+  import { computed } from 'vue'
+  import HeaderMain from './components/HeaderMain.vue'
+  import AppNavigation from './components/AppNavigation.vue'
+  import Router from './router/index'; 
+
+  interface Path {
+    path: string;
+    pathList: string[];
+  }
+  const documentStore = useDocumentStore()
+  const path: ComputedRef<Path> = computed( () => {
+    const pathList = Router.currentRoute.value.path
+      .split('/')
+      .filter( value => value !== '')
+
+    return {
+      path: Router.currentRoute.value.path,
+      pathList
+    }
+  })
+
+  watchEffect(() => {
+    const documentHandler = new DocumentHandler()
+    const documentUploadHandler = new DocumentUploadHandler()
+
+    const wsWatch = createWebSocket(url_document_watch_ws, documentHandler.handleWebSocketMessage)
+    const wsUpload = createWebSocket(url_document_upload_ws, documentUploadHandler.handleWebSocketMessage)
+
+    documentStore.wsWatch = wsWatch; 
+    documentStore.wsUpload = wsUpload; 
+  })
+
+  export type { Path }
 </script>

 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-
-      <nav>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-      </nav>
-    </div>
+  <header class="wrapper">
+      <HeaderMain WS="WS"></HeaderMain>
+      <AppNavigation :path="path.pathList"></AppNavigation>
  </header>
-
-  <RouterView />
+  
+  <RouterView class="page-container" />
 </template>

 <style scoped>
-header {
-  line-height: 1.5;
-  max-height: 100vh;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-nav {
-  width: 100%;
-  font-size: 12px;
-  text-align: center;
-  margin-top: 2rem;
-}
-
-nav a.router-link-exact-active {
-  color: var(--color-text);
-}
-
-nav a.router-link-exact-active:hover {
-  background-color: transparent;
-}
-
-nav a {
-  display: inline-block;
-  padding: 0 1rem;
-  border-left: 1px solid var(--color-border);
-}
-
-nav a:first-of-type {
-  border: 0;
-}
-
-@media (min-width: 1024px) {
-  header {
+  .wrapper{
+    background-color: var(--primary-background);
+    padding: 0.2em 0.5em; 
    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
+    flex-direction: column;
+    gap: 10px;
  }
-
-  .logo {
-    margin: 0 2rem 0 0;
+  .page-container{
+    flex-grow: 2;
+    padding: 0;
  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-
-  nav {
-    text-align: left;
-    margin-left: -1rem;
-    font-size: 1rem;
-
-    padding: 1rem 0;
-    margin-top: 1rem;
-  }
-}
 </style>
--- a/cista-front/src/assets/base.css
+++ b/cista-front/src/assets/base.css
@ -1,86 +0,0 @@
-/* color palette from <https://github.com/vuejs/theme> */
-:root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
-
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  font-weight: normal;
-}
-
-body {
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition:
-    color 0.5s,
-    background-color 0.5s;
-  line-height: 1.6;
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue',
-    sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
--- a/cista-front/src/assets/logo.svg
+++ b/cista-front/src/assets/logo.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
--- a/cista-front/src/assets/main.css
+++ b/cista-front/src/assets/main.css
@ -1,35 +1,86 @@
-@import './base.css';
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-
-  font-weight: normal;
+:root {
+    --primary-background: #181818;
+    --secondary-background: #ffffff;
+    --font-color: #333333;
+    --table-background: #535353;
+    --primary-color: #ffffff;
+    --secondary-color: #ccc;
+    --blue-color: #66ffeb
 }
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
+@media (prefers-color-scheme: dark) {
+    :root {
+        --primary-background: #181818;
+        --secondary-background: #333333;
+        --font-color: #ffffff;
+        --table-background: #535353;
+        --primary-color: #ffffff;
+        --secondary-color: #ccc;
+        --blue-color: #66ffeb
+    }
 }
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
+body {
+    background-color: var(--table-background);
 }
-
-@media (min-width: 1024px) {
-  body {
+.ant-breadcrumb-separator, .ant-breadcrumb-link, .ant-breadcrumb .anticon {
+    color: var(--primary-color) !important;
+    font-size: 1.2em !important;
+}
+#app{
+    height: 100%;
    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
+    flex-direction: column;
+    background-color: var(--secondary-background);
 }
+
+.ant-image-preview-mask{
+    background-color: rgba(0, 0, 0, 0.6) !important;
+    backdrop-filter: blur(15px) !important;
+}
+.ant-table-cell:hover{
+    background-color: initial !important;
+}
+.ant-table-wrapper .ant-table-tbody >tr.ant-table-row-selected >td, 
+.ant-table-wrapper .ant-table-tbody >tr.ant-table-row-selected:hover>td {
+    background-color: transparent;
+}
+.ant-form-item .ant-form-item-label >label{
+    color: var(--font-color);
+}
+
+@media (prefers-color-scheme: dark) {
+
+    .ant-table-wrapper .ant-table-thead>tr>th {
+        background-color: var(--table-background);
+    }
+
+    .ant-table-wrapper .ant-table-thead th.ant-table-column-has-sorters:hover {
+        background-color: var(--table-background);
+    }
+
+    .ant-table-content {
+        background-color: var(--secondary-background);
+    }
+
+    .ant-table-cell-row-hover,
+    .ant-table-wrapper .ant-table-tbody>tr.ant-table-row:hover>td {
+        background-color: var(--primary-background) !important;
+    }
+
+    .ant-table-column-title,
+    .ant-table-column-sorter,
+    .ant-table-column-sort,
+    .ant-table-cell,
+    a {
+        color: var(--primary-color) !important;
+    }
+    .ant-table-cell>button>.anticon {
+        color: var(--primary-color);
+    }
+    .ant-notification-close-x{ 
+      color: var(--secondary-background);
+    }
+    .ant-empty-description{
+        color: var(--primary-color);
+    } 
+}
+  
--- a/cista-front/src/components/AppNavigation.vue
+++ b/cista-front/src/components/AppNavigation.vue
@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { HomeOutlined } from '@ant-design/icons-vue';
+import { RouterLink } from 'vue-router'
+
+const props = withDefaults(
+  defineProps<{
+    path: Array<string>
+  }>(),
+  {},
+)
+
+function generateUrl(pathIndex: number) {
+  return "/" + props.path.slice(0, pathIndex + 1).join('/')
+}
+</script>
+
+<template>
+  <nav>
+    <a-breadcrumb>
+      <a-breadcrumb-item>
+        <RouterLink to="/">
+          <home-outlined />
+        </RouterLink>
+      </a-breadcrumb-item>
+      
+      <a-breadcrumb-item v-for="(location, index) in path" :key="index">
+        <RouterLink :to ="generateUrl(index)">
+          <span :class="(index === path.length - 1) && 'last' ">{{ decodeURIComponent(location) }}</span>
+        </RouterLink>
+      </a-breadcrumb-item>
+    </a-breadcrumb>
+  </nav>
+</template>
+
+<style scoped>
+    nav, span{
+      color: var(--primary-color);
+    }
+    span:hover, .last{
+    color: var(--blue-color)
+    
+  }
+</style>
--- a/cista-front/src/components/FileCarousel.vue
+++ b/cista-front/src/components/FileCarousel.vue
@ -0,0 +1,136 @@
+<template>
+  <div class="carousel" ref="fileCarousel"> 
+    <a-page-header :style="{ visibility: idle ? 'hidden' : 'visible' }">
+      <template #extra>
+        <a-button type="text" class="action-button" :onclick="toggle" :icon="h(isFullscreen? FullscreenExitOutlined: FullscreenOutlined)" />
+        <a-button type="text" class="action-button" :onclick="redirectBack" :icon="h(CloseOutlined)" />
+      </template>
+    </a-page-header>
+    <a-row class="slider">
+      <a-col :span="2" class="centered-vertically">
+        <div class="custom-slick-arrow slick-arrow slick-prev centered" @click="next(-1)" style="left: 10px; z-index: 1">
+          <LeftOutlined v-show="!idle" />
+        </div>
+      </a-col>
+      <a-col :span="20" class="centered">
+        <FileViewer v-if="!documentStore.loading" :visibleImg="visible" @visibleImg="setVisible" :type="fileType"></FileViewer>
+      </a-col>
+      <a-col :span="2" class="centered-vertically right">
+        <div class="custom-slick-arrow slick-arrow slick-prev centered" @click="next(1)" style="right: 10px">
+          <RightOutlined v-show="!idle" />
+        </div>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { h, ref, watchEffect } from 'vue'
+import { useDocumentStore } from '@/stores/documents'
+import { useIdle, useFullscreen } from '@vueuse/core'
+import { LeftOutlined, RightOutlined, FullscreenOutlined, FullscreenExitOutlined, CloseOutlined } from '@ant-design/icons-vue';
+import { getFileType } from '@/utils'
+import Router from '@/router/index';
+import FileViewer from './FileViewer.vue';
+
+const fileCarousel = ref<HTMLElement | null>(null)
+const { isFullscreen, toggle } = useFullscreen(fileCarousel)
+const visible = ref<boolean>(false);
+const documentStore = useDocumentStore()
+const fileType = ref<string| undefined>(undefined);
+watchEffect(() => {
+  if(documentStore.mainDocument[0] && documentStore.mainDocument[0].type === 'file'){
+    const fileExt =  documentStore.mainDocument[0].ext 
+    fileType.value = getFileType(fileExt)
+  }
+})
+function setVisible(value: boolean) {
+  visible.value = value;
+}
+
+const { idle } = useIdle(2000)
+
+function redirectBack() {
+  const currentPath = Router.currentRoute.value.path;
+  const pathParts = currentPath.split('/').filter(part => part); // Remove empty parts
+  // Ensure there's always at least one part in the path
+  if (pathParts.length <= 1) {
+    // If it's empty, set it to the base URL
+    pathParts[0] = '/';
+  } else {
+    pathParts.pop();
+  }
+  const newPath = pathParts.join('/');
+  Router.push(newPath);
+}
+function next(direction: number){
+  const path = decodeURIComponent(new String(Router.currentRoute.value.path) as string)
+  const name = documentStore.getNextDocumentInRoute(direction, path)
+  let nextFileLocation : string[] | string = path.split('/')
+  nextFileLocation.pop()
+  nextFileLocation.push(name)
+  nextFileLocation = nextFileLocation.join('/')
+  Router.push(nextFileLocation)
+}
+
+
+</script>
+<style scoped>
+:deep(.slick-arrow.custom-slick-arrow) {
+  width: 60px;
+  height: 60px;
+  font-size: 60px;
+  color: var(--primary-color);
+  transition: ease-in all 0.3s;
+  opacity: 0.3;
+  z-index: 1;
+}
+
+:deep(.slick-arrow.custom-slick-arrow:before) {
+  display: none;
+}
+
+:deep(.slick-arrow.custom-slick-arrow:hover) {
+  color: var(--primary-color);
+  opacity: 1;
+}
+
+.slider {
+  height: 80vh;
+  background-color: inherit;
+}
+
+.centered {
+  display: flex;
+  justify-content: center;
+}
+
+.centered-vertically {
+  display: flex;
+  align-items: center;
+}
+
+.right {
+  flex-direction: row-reverse;
+}
+
+.action-button {
+  padding: 0;
+  font-size: 1.5em;
+  opacity: 0.5;
+  color: var(--secondary-color);
+
+  &:hover {
+    color: var(--blue-color);
+  }
+}
+
+.ant-page-header {
+  padding: 0;
+}
+.carousel{
+  margin: 0;
+  height: inherit;
+  background-color: var(--table-background);
+}
+</style>
--- a/cista-front/src/components/FileExplorer.vue
+++ b/cista-front/src/components/FileExplorer.vue
@ -0,0 +1,175 @@
+<template>
+    <main>
+      <!-- <h2 v-if="!documentStore.loading && documentStore.error"> {{ documentStore.error }} </h2> -->
+      <div class="carousel-container"  v-if="!documentStore.loading && documentStore.document[0] &&documentStore.document[0].type === 'file'">
+        <FileCarousel></FileCarousel> 
+      </div>
+      
+      <a-table 
+        v-else-if="!documentStore.loading && documentStore.mainDocument"
+        :pagination=false 
+        :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
+        :columns="columns" 
+        :data-source="documentStore.mainDocument"
+        >
+        <template #headerCell="{column}"></template>
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'name'">
+            <div class="editable-cell">
+              <div v-if="editableData[record.key]" class="editable-cell-input-wrapper">
+                <a-input v-model:value="editableData[record.key].name" @pressEnter="save(record.key)" />
+                <CheckOutlined class="editable-cell-icon-check" @click="save(record.key)" />
+              </div>
+              <div v-else class="editable-cell-text-wrapper">
+                <a :href="`#${linkBasePath}/${record.name}`">{{record.name}}</a>
+                <edit-outlined class="editable-cell-icon" @click="edit(record.key)" />
+              </div>
+            </div>
+          </template>  
+          <template v-if="column.key === 'action'">
+            <a-popover trigger="click">
+              <template #content>
+                <div class="more-action">
+                  <div class="action-container">
+                    <a-button type="text" class="action-button" :icon="h(ImportOutlined)"/>Open
+                  </div>
+                  <div class="action-container">
+                    <a-button type="text" class="action-button" :icon="h(EditOutlined)"/> Rename 
+                  </div>
+                  <div class="action-container">
+                    <a-button type="text" class="action-button" :icon="h(LinkOutlined)"/> Share 
+                  </div>
+                  <div class="action-container">
+                    <a-button type="text" class="action-button" :icon="h(CopyOutlined)"/> Copy 
+                  </div>
+                  <div class="action-container">
+                    <a-button type="text" class="action-button" :icon="h(ScissorOutlined)"/> Cut 
+                  </div>
+                  <div class="action-container">
+                    <a-button type="text" class="action-button" :icon="h(DeleteOutlined)"/> Delete 
+                  </div>
+                </div>
+              </template>
+              <a-button type="text" class="action-button" :icon="h(EllipsisOutlined)" />
+            </a-popover>
+          </template>
+        </template>
+  
+      </a-table>
+  
+    </main>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref, h, computed, reactive  } from 'vue'
+  import type { UnwrapRef } from 'vue'
+  import { cloneDeep } from 'lodash';
+  import { useDocumentStore } from '@/stores/documents'
+  import { EditOutlined, ImportOutlined, CheckOutlined,CopyOutlined, ScissorOutlined, LinkOutlined, DownloadOutlined, DeleteOutlined, EllipsisOutlined } from '@ant-design/icons-vue'
+  import type { TableColumnsType } from 'ant-design-vue';
+  import Router from '@/router/index';
+  import type { Document, FolderDocument } from '@/repositories/Document';
+  import FileCarousel from './FileCarousel.vue';
+
+  type Key = string | number;
+  const documentStore = useDocumentStore()
+  const editableData: UnwrapRef<Record<string, Document>> = reactive({});
+  const state = reactive<{
+    selectedRowKeys: Key[];
+  }>({
+    selectedRowKeys: [],
+  });
+  
+  const linkBasePath = computed(()=>{
+    if(Router.currentRoute.value.path === '/') return ''
+    return Router.currentRoute.value.path
+  })
+  
+  const columns = ref<TableColumnsType>([
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      width: '70%',
+      key: 'name',
+      sortDirections: ['ascend', 'descend'],
+      sorter: (a: Document, b: Document, sortOrder) => {
+        return b.name.localeCompare(a.name)
+      }
+    },
+    {
+      title: 'Modified',
+      dataIndex: 'modified',
+      responsive: ['lg'],
+      sortDirections: ['ascend', 'descend'],
+      defaultSortOrder: 'descend',
+      sorter: (a: FolderDocument, b: FolderDocument) => {
+        const dateA = new Date(a.modified),
+          dateB = new Date(b.modified);
+        if (dateA < dateB) return -1
+        if (dateA > dateB) return 1
+        return 0
+      },
+      key: 'modified',
+    },
+    {
+      // TODO BETTER SORT FOR MULTPLE SIZE OR CUSTOM PIPE TO kB to MB / GB
+      title: 'Size',
+      dataIndex: 'size',
+      responsive: ['lg'],
+      sortDirections: ['ascend', 'descend'],
+      sorter: (a: FolderDocument, b: FolderDocument) => {
+        return a.size - b.size
+      },
+      key: 'size',
+    },
+    {
+      width: '5%',
+      key: 'action',
+    },
+  ])
+  
+  const onSelectChange = (selectedRowKeys: Key[]) => {
+    const newSelectedRowKeys: Document[] = [] 
+    selectedRowKeys.forEach( key => {
+      if(documentStore.mainDocument){
+        const found = documentStore.mainDocument.find( e=> e.key === key ) 
+        if(found) newSelectedRowKeys.push(found)
+      }
+    })
+    documentStore.setSelectedDocuments(newSelectedRowKeys)
+    state.selectedRowKeys = selectedRowKeys;
+  };
+  const edit = (key: number) => {
+    editableData[key] = cloneDeep(documentStore.mainDocument.filter(item => key === item.key)[0]);
+  };
+  const save = (key: number) => {
+    Object.assign(documentStore.mainDocument.filter(item => key === item.key)[0], editableData[key]);
+    delete editableData[key];
+  };
+
+  </script>
+  
+  <style scoped>
+  main {
+    padding: 5px;
+    height: 100%;
+  }
+  .more-action{
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+  }
+  .action-container{
+    display: flex;
+  }
+  .carousel-container{
+    height: inherit;
+  }
+  .editable-cell-text-wrapper .editable-cell-icon {
+    visibility: hidden; /* Oculta el ícono de manera predeterminada */
+  }
+
+.editable-cell-text-wrapper:hover .editable-cell-icon {
+    visibility: visible; /* Muestra el ícono al hacer hover en el contenedor */
+  }
+  </style>
--- a/cista-front/src/components/FileViewer.vue
+++ b/cista-front/src/components/FileViewer.vue
@ -0,0 +1,52 @@
+<template>
+    <object 
+        v-if="props.type === 'pdf'"
+        :data= "dataURL" 
+        type="application/pdf" width="100%" 
+        height="100%"
+      > 
+      </object>
+    <a-image
+        v-else-if="props.type === 'image'"
+        width="50%"
+        :src="dataURL"
+        @click="() => setVisible(true)"
+        :previewMask=false
+        :preview="{
+          visibleImg,
+          onVisibleChange: setVisible,
+        }"
+      />
+      <!-- Unknown case -->
+    <h1 v-else>
+      Unsupported file type
+      </h1>
+</template>
+
+<script setup lang="ts">
+import { watchEffect, ref } from 'vue'
+import Router from '@/router/index';
+import { url_document_get } from '@/repositories/Document';
+
+const dataURL = ref('')
+watchEffect(()=>{
+  dataURL.value = url_document_get + Router.currentRoute.value.path
+})
+const emit = defineEmits({
+    visibleImg(value: boolean){ 
+        return value
+    }
+})
+
+function setVisible(value: boolean) {
+  emit('visibleImg', value)
+}
+
+
+const props = defineProps < {
+    type?: string
+    visibleImg: boolean
+} > ()
+</script>
+
+<style></style>
--- a/cista-front/src/components/HeaderMain.vue
+++ b/cista-front/src/components/HeaderMain.vue
@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { useDocumentStore } from '@/stores/documents'
+import UploadButton from '@/components/UploadButton.vue'
+import { InfoCircleOutlined, SettingOutlined, PlusSquareOutlined, SearchOutlined, DeleteOutlined, DownloadOutlined, FileAddFilled, LinkOutlined, FolderAddFilled, FileFilled, FolderFilled } from '@ant-design/icons-vue'
+import { h } from 'vue';
+import Keyframe from 'ant-design-vue/es/_util/cssinjs/Keyframes';
+
+const documentStore = useDocumentStore()
+
+function createFileHandler() {
+  console.log("Creating file")
+}
+
+function uploadFolderHandler() {
+  console.log("Uploading Folder")
+}
+function createFolderHandler() {
+  console.log("Uploading Folder")
+}
+function searchHandler() {
+  console.log("Searching ...")
+}
+function newViewHandler() {
+  console.log("Creating new view ...")
+}
+function preferencesHandler() {
+  console.log("Preferences ...")
+}
+function about() {
+  console.log("About ...")
+}
+function deleteHandler(){
+  if(documentStore.selectedDocuments){
+    documentStore.selectedDocuments.forEach(document => {
+      documentStore.deleteDocument(document)
+    })
+  }
+}
+function share(){
+  console.log("Share ...")
+}
+function download(){
+  console.log("Download ...")
+}
+
+</script>
+
+<template>
+  <div class="actions-container">
+    <div class="actions-list">
+      <UploadButton />
+
+      <a-tooltip title="Upload folder from disk">
+        <a-button @click="uploadFolderHandler" type="text" class="action-button" :icon="h(FolderAddFilled)" />
+      </a-tooltip>
+
+      <a-tooltip title="Create file">
+        <a-button @click="createFileHandler" type="text" class="action-button" :icon="h(FileFilled)" />
+      </a-tooltip>
+
+      <a-tooltip title="Create folder">
+        <a-button @click="createFolderHandler" type="text" class="action-button" :icon="h(FolderFilled)" />
+      </a-tooltip>
+      <!-- TODO ADD CONDITIONAL RENDER -->
+      <template v-if="documentStore.selectedDocuments && documentStore.selectedDocuments.length > 0">
+        <a-tooltip title="Share">
+          <a-button type="text" @click="share" class="action-button" :icon="h(LinkOutlined)" />
+        </a-tooltip>
+        <a-tooltip title="Download Zip">
+          <a-button type="text" @click="download" class="action-button" :icon="h(DownloadOutlined)" />
+        </a-tooltip>
+        <a-tooltip title="Delete">
+          <a-button type="text" @click="deleteHandler" class="action-button" :icon="h(DeleteOutlined)" />
+        </a-tooltip>
+      </template>
+    </div>
+
+    <div class="actions-list">
+      <a-tooltip title="Search">
+        <a-button @click="searchHandler" type="text" class="action-button" :icon="h(SearchOutlined)" />
+      </a-tooltip>
+
+      <a-tooltip title="Create new view">
+        <a-button @click="newViewHandler" type="text" class="action-button" :icon="h(PlusSquareOutlined)" />
+      </a-tooltip>
+
+      <a-tooltip title="Preferences">
+        <a-button @click="preferencesHandler" type="text" class="action-button" :icon="h(SettingOutlined)" />
+      </a-tooltip>
+
+      <a-tooltip title="About">
+        <a-button @click="about" type="text" class="action-button" :icon="h(InfoCircleOutlined)" />
+      </a-tooltip>
+    </div>
+  </div>
+</template>
+
+<style>
+.actions-container,
+.actions-list {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 15px;
+}
+
+.actions-container {
+  justify-content: space-between;
+}
+
+.action-button {
+  padding: 0;
+  font-size: 1.5em;
+  color: var(--secondary-color);
+
+  &:hover {
+    color: var(--blue-color) !important;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+
+  .actions-container,
+  .actions-list {
+    gap: 6px;
+  }
+}
+</style>
--- a/cista-front/src/components/HelloWorld.vue
+++ b/cista-front/src/components/HelloWorld.vue
@ -1,41 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  msg: string
-}>()
-</script>
-
-<template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
-      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
-    </h3>
-  </div>
-</template>
-
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  position: relative;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
-
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
-}
-</style>
--- a/cista-front/src/components/NotificationLoading.vue
+++ b/cista-front/src/components/NotificationLoading.vue
@ -0,0 +1,28 @@
+<template>
+  <template v-for="upload in documentStore.uploadingDocuments" :key="upload.key">
+    <span>{{ upload.name }}</span>
+    <div class="progress-container">
+      <a-progress :percent="upload.progress" />
+      <CloseCircleOutlined class="close-button" @click="dismissUpload(upload.key)" />
+    </div>
+  </template>
+</template>
+<script setup lang="ts">
+import { CloseCircleOutlined } from '@ant-design/icons-vue';
+  import { useDocumentStore } from '@/stores/documents'
+  const documentStore = useDocumentStore();
+  
+  function dismissUpload(key: number){
+    documentStore.deleteUploadingDocument(key)
+  }
+  </script>
+  
+<style scoped>
+.progress-container{
+  display: flex;
+  align-items: center;
+}
+.close-button:hover{
+  color: #b81414;
+}
+</style>
--- a/cista-front/src/components/TheWelcome.vue
+++ b/cista-front/src/components/TheWelcome.vue
@ -1,88 +0,0 @@
-<script setup lang="ts">
-import WelcomeItem from './WelcomeItem.vue'
-import DocumentationIcon from './icons/IconDocumentation.vue'
-import ToolingIcon from './icons/IconTooling.vue'
-import EcosystemIcon from './icons/IconEcosystem.vue'
-import CommunityIcon from './icons/IconCommunity.vue'
-import SupportIcon from './icons/IconSupport.vue'
-</script>
-
-<template>
-  <WelcomeItem>
-    <template #icon>
-      <DocumentationIcon />
-    </template>
-    <template #heading>Documentation</template>
-
-    Vue’s
-    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
-    provides you with all information you need to get started.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <ToolingIcon />
-    </template>
-    <template #heading>Tooling</template>
-
-    This project is served and bundled with
-    <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
-    recommended IDE setup is
-    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
-    you need to test your components and web pages, check out
-    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
-    <a href="https://on.cypress.io/component" target="_blank" rel="noopener"
-      >Cypress Component Testing</a
-    >.
-
-    <br />
-
-    More instructions are available in <code>README.md</code>.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <EcosystemIcon />
-    </template>
-    <template #heading>Ecosystem</template>
-
-    Get official tools and libraries for your project:
-    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
-    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
-    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
-    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
-    you need more resources, we suggest paying
-    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
-    a visit.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <CommunityIcon />
-    </template>
-    <template #heading>Community</template>
-
-    Got stuck? Ask your question on
-    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
-    Discord server, or
-    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
-      >StackOverflow</a
-    >. You should also subscribe to
-    <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
-    the official
-    <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
-    twitter account for latest news in the Vue world.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <SupportIcon />
-    </template>
-    <template #heading>Support Vue</template>
-
-    As an independent project, Vue relies on community backing for its sustainability. You can help
-    us by
-    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
-  </WelcomeItem>
-</template>
--- a/cista-front/src/components/UploadButton.vue
+++ b/cista-front/src/components/UploadButton.vue
@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { useDocumentStore } from '@/stores/documents'
+import NotificationLoading from '@/components/NotificationLoading.vue'
+import { FileAddFilled } from '@ant-design/icons-vue'
+import { notification } from 'ant-design-vue';
+import type { NotificationPlacement } from 'ant-design-vue';
+import { h, ref } from 'vue';
+
+const [api, contextHolder] = notification.useNotification();
+
+const fileUploadButton = ref()
+const documentStore = useDocumentStore();
+const open = (placement: NotificationPlacement) => openNotification(placement);
+
+const isNotificationOpen = ref(false);
+const openNotification = (placement: NotificationPlacement) => {
+  if(!isNotificationOpen.value){
+    api.open({
+      message: `Uploading documents`,
+      description: h(NotificationLoading),
+      placement,
+      duration: 0,
+      onClose: () => { isNotificationOpen.value = false }
+    });
+    isNotificationOpen.value = true;
+  }
+};
+
+
+function uploadFileHandler() {
+  fileUploadButton.value.click()
+}
+
+async function load(file: File, start: number, end: number): Promise<ArrayBuffer> {
+  const reader = new FileReader();
+  const load = new Promise<Event>((resolve) => (reader.onload = resolve));
+  reader.readAsArrayBuffer(file.slice(start, end));
+  const event = await load;
+  if (event.target && event.target instanceof FileReader) {
+    return event.target.result as ArrayBuffer;
+  } else {
+    throw new Error('Error loading file' );
+  }
+}
+
+async function sendChunk(file :File, start: number, end: number) {
+  const ws = documentStore.wsUpload; 
+  if(ws){
+    const chunk = await load(file, start, end)
+    
+    ws.send(JSON.stringify({
+        name: file.name,
+        size: file.size,
+        start: start,
+        end: end
+      }))
+    ws.send(chunk)
+  }
+}
+
+async function uploadFileChangeHandler(event: Event) {
+  const target = event.target as HTMLInputElement;
+  const chunkSize = 1 << 20
+  if (target && target.files && target.files.length > 0) {
+    const file = target.files[0];
+    const numChunks = Math.ceil(file.size / chunkSize)
+    const document = documentStore.pushUploadingDocuments(file.name)
+    open('bottomRight')
+    for (let i = 0; i < numChunks; i++) {
+      const start = i * chunkSize
+      const end = Math.min(file.size, start + chunkSize)
+      // const res  = await sendChunk(file, start, end)
+    }
+  }
+}
+</script>
+<template>
+  <a-tooltip title="Upload files from disk">
+    <a-button @click="uploadFileHandler" type="text" class="action-button" :icon="h(FileAddFilled)" />
+    <input ref="fileUploadButton" @change="uploadFileChangeHandler" class="upload-input" type="file" onclick="this.value=null;" />
+  </a-tooltip>
+  <contextHolder />
+</template>
+<style scoped>
+/* Extends styles from HeaderMain.vue too  */
+.upload-input{
+  display: none;
+}
+</style>
--- a/cista-front/src/components/WelcomeItem.vue
+++ b/cista-front/src/components/WelcomeItem.vue
@ -1,87 +0,0 @@
-<template>
-  <div class="item">
-    <i>
-      <slot name="icon"></slot>
-    </i>
-    <div class="details">
-      <h3>
-        <slot name="heading"></slot>
-      </h3>
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.item {
-  margin-top: 2rem;
-  display: flex;
-  position: relative;
-}
-
-.details {
-  flex: 1;
-  margin-left: 1rem;
-}
-
-i {
-  display: flex;
-  place-items: center;
-  place-content: center;
-  width: 32px;
-  height: 32px;
-
-  color: var(--color-text);
-}
-
-h3 {
-  font-size: 1.2rem;
-  font-weight: 500;
-  margin-bottom: 0.4rem;
-  color: var(--color-heading);
-}
-
-@media (min-width: 1024px) {
-  .item {
-    margin-top: 0;
-    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
-  }
-
-  i {
-    top: calc(50% - 25px);
-    left: -26px;
-    position: absolute;
-    border: 1px solid var(--color-border);
-    background: var(--color-background);
-    border-radius: 8px;
-    width: 50px;
-    height: 50px;
-  }
-
-  .item:before {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    bottom: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:after {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    top: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:first-of-type:before {
-    display: none;
-  }
-
-  .item:last-of-type:after {
-    display: none;
-  }
-}
-</style>
--- a/cista-front/src/components/icons/IconCommunity.vue
+++ b/cista-front/src/components/icons/IconCommunity.vue
@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
-    <path
-      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
-    />
-  </svg>
-</template>
--- a/cista-front/src/components/icons/IconDocumentation.vue
+++ b/cista-front/src/components/icons/IconDocumentation.vue
@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
-    <path
-      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
-    />
-  </svg>
-</template>
--- a/cista-front/src/components/icons/IconEcosystem.vue
+++ b/cista-front/src/components/icons/IconEcosystem.vue
@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
-    <path
-      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
-    />
-  </svg>
-</template>
--- a/cista-front/src/components/icons/IconSupport.vue
+++ b/cista-front/src/components/icons/IconSupport.vue
@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
-    <path
-      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
-    />
-  </svg>
-</template>
--- a/cista-front/src/components/icons/IconTooling.vue
+++ b/cista-front/src/components/icons/IconTooling.vue
@ -1,19 +0,0 @@
-<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    aria-hidden="true"
-    role="img"
-    class="iconify iconify--mdi"
-    width="24"
-    height="24"
-    preserveAspectRatio="xMidYMid meet"
-    viewBox="0 0 24 24"
-  >
-    <path
-      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
-      fill="currentColor"
-    ></path>
-  </svg>
-</template>
--- a/cista-front/src/main.ts
+++ b/cista-front/src/main.ts
@ -1,14 +1,21 @@
+import 'ant-design-vue/dist/reset.css';
 import './assets/main.css'

 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
+import Antd from 'ant-design-vue';

 import App from './App.vue'
 import router from './router'

 const app = createApp(App)
-
+app.config.errorHandler = (err) => {
+  /* handle error */
+  console.log(err)
+}
 app.use(createPinia())
+
+app.use(Antd);
 app.use(router)

-app.mount('#app')
+app.mount('#app')
--- a/cista-front/src/repositories/Client.ts
+++ b/cista-front/src/repositories/Client.ts
@ -0,0 +1,41 @@
+import axios from 'axios'
+
+/* Base domain for all request */ 
+export const baseURL = import.meta.env.VITE_URL_DOCUMENT_GET
+
+/* Config Client*/
+const Client = axios.create({
+  baseURL: baseURL,
+  headers: {
+    Accept: 'application/json',
+  },
+})
+
+Client.interceptors.response.use(
+  (response) => {
+    // Any status code that lie within the range of 2xx cause this function to trigger
+    // Do something with response data
+    return response
+  },
+  (error) => {
+    const msg = error.response?.data.message ?? 'Unexpected error'
+    const code = error.code ? Number(error.code) : 500
+    const standardizedError = new SimpleError(code, msg)
+    
+    return Promise.reject(standardizedError)
+  }
+)
+
+export interface ISimpleError extends Error {
+  code : number
+}
+
+class SimpleError extends Error implements ISimpleError {
+  code : number
+  constructor(code: number, message:string) {
+    super(message)
+    this.code = code
+  }
+}
+
+export default Client
--- a/cista-front/src/repositories/Document.ts
+++ b/cista-front/src/repositories/Document.ts
@ -0,0 +1,87 @@
+import type { FileStructure, DocumentStore } from '@/stores/documents'
+import { useDocumentStore } from '@/stores/documents'
+import { getFileExtension } from '@/utils'
+import Client from '@/repositories/Client'
+
+
+type BaseDocument = {
+  name: string;
+  key?: number;
+};
+
+export type FolderDocument = BaseDocument & {
+  size: number;
+  modified: string;
+  type: 'folder';
+};
+
+export type FileDocument = BaseDocument & {
+  type: 'file';
+  ext: string;
+  data: string;
+};
+
+export type Document = FolderDocument | FileDocument;
+
+
+export const url_document_watch_ws = import.meta.env.VITE_URL_DOCUMENT_WATCH_WS
+export const url_document_upload_ws = import.meta.env.VITE_URL_DOCUMENT_UPLOAD_WS
+export const url_document_get = import.meta.env.VITE_URL_DOCUMENT_GET
+
+export class DocumentHandler {
+  constructor( private store: DocumentStore = useDocumentStore() ) {
+    this.handleWebSocketMessage = this.handleWebSocketMessage.bind(this);
+  }
+
+  handleWebSocketMessage(event: MessageEvent) {
+    const msg = JSON.parse(event.data);
+    switch (true) {
+      case !!msg.root:
+        this.handleRootMessage(msg);
+        break;
+      case !!msg.update:
+        this.handleUpdateMessage(msg);
+        break;
+      default:
+    }
+  }
+
+  private handleRootMessage({ root }: { root: FileStructure }) {
+    if (this.store && this.store.root) this.store.root = root;
+  }
+
+  private handleUpdateMessage(updateData: { update: FileStructure[] }) {
+    const root = updateData.update[0]
+    if(root) this.store.root = root
+  }
+}
+export class DocumentUploadHandler {
+  constructor( private store: DocumentStore = useDocumentStore() ) {
+    this.handleWebSocketMessage = this.handleWebSocketMessage.bind(this);
+  }
+
+  handleWebSocketMessage(event: MessageEvent) {
+    const msg = JSON.parse(event.data);
+    switch (true) {
+      case !!msg.written:
+        this.handleWrittenMessage(msg);
+        break;
+      default:
+    }
+  }
+
+  private handleWrittenMessage(msg : { written : number}) {
+    // if (this.store && this.store.root) this.store.root = root;
+    console.log('Written message', msg.written)
+  }
+}
+export async function fetchFile(path: string): Promise<FileDocument>{
+  const file = await Client.get(path)
+  const name = path.substring(1 , path.length)
+  return {
+    name,
+    data: file.data,
+    type: 'file',
+    ext: getFileExtension(name)
+  }
+}
--- a/cista-front/src/repositories/WS.ts
+++ b/cista-front/src/repositories/WS.ts
@ -0,0 +1,8 @@
+function createWebSocket(url: string, eventHandler: (event: MessageEvent) => void) {
+    const urlObject = new URL(url);
+    const webSocket = new WebSocket(urlObject);
+    webSocket.onmessage = eventHandler;
+    return webSocket;
+}
+
+export default createWebSocket
--- a/cista-front/src/router/index.ts
+++ b/cista-front/src/router/index.ts
@ -1,22 +1,20 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
+import ExplorerView from '../views/ExplorerView.vue'
+import LoginView from '../views/LoginView.vue'

 const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
-      path: '/',
-      name: 'home',
-      component: HomeView
+      path: '/#/:location',
+      name: 'explorer',
+      component: ExplorerView,
    },
    {
-      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')
-    }
+      path: '/login',
+      name: 'login',
+      component: LoginView,
+    },
  ]
 })

--- a/cista-front/src/stores/counter.ts
+++ b/cista-front/src/stores/counter.ts
@ -1,12 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
-
-  return { count, doubleCount, increment }
-})
--- a/cista-front/src/stores/documents.ts
+++ b/cista-front/src/stores/documents.ts
@ -0,0 +1,144 @@
+import type { Document } from '@/repositories/Document';
+import type { ISimpleError } from '@/repositories/Client';
+import { fetchFile } from '@/repositories/Document'
+import { formatUnixDate } from '@/utils';
+import { defineStore } from 'pinia';
+
+
+type FileData = { mtime: number, size: number, dir: DirectoryData};
+type DirectoryData = {
+  [filename: string]: FileData;
+};
+export type FileStructure = {mtime: number, size: number, dir: DirectoryData};
+
+export type DocumentStore = {
+  root: FileStructure,
+  document: Document[],
+  loading: boolean,
+  uploadingDocuments: Array<{key: number, name: string, progress: number}>,
+  uploadCount: number,
+  wsWatch: WebSocket | undefined,
+  wsUpload: WebSocket | undefined,
+  selectedDocuments: Document[],
+  error: string,
+}
+
+export const useDocumentStore = defineStore({
+  id: 'documents',
+  state: (): DocumentStore => ({
+    root: {} as FileStructure,
+    document: [] as Document[],
+    loading: true as boolean,
+    uploadingDocuments: [],
+    uploadCount: 0 as number,
+    wsWatch: undefined,
+    wsUpload: undefined,
+    selectedDocuments: [] as Document[],
+    error: '' as string,
+  }),
+  
+  actions: {
+    setActualDocument(location: string){
+      this.loading = true;
+      let data = this.root
+      const dataMapped  = [];
+      const locations = location.split('/').slice(1)
+      // Get data target location
+      locations.forEach(location => {
+        location = decodeURIComponent(location)
+        if(data && data.dir){
+          for (const key in data.dir) {
+            if(key === location) data  = data.dir[key]
+          }
+        }
+      })
+
+      // Transform data
+      let count = 0
+      for (const key in data.dir) {
+        const element: Document = {
+          name: key,
+          key: count,
+          size: data.dir[key].size,
+          modified:  formatUnixDate(data.dir[key].mtime),
+          type: 'folder',
+        }
+        count++
+        dataMapped.push(element)
+      }
+      this.document = dataMapped
+      this.loading = false;
+    },
+    async setActualDocumentFile(path: string){
+      this.loading = true;
+      const file = await fetchFile(path)
+      this.document = [file];
+      this.loading = false;
+    },
+    setSelectedDocuments(document: Document[]){
+      this.selectedDocuments = document
+    },
+    deleteDocument(document: Document){
+      this.document = this.document.filter(e => document.key !== e.key) 
+      this.selectedDocuments = this.selectedDocuments.filter(e => document.key !== e.key) 
+    },
+    pushUploadingDocuments(name: string){
+      this.uploadCount++;
+      const document = {
+        key: this.uploadCount,
+        name: name,
+        progress: 0
+      }
+      this.uploadingDocuments.push(document)
+      return document
+    },
+    deleteUploadingDocument(key: number){
+      this.uploadingDocuments = this.uploadingDocuments.filter((e)=> e.key !== key) 
+    },
+    getNextDocumentInRoute(direction: number, path: string){
+      const locations = path.split('/').slice(1)
+      locations.pop()
+      let data = this.root
+      const actualDirArr = []
+      // Get data target location
+      locations.forEach(location => {
+        // location = decodeURIComponent(location)
+        if(data && data.dir){
+          for (const key in data.dir) {
+            if(key === location) data  = data.dir[key]
+          }
+        }
+      })
+      //Store in a temporary array 
+      for (const key in data.dir) {
+        actualDirArr.push({
+          name: key,
+          content: data.dir[key]
+        })
+      }
+      const actualFileName = decodeURIComponent(this.mainDocument[0].name).split('/').pop()
+      let index = actualDirArr.findIndex(e => e.name === actualFileName)
+      
+      if(index < 1 && direction === -1 ){
+        index = actualDirArr.length -1
+      }else if(index >= actualDirArr.length - 1 && direction === 1){
+        index = 0
+      }else {
+        index = index + direction
+      }
+      return actualDirArr[index].name
+    }
+  },
+
+  getters: {
+    mainDocument(): Document[] {
+      return this.document;
+    },
+    rootSize(): number | undefined {
+      if(this.root) return this.root.size
+    },
+    rootMain(): DirectoryData | undefined {
+      if(this.root) return this.root.dir
+    }
+  },
+});
--- a/cista-front/src/utils/index.ts
+++ b/cista-front/src/utils/index.ts
@ -0,0 +1,57 @@
+export function determineFileType(inputString: string): "file" | "folder" {
+    if (inputString.includes('.') && !inputString.endsWith('.')) {
+      return 'file';
+    } else {
+      return 'folder';
+    }
+}
+
+export function formatUnixDate(t: number) {
+  const date = new Date(t * 1000)
+  const now = new Date()
+  const diff = date.getTime() - now.getTime()
+  const formatter = new Intl.RelativeTimeFormat('en', { numeric:
+'auto' })
+
+  if (Math.abs(diff) <= 60000) {
+      return formatter.format(Math.round(diff / 1000), 'second')
+  }
+
+  if (Math.abs(diff) <= 3600000) {
+      return formatter.format(Math.round(diff / 60000), 'minute')
+  }
+
+  if (Math.abs(diff) <= 86400000) {
+      return formatter.format(Math.round(diff / 3600000), 'hour')
+  }
+
+  if (Math.abs(diff) <= 604800000) {
+      return formatter.format(Math.round(diff / 86400000), 'day')
+  }
+
+  return date.toLocaleDateString()
+}
+
+export function getFileExtension(filename: string) {
+  const parts = filename.split(".");
+  if (parts.length > 1) {
+    return parts[parts.length - 1];
+  } else {
+    return ""; // No hay extensión
+  }
+}
+export function getFileType(extension: string): string {
+  const videoExtensions = ["mp4", "avi", "mkv", "mov"];
+  const imageExtensions = ["jpg", "jpeg", "png", "gif"];
+  const pdfExtensions = ["pdf"];
+
+  if (videoExtensions.includes(extension)) {
+    return "video";
+  } else if (imageExtensions.includes(extension)) {
+    return "image";
+  } else if (pdfExtensions.includes(extension)) {
+    return "pdf";
+  } else {
+    return "unknown";
+  }
+}
--- a/cista-front/src/views/AboutView.vue
+++ b/cista-front/src/views/AboutView.vue
@ -1,15 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
-
-<style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>
--- a/cista-front/src/views/ExplorerView.vue
+++ b/cista-front/src/views/ExplorerView.vue
@ -0,0 +1,36 @@
+<template>
+  <FileExplorer></FileExplorer>
+</template>
+
+<script setup lang="ts">
+import { watchEffect } from 'vue'
+import { useDocumentStore } from '@/stores/documents'
+import Router from '@/router/index';
+import FileExplorer from '@/components/FileExplorer.vue';
+
+const documentStore = useDocumentStore()
+
+function isFile(path: string) {
+  if (path.includes('.') && !path.endsWith('.')) {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+watchEffect(async () => {
+  const path = new String(Router.currentRoute.value.path) as string
+  const file = isFile(path)
+  if(!file){
+    documentStore.setActualDocument(path.toString())
+  }else {
+    documentStore.setActualDocumentFile(path)
+  }
+  setTimeout( () => {
+    documentStore.loading = false
+  }, 2000)
+})
+
+</script>
+
+<style scoped></style>
--- a/cista-front/src/views/HomeView.vue
+++ b/cista-front/src/views/HomeView.vue
@ -1,9 +0,0 @@
-<script setup lang="ts">
-import TheWelcome from '../components/TheWelcome.vue'
-</script>
-
-<template>
-  <main>
-    <TheWelcome />
-  </main>
-</template>
--- a/cista-front/src/views/LoginView.vue
+++ b/cista-front/src/views/LoginView.vue
@ -0,0 +1,46 @@
+<template>
+    <div class="login-container">
+        <a-form :model="loginForm">
+            <a-form-item label="Username" prop="username" :rules="[{ required: true, message: 'Please input your username!' }]">
+                <a-input v-model:value="loginForm.username" />
+            </a-form-item>
+            <a-form-item label="Password" prop="password" :rules="[{ required: true, message: 'Please input your password!' }]">
+                <a-input type="password" v-model:value="loginForm.password" />
+            </a-form-item>
+            <a-form-item>
+                <a-button type="primary" @click="login" class="button-login">Login</a-button>
+            </a-form-item>
+        </a-form>
+    </div>
+</template>
+  
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const loginForm = ref({
+    username: '',
+    password: '',
+});
+
+const login = () => {
+    
+};
+</script>
+  
+<style scoped>
+.login-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+.button-login {
+    background-color: var(--secondary-color);
+    color: var(--secondary-background);
+}
+.ant-btn-primary:not(:disabled):hover{
+    background-color: var(--blue-color);
+
+}
+</style>
+  
--- a/cista-front/tsconfig.json
+++ b/cista-front/tsconfig.json
@ -6,6 +6,9 @@
    },
    {
      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.vitest.json"
    }
  ]
 }
--- a/cista-front/tsconfig.vitest.json
+++ b/cista-front/tsconfig.vitest.json
@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.app.json",
+  "exclude": [],
+  "compilerOptions": {
+    "composite": true,
+    "lib": [],
+    "types": ["node", "jsdom"]
+  }
+}
--- a/cista-front/vite.config.ts
+++ b/cista-front/vite.config.ts
@ -3,11 +3,32 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'

+import Components from "unplugin-vue-components/vite";
+import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";
+
+// @ts-ignore
+import pluginRewriteAll from 'vite-plugin-rewrite-all';
+
 // https://vitejs.dev/config/
 export default defineConfig({
  plugins: [
    vue(),
+    pluginRewriteAll(),
+    // Ant Design configuration
+    Components({
+      resolvers: [
+        AntDesignVueResolver({ importStyle:"less" })
+      ],
+    }),
  ],
+  css: {
+    preprocessorOptions: {
+      less: {
+        modifyVars: {},
+        javascriptEnabled: true,
+      },
+    },
+  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
				`@ -1 +0,0 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>`