<iframe width="10%"
src="https://www.scopevisio.com/wp-content/themes/scope_theme_parent/img/scopevisio-symbol-gelb.svg" frameborder="0"></iframe>

# Scopevisio Konzepte
[ToC]

---

# 💡Notizen

::: info

## Todo
- Beispiele raussuchen

## Planung

- Telko 1 h 1x die Woche mit Silke
- Alles mehr auf Vorlagen aufbauenx1
- Ist Milan noch dabei?

:::

---

# **🆕 News Bereich**

::: info

# **Konzeptentwurf**

## ⚡️ Leitgedanke
- "So leicht zu beziehen wie Strom aus der Steckdose"
= Software "anschliessen" und Problem lösen – ohne mich damit zu beschäftigen

## 🧠 Wichtige Aspekte

Primär:

- 🗂 Dashboard Unternehmensbereiche/Aktivitäten (Work)

Sekundär:
- 📄 Vorlagen (Setup)
- 🚀 Einrichten (Setup)
- ⚙️ Einstellungen (Setup)
- 📱 Addons / Apps (Setup)
- 📣 News (Lernen)
- ⚡️ Schnellaktionen (Work)
- ⏱ Forumlare kürzlich geöffnet (Work)
- 📌 Formulare angepinnt (Work)

# Prototyp

- Design auswählen (IST/SOLL)
- Perspektive
- Neukunde
- Wiederkehrender Nutzer Allgemein
- Wiederkehrender Nutzer Spezifisch
– Journey
- Widget
- Konfigurationsmaske
- Widgets hinzufügen
- Ansichten wählen
- Aufbau
- Aktivitäten
- Formulare
- Schnellzugriff
- Addons
- Vorlagen
- News
- Werbung
- Kürzlich geöffnete Formulare
- Import Funktion
- Favoriten
- News

## 👫 Zielgruppe
- 🟡 Neukunde
- ⚪️ Bestandskunde

## ℹ️ Anmerkungen
- Coworking vs Teamwork (Namensbeissung)

:::

# **📱 Scopevisio 2GO**

::: info

# **Konzeptentwurf**

## ℹ️ Anmerkungen
- Coworking vs Teamwork (Namensbeissung)

:::

## **Bereiche**

### Einstellungen

## **Funktionen**
---

# 📄 Spesen APP

:::info

### **Klickdummy**

<iframe width="100%" height="500" src="https://xd.adobe.com/embed/0bb42298-ba51-4517-4403-94f6f45220b5-7d85/screen/1763a6ce-c651-49ea-90b2-a6064a1de46f" frameborder="0"></iframe>

### Ressourcen
- **Ticket Jira:** https://ticket.scopevisio.com/secure/RapidBoard.jspa?rapidView=97&projectKey=SPES
- **Font:** https://gitlab-fr-01.fr.scopevisio.local/web-entwicklung/fonts.git
- **Roadmap Board:** https://miro.com/app/board/uXjVOV2Sk2M=/?track=true&utm_source=notification&utm_medium=email&utm_campaign=approve-request&utm_content=go-to-miro
- **Klickdummy Azis:** https://xd.adobe.com/view/cde70d45-10ba-4413-b256-91e1cf9fea5c-98b4/

### Ähnliche Apps

- https://www.expensify.com

#### Klickdummy
https://xd.adobe.com/view/61926d9a-fc86-4f46-9f42-bb6137b84a1b-34c1/
Vorherige Version:****
[https://xd.adobe.com/embed/0bb42298-ba51-4517-4403-94f6f45220b5-7d85/](https://xd.adobe.com/embed/0bb42298-ba51-4517-4403-94f6f45220b5-7d85/)

## Icons

### Fehlend
- Taschenlampe

## Nicole

**Overview**:

Implementierung einer Reisekosten- und Spesen-App

**To Do:**

- Dokumentenübersicht (DocumentsView.vue)
- Vorschaubild hinzufügen
- Erstattungsfähig Symbol und Text hinzufügen
- Datum hinzufügen
- Projekt hinzufügen
- Möglichkeit, Sammlungen zu erstellen und zu löschen, hinzufügen
- Detailansicht eines Dokuments (DocumentDetails.vue)
- Info-Tab
- Detailseite und Add-/Editseite (DocumentDetails.vue & DocumentEdit.vue) miteinander mit aktuellen Dokument verknüpfen
- Zoom-In und Zoom-Out beim Dokument-Bild hinzufügen für eine bessere Lesbarkeit
- Geste für das Zoom-in und das Zoom-out hinzufügen
- Delete-Button verschönern
- Kommentar-Tab
- Zeilenumbruch bei langem Text einbauen pop-up?
- Scanner
- Scanmöglichkeit implementieren - OCR
- Scan bearbeiten (zuschneiden, drehen, usw.) können
- Buttons anders positionieren
- Hinzufügen eines Dokuments bzw. Bearbeitung eines Dokuments (DocumentEdit.vue)
- Detailseite und Add-/Editseite (DocumentDetails.vue & DocumentEdit.vue) miteinander mit aktuellen Dokument verknüpfen
- Pflichtfeld für Radio Buttons anpassen
- Metadata anpassen
- Übernehmen-Button verschönern
- Einstellungen
- Foto Einstellungen machen können
- (Falls gewünscht: Gesellschaft, Passwort und Impressum nicht auf eine neue Seite verweisen, sondern ausklappbar - da Seite so leer ist) ?
- Impressum implementieren
- Ausloggen-Button verschönern und an einer andere Stelle platzieren

**Noch abzusprechen**:

- Anmeldung
- Ist ein Login über Google etc. gewünscht?
- Projekt
- Welche Projekte sollen angezeigt werden und wie?
- Menü
- Welches Design soll das Menü haben (links oder unten)?
- Lange Kommentare
- Wie sollen lange Kommentare dargestellt werden (ausklappbar oder nach mit Zeilenumbruch)?

- Nächste Themen:
- Vorschau für Datei anschauen
- Detail Zustände auflisten

**Actual Results:**

- Dokumentenübersicht (DocumentsView.vue)In der Dokumentenübersicht kann man einen Teamwork-Ordner öffnen und sieht die dort enthaltenen Dokumente. Der Ordner kann nach einem Dokument durchsucht werden (Suchleiste lässt sich ausklappen) und der Ordnerinhalt kann auf 5 verschiedene Arten sortiert werden (Trefferqualität, Datum (neueste zuerst), Datum (älteste zuerst), Name A-Z, Name Z-A) sowie in 3 verschiedenen Weisen angezeigt werden (Listenansicht, Ansicht mit großen Bildern, Ansicht mit kleinen Bildern). Klickt man auf ein Dokument, wird man zur Details-Seite navigiert.


- Detailansicht eines Dokuments (DocumentDetails.vue)Die Detailansichtseite eines Dokuments besteht aus zwei Tabs. Dem Info-Tab und dem Kommentar-Tab.
- Info-TabDer Info-Tab zeigt ein Bild des Dokuments (dabei spielt es keine Rolle, welches Dateiformat das Dokument hat), den Belegname, das Belegdatum, das dem Dokument zugehörige Projekt, die Belegart und die Erstattungsfähigkeit an. Zudem lässt sich das Dokument im Info-Tab bearbeiten und löschen. Die Möglichkeit zum Bearbeiten des Dokuments ist nur im Info-Tab da und nicht beim Kommentar-Tab. Beim Klicken auf den Pencil wird man zur Bearbeitungsseite navigiert. Beim Klicken auf den Löschen-Button wird man gefragt, ob man das Dokument wirklich löschen möchte. Bestätigt man dies, wird man zurück zur Dokumentenübersicht navigiert.


- Kommentar-TabDer Kommentar-Tab zeigt - je nachdem wie viele Kommentare für das ausgewählte Dokument vorhanden sind - die Kommentaranzahl an und listet alle untereinander auf. Unter den Kommentaren gibt es die Möglichkeit, weitere Kommentare hinzuzufügen. Jeder Kommentar lässt sich bearbeiten oder löschen. Beim Bearbeiten wird die "Kommentar-Hinzufügen" Eingabemöglichkeit zu einer "Kommentar-Bearbeiten"-Möglichkeit umgewandelt und beim Löschen wird man zuerst vorher gefragt, ob man sich sicher ist, dass man diesen Kommentar löschen möchte.



- Scanner Auf der Scanner-Seite lässt sich zwischen dem Scannen und dem Hochladen eines Dokuments wählen.


- Hinzufügen eines Dokuments bzw. Bearbeitung eines Dokuments (DocumentEdit.vue)Das Hinzufügen und das Bearbeiten eines Dokuments soll gleich aussehen. Deswegen soll die DocumentEdit.vue so programmiert werden, dass sie für beides verwendet wird. Zu sehen ist ein Bild des gescannten bzw. zu bearbeitenden Dokuments (dabei spielt es keine Rolle, welches Dateiformat das Dokument hat), der veränderbare Belegname, das dem Dokument zugehörige Projekt bzw. die noch auszuwählende Projektauswahl, die änderbare bzw. die wählbare Belegart und die änderbare bzw. wählbare Erstattungsfähigkeit. Man kann die DocumentEdit.vue verlassen, indem man entweder auf zurück klickt oder auf "übernehmen". Bei beiden Möglichkeiten soll man je nachdem, ob man gerade ein Dokument bearbeitet oder neu hinzugefügt hat, entweder zurück zur Detailansicht kommen oder zurück zur Scanner-Seite.


- +Einstellungen+Bei den Einstellungen sieht man oben eine kleine Übersicht über sein Profil, darunter die Möglichkeiten die Gesellschaft zu wechseln, das Passwort zu ändern und das Impressum anzusehen und ganz unten den Button zum Ausloggen. Klickt man auf eine der drei Möglichkeiten, wird man jeweils auf die passende Seite navigiert.


**Additional Info:**

Ich freue mich immer über Feedback und Verbesserungsvorschläge.


### Design

- Icon Font

### Roadmap

<iframe width="600" height="300" src="https://miro.com/app/live-embed/uXjVOV2Sk2M=/?moveToViewport=-860,-633,4848,3173" frameBorder="0" scrolling="no" allowFullScreen></iframe>

:::spoiler
#### ↪︎ Schritt 1:
* Login und Onboarding der App fertigstellen
* Einmaliger Login mit einem Scopevisio-Konto unter Nutzung der technischen

#### ↪︎ Schritt 2:
* - Fotografieren eines Beleges mit Bildkorrektur (Ausschnitt, Ausrichtung), alternativ auswählen eines Dokuments aus der Fotogalerie oder dem Dateiendienst des Gerätes

#### ↪︎ Schritt 3:
* Texterkennung mit Identifizierung von Key-Words die als Standard von Scopevisio geliefert werden und vom Unternehmen ergänzt werden können

#### ↪︎ Schritt 4:
* Die Metainformationen anzeigen und ggf. korrigieren
*

#### ↪︎ Schritt 4:
* Ergänzung von Metametainformationen des Beleges um mindestens folgende Attribute:
* Belegart (Reise oder Spesen)
* Datum des Beleges, nach Möglichkeit aus dem Scannergebnis auswählen
* Zuordnung zu den Reisekostenkategorien „Fahrtkosten, Übernachtung, Nebenkosten“ auf Basis der ausgewerteten Metadaten. Wird die Kategorie Übernachtung ausgewählt, muss zusätzlich hinterlegt werden ob das Frühstück mit enthalten war.
* Zuordnung zu einem Scopevisioprojekt mit intelligenter Auswahl auf Basis des Datums und der Zuordnung der BenutzerIn zu einem Projekt
* Zuordnung zu einem vorhandenen Reise falls die Belegart „Reise“ ausgewählt wurde
* Sollte die Belegart Spesen ausgewählt worden sein können Optional die Daten zu Teilnehmer und Gründe für die Ausgabe erfasst werden
* Die Pflichtfelder müssen noch diskutiert werden

#### ↪︎ Schritt 5:
* Der Beleg wird gesichert und an die Reisekostenerfassung weitergeleitet. Art und Umfang der Weiterleitung mit Blick auf die Betadaten muss noch diskutiert werden. Eine Zwischenspeicherung ohne Übermittlung muss möglich sein.

#### ↪︎ Schritt 6:
* Der Beleg wird gesichert und an die Reisekostenerfassung weitergeleitet. Art und Umfang der Weiterleitung mit Blick auf die Betadaten muss noch diskutiert werden. Eine Zwischenspeicherung ohne Übermittlung muss möglich sein.

#### ↪︎ Option: Schritt 7:
* Bilderkennung und Verarbeitung für Android erstellen

## Nicole

:::

## **🗂 Bereiche**

### ↪︎ Registrierung

:::info
:::spoiler
:::

### ↪︎ Login

:::info
- Face ID
- Touch ID
:::spoiler
:::

### ↪︎ Onboarding

:::info
:::spoiler
:::

### ↪︎ Scan Maske

:::info
:::spoiler
:::

### ↪︎ Hauptmenü

:::info
:::spoiler
:::success
:::

## **⚡️Funktionen**

:::info
:::spoiler
:::success

:::

### ↪︎ Multiples Scannen

::: info
- Single Upload
- Multi Upload
::: spoiler
:::

### ↪︎ Hochladen

::: info
- Single Upload
- Multi Upload
::: spoiler
:::

### ↪︎ Scannen
::: info
::: spoiler
:::

### ↪︎ Ausschneiden, Ausrichten
::: info
::: spoiler
:::

### ↪︎ Filter

::: info
::: spoiler
:::
:::
### ↪︎ Editieren
::: info
::: spoiler

#### Klickdummy
<iframe width="100%" height=300
src="https://xd.adobe.com/embed/0bb42298-ba51-4517-4403-94f6f45220b5-7d85/screen/7ce110e2-0147-4fa6-be6f-67f834396f46" frameborder="0"></iframe>

:::

### ↪︎ Vergrößern

:::info
:::spoiler
#### Klickdummy

:::

### ↪︎ Teilen
:::info
:::spoiler
:::

### ↪︎ Speichern

:::info
:::spoiler
:::

### ↪︎ Erfassen

:::info
:::spoiler
:::

### ↪︎ Lampe

:::info
:::spoiler
:::

## **🕹Steuerung**

:::info
:::spoiler
:::

### ↪︎ Gesten

:::info
:::spoiler
:::