From 163ae01c5675ddd6ebd6ca2a4b46ac5160c15b9b Mon Sep 17 00:00:00 2001
From: Artur Tamborski <tamborskiartur@gmail.com>
Date: Thu, 7 Jan 2021 12:47:07 +0100
Subject: [PATCH 1/8] Add CarCountryFilter for more advanced filtering in admin
 panel (#556)

* Add CarCountryFilter for more advanced filtering in admin panel

* Enable CarCountryFilter on Refuel admin view

* Add Car Country column in Refuel admin view
---
 backend/fleet_management/admin.py | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/backend/fleet_management/admin.py b/backend/fleet_management/admin.py
index 52411d07..9d4c1fc3 100644
--- a/backend/fleet_management/admin.py
+++ b/backend/fleet_management/admin.py
@@ -13,23 +13,35 @@ class CountryFilter(admin.SimpleListFilter):
     title = _("Country")
     parameter_name = "country"
 
+    def get_parameter(self, obj):
+        for part in self.parameter_name.split("__"):
+            obj = getattr(obj, part)
+        return obj
+
     def lookups(self, request, model_admin):
         objects = model_admin.model.objects.distinct(self.parameter_name)
-        countries = [(o.country.code, o.country.name) for o in objects]
-        countries = sorted(countries, key=lambda c: c[1])  # sort by name, A-Z
+        countries = [self.get_parameter(o) for o in set(objects)]
+        countries = [(c.code, c.name) for c in countries]
+        countries.sort(key=lambda c: c[1])  # sort by name, A-Z
         return [("ALL", _("Global"))] + countries
 
     def queryset(self, request, queryset):
         value = self.value()
 
-        # "ALL" is special value used for showing global users (with empty country)
+        # no query was applied, skip filtering
+        if value is None:
+            return queryset
+
+        # "ALL" is special value used for showing
+        # global users (those with empty country)
         if value == "ALL":
             value = ""
 
-        if value is not None:
-            return queryset.filter(**{self.parameter_name: value})
+        return queryset.filter(**{self.parameter_name: value})
 
-        return queryset
+
+class CarCountryFilter(CountryFilter):
+    parameter_name = "car__country"
 
 
 class DriveResource(resources.ModelResource):
@@ -133,13 +145,18 @@ class RefuelAdmin(admin.ModelAdmin):
     list_filter = (
         "driver",
         "car",
+        CarCountryFilter,
     )
     list_display = (
         "driver",
         "car",
+        "car__country",
         "date",
         "current_mileage",
         "refueled_liters",
         "price_per_liter",
         "total_cost",
     )
+
+    def car__country(self, refuel):
+        return refuel.car.country.name

From e69600ba602715ae0b61dfa0bead934a0ed7f36f Mon Sep 17 00:00:00 2001
From: Julia <j.anholcer@merixstudio.com>
Date: Wed, 17 Mar 2021 18:46:09 +0100
Subject: [PATCH 2/8] PAH-557 add Kurdish translation (#571)

* PAH-557 add Kurdish translation

* add kurdistan flag

* fix linter

* replace corrupted and missing translations to english, add iraq flag
---
 frontend/package-lock.json           |  60 ++++++++--------
 frontend/src/components/Language.vue |  17 ++++-
 frontend/src/components/Sidebar.vue  |   2 +-
 frontend/src/services/lang.js        |   4 +-
 frontend/src/translations.json       | 103 +++++++++++++++++++++++++++
 frontend/src/views/LoginView.vue     |   2 +-
 6 files changed, 154 insertions(+), 34 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 9b7132cf..2368dbbe 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -3445,7 +3445,7 @@
         },
         "minimist": {
           "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         },
@@ -4618,7 +4618,7 @@
     },
     "async": {
       "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
+      "resolved": "http://registry.npmjs.org/async/-/async-1.5.2.tgz",
       "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
       "dev": true
     },
@@ -4773,7 +4773,7 @@
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "dev": true,
           "requires": {
@@ -4786,7 +4786,7 @@
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
           "requires": {
@@ -5821,7 +5821,7 @@
     },
     "camelcase-keys": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
       "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
       "dev": true,
       "requires": {
@@ -7947,7 +7947,7 @@
         },
         "minimist": {
           "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         }
@@ -8434,7 +8434,7 @@
         },
         "tapable": {
           "version": "0.1.10",
-          "resolved": "https://registry.npmjs.org/tapable/-/tapable-0.1.10.tgz",
+          "resolved": "http://registry.npmjs.org/tapable/-/tapable-0.1.10.tgz",
           "integrity": "sha1-KcNXB8K3DlDQdIK10gLo7URtr9Q=",
           "dev": true
         }
@@ -8658,7 +8658,7 @@
     },
     "events": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
+      "resolved": "http://registry.npmjs.org/events/-/events-1.1.1.tgz",
       "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=",
       "dev": true
     },
@@ -9736,7 +9736,7 @@
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
           "requires": {
@@ -9774,7 +9774,7 @@
     },
     "get-stream": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+      "resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
       "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
       "dev": true
     },
@@ -9904,7 +9904,7 @@
       "dependencies": {
         "minimist": {
           "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.1.3.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.1.3.tgz",
           "integrity": "sha1-O+39kaktOQFvz6ocaB6Pqhoe/ag="
         }
       }
@@ -13858,7 +13858,7 @@
     },
     "json5": {
       "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+      "resolved": "http://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
       "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
       "dev": true
     },
@@ -13970,7 +13970,7 @@
     },
     "load-json-file": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
+      "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
       "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=",
       "dev": true,
       "requires": {
@@ -14357,7 +14357,7 @@
     },
     "meow": {
       "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
+      "resolved": "http://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
       "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
       "dev": true,
       "requires": {
@@ -14385,7 +14385,7 @@
         },
         "load-json-file": {
           "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+          "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
           "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
           "dev": true,
           "requires": {
@@ -14433,7 +14433,7 @@
         },
         "pify": {
           "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
           "dev": true
         },
@@ -14664,7 +14664,7 @@
     },
     "minimist": {
       "version": "0.0.8",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+      "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
       "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
     },
     "minimist-options": {
@@ -14960,7 +14960,7 @@
       "dependencies": {
         "semver": {
           "version": "5.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
           "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
           "dev": true
         }
@@ -15114,7 +15114,7 @@
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "dev": true,
           "requires": {
@@ -15143,7 +15143,7 @@
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
           "requires": {
@@ -16242,7 +16242,7 @@
         },
         "minimist": {
           "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
         }
       }
@@ -17325,7 +17325,7 @@
     },
     "readable-stream": {
       "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+      "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
       "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
       "dev": true,
       "requires": {
@@ -17877,7 +17877,7 @@
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
           "requires": {
@@ -18219,7 +18219,7 @@
         },
         "load-json-file": {
           "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+          "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
           "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
           "dev": true,
           "requires": {
@@ -18232,7 +18232,7 @@
         },
         "os-locale": {
           "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+          "resolved": "http://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
           "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
           "dev": true,
           "requires": {
@@ -18270,7 +18270,7 @@
         },
         "pify": {
           "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
           "dev": true
         },
@@ -18308,7 +18308,7 @@
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
           "requires": {
@@ -22519,7 +22519,7 @@
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
           "requires": {
@@ -22860,7 +22860,7 @@
     },
     "wrap-ansi": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
       "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
       "dev": true,
       "requires": {
@@ -22896,7 +22896,7 @@
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
           "requires": {
diff --git a/frontend/src/components/Language.vue b/frontend/src/components/Language.vue
index 0cbb1ba4..ebf1bffd 100644
--- a/frontend/src/components/Language.vue
+++ b/frontend/src/components/Language.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <ul class="lang">
+    <ul
+      class="lang"
+      :class="{ 'lang-wrap': wrap }"
+    >
       <li
         v-for="language in languagesOrder"
         :key="language"
@@ -22,6 +25,12 @@ import * as actions from '../store/actions';
 
 export default {
   name: 'Language',
+  props: {
+    wrap: {
+      type: Boolean,
+      required: false,
+    },
+  },
   methods: {
     ...mapActions([actions.SWITCH_LANGUAGE]),
     changeLang(languageChecked) {
@@ -47,9 +56,15 @@ ul.lang {
   margin-top: 80px;
 }
 
+ul.lang-wrap {
+  flex-wrap: wrap;
+}
+
 .lang li span {
   cursor: pointer;
   height: 50px;
   width: 40px;
+  display: flex;
+  align-items: center;
 }
 </style>
diff --git a/frontend/src/components/Sidebar.vue b/frontend/src/components/Sidebar.vue
index 2f46393a..d56daf5f 100644
--- a/frontend/src/components/Sidebar.vue
+++ b/frontend/src/components/Sidebar.vue
@@ -6,7 +6,7 @@
   >
     <b-nav fill>
       <navigation-items />
-      <language />
+      <language wrap />
 
       <a
         class="out-link"
diff --git a/frontend/src/services/lang.js b/frontend/src/services/lang.js
index 8de2635f..216a8f4a 100644
--- a/frontend/src/services/lang.js
+++ b/frontend/src/services/lang.js
@@ -8,15 +8,17 @@ export const GB = 'GB';
 export const PL = 'PL';
 export const UA = 'UA';
 export const SO = 'SO';
+export const IQ = 'IQ';
 
 export const languages = {
   [GB]: 'gb',
   [PL]: 'pl',
   [UA]: 'ua',
   [SO]: 'so',
+  [IQ]: 'iq',
 };
 
-export const languagesOrder = ['pl', 'gb', 'ua', 'so'];
+export const languagesOrder = ['pl', 'gb', 'ua', 'so', 'iq'];
 
 const locale = languages[GB];
 const fallbackLocale = languages[GB];
diff --git a/frontend/src/translations.json b/frontend/src/translations.json
index 56bec3fb..bcf4a488 100644
--- a/frontend/src/translations.json
+++ b/frontend/src/translations.json
@@ -409,5 +409,108 @@
       "start_mileage": "Początkowy stan licznika",
       "validation_error": "Pole {field} jest wymagane"
     }
+  },
+  "iq": {
+    "common": {
+      "about": "سەبارەت",
+      "error": "هەلەیە",
+      "home": "بەشی سەرەکی",
+      "intro": "رێکخراوێکی مرۆی ناحوکمیە کە لە پۆلەندا وڵاتانی دیکە کاردەکات",
+      "loading": "چاوەرێکە",
+      "login": "هاتنە ژوورەوە",
+      "logout": "هاتنە دەرەوە",
+      "new_drive": "گەشتی نوێ",
+      "confirm_drive": "قبوڵکرنی گەشت",
+      "no": "نەخێر",
+      "page_not_found": "ئەو لاپەرەیی کە بەدوای دەگەرێی بونی نیە",
+      "please_correct_errors": "تکایە هەڵەکان راستبکەوە",
+      "drives": "گەشتەکان",
+      "unexpected_error": "هەڵەیەکی چاوەروان نەکراو, هەڵەیەکی چاوەروان نەکراو رویدا تکایە پەیوەندی بە بەشی کارگێری ",
+      "yes": "بەڵێ",
+      "are_you_sure": "دڵنیای",
+      "cancel": "رەتکردنەوە",
+      "skip": "Skip"
+    },
+    "drive_form": {
+      "cars": "هەڵبژاردنی ئۆتۆمۆبێڵ",
+      "signature": "واژۆ",
+      "date": "بەروار",
+      "description": "باسکردن",
+      "distance_traveled": "{distance} km traveled",
+      "drive_added_offline_notification": "گەشتەکەت زیاد دەکرێت بۆ بنکەی زانیاری دوای  پەیوەندی کردن بە ئەنترنێت",
+      "drive_added_online_notification": "گەشتەکەت بە سەرکەوتوی زیاد کرا بۆ بنکەی زانیاری",
+      "drive_hash": "پشکنینی گەشتەکان",
+      "ending_mileage": "کۆتا کیلۆمەتر",
+      "end_location": "شوێنی کۆتای",
+      "end_mileage_error": "کۆتا کیلۆ مەتر دروست نیە",
+      "fetching_cars_error": "داواکرنی ئۆتۆمۆبێل سەرکەوتو نەبو",
+      "no_project_message": "ناوی پرۆژە پێوستە",
+      "no_cars_message": "هیچ ئۆتۆمۆبێلێک بەردەست نیە",
+      "passenger": "سەرنشین",
+      "passenger_error": "ناوی سەرنشین پێوستە",
+      "project": "پرۆژە",
+      "reset": "دوبارە چاڵاکردن",
+      "start_location": "شوێنی دەست پێکردن",
+      "starting_mileage": "کیلۆمەتری دەستپێک",
+      "start_mileage_error": "کیلۆمەتری دەستپێک دروست نیە",
+      "submit": "ناردن"
+    },
+    "passenger_form": {
+      "hash": "کۆدی شۆفێر",
+      "invalid_length": "کۆدی شۆفێر پێویستە  لە ٦ژمارە پێکبێت"
+    },
+    "drives": {
+      "car": "لەگەڵ ئۆتۆمۆبێل",
+      "description": "وەسف کردن",
+      "ending_mileage": "کۆتا کیلۆ مەتر",
+      "from_to": "From {from} to {destination}",
+      "no_driver_drives": "ببورە هیچ گەشتێکی پارێزراوت نیە،لە بنکەی زانیاری ، دەتوانی گەشتی نوێ زیاد بکەی لە هەڵبژاردەکان",
+      "synced_drives": "Previous drives",
+      "project": "پرۆژە",
+      "starting_mileage": "کیلۆمەتری دەستپێک",
+      "unsynced_drives": "گەشتە ناهاوتاکان",
+      "total_mileage": "Total {total} km",
+      "unverified_drive": "بۆ چارەسەرکردنگەشتەکەت دوپات نەکرایەوە، پەیوەندی بکە بە کەسی بەرپرسی گەشتەکان لە رێکخراو",
+      "verified_drive": "گەشتەکەت دوپات کرایەوە"
+    },
+    "header": {
+      "polish_humanitarian_action": "رێکخراوی مرۆی پۆڵەندی"
+    },
+    "login": {
+      "login_error": "ەاتنەژورەکە سەرکەوتوو نەبوو",
+      "password": "ژمارەی نهێنی",
+      "password_required": "ژمارەی نهێنی پێویستە",
+      "user": "User: %{username}",
+      "username": "ناوی بەکارهێنەر",
+      "username_required": "ناوی بەکارهێنەر پێویستە"
+    },
+    "logout": {
+      "thank_you": "سوپاس",
+      "successfully_logged_out": "چونەدەرەوەکەت سەرکەەتوبوو",
+      "login_again": "دوبارە هاتنە ژورەوە",
+      "offline_logout_warning": "You are offline, so if you log out right now then you won't be able to log in until you become online again.",
+      "logout_warning": "تۆ هێڵەکەت کارا نیە ،بۆیە ئەگەر ئێستا بچیتە دەرەوە ناتوانی دوبارە بچیتە ژورەوە تاکو هێڵەکەت کارا نەکەی بە ئینتەرنێت"
+    },
+    "refresh": {
+      "new_version": "ڤێرژنی نوێی وێبسایت بەردەستە",
+      "reload": "کاراکردنەوە"
+    },
+    "confirmation": {
+      "comment_label": "تکایە بۆچونی خۆت بنوسە",
+      "drive_ok_label": "گەشتەکەت باش بوو؟",
+      "submission_success": "دوپات کردنەوەکەت ناردرا، سوپاس",
+      "token_inactive": "لینکەکەت بەسەر چوە یاخود پێشو تر پشتراست کراوەتوە"
+    },
+    "form_errors": {
+      "car": "Car",
+      "end_location": "End location",
+      "end_mileage": "Ending mileage",
+      "hash": "Code",
+      "passenger": "Passenger",
+      "project": "Project",
+      "start_location": "Start location",
+      "start_mileage": "Starting mileage",
+      "validation_error": "{field} is required"
+    }
   }
 }
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index 5234ce0a..ac44593b 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -102,7 +102,7 @@ export default {
 @import '../scss/base';
 
 .language-container {
-  max-width: 200px;
+  max-width: 300px;
   margin: 0 auto;
 }
 </style>

From 7b2479487d1c83e9e20833646973d21a8241b82b Mon Sep 17 00:00:00 2001
From: Vlad <kiyashko.vlad1@gmail.com>
Date: Wed, 28 Apr 2021 22:08:44 +0200
Subject: [PATCH 3/8] Fix issue related to shell script on windows (windows
 can't understand LF end of line)

---
 .gitattributes | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 .gitattributes

diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 00000000..dcd444fb
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,2 @@
+# Convert to LF line endings on checkout.
+*.sh text eol=lf
\ No newline at end of file

From ce4589ff4c5a99f1cc21170d959b4bbf8e892a7e Mon Sep 17 00:00:00 2001
From: Vlad <kiyashko.vlad1@gmail.com>
Date: Wed, 28 Apr 2021 22:09:24 +0200
Subject: [PATCH 4/8] Add formik and yup for forms state management and
 validation.

---
 frontend-react/package.json |  4 ++-
 frontend-react/yarn.lock    | 70 ++++++++++++++++++++++++++++++++++++-
 2 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/frontend-react/package.json b/frontend-react/package.json
index 68bbf881..4d7c670b 100644
--- a/frontend-react/package.json
+++ b/frontend-react/package.json
@@ -15,6 +15,7 @@
     "@transifex/react": "^0.11.2",
     "axios": "^0.21.0",
     "case-converter": "^1.0.1",
+    "formik": "^2.2.6",
     "history": "^5.0.0",
     "js-cookie": "^2.2.1",
     "jss": "^10.6.0",
@@ -28,7 +29,8 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "react-world-flags": "^1.4.0",
-    "web-vitals": "^0.2.4"
+    "web-vitals": "^0.2.4",
+    "yup": "^0.32.9"
   },
   "devDependencies": {
     "@babel/cli": "^7.12.10",
diff --git a/frontend-react/yarn.lock b/frontend-react/yarn.lock
index fd04fdac..70740a49 100644
--- a/frontend-react/yarn.lock
+++ b/frontend-react/yarn.lock
@@ -1144,6 +1144,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.10.5":
+  version "7.13.17"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.17.tgz#8966d1fc9593bf848602f0662d6b4d0069e3a7ec"
+  integrity sha512-NCdgJEelPTSh+FEFylhnP1ylq848l1z9t9N0j1Lfbcw0+KXGjsTvUmkxy+voLLXB5SOKMbLLx4jxYliGrYQseA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.4", "@babel/template@^7.12.13", "@babel/template@^7.3.3":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327"
@@ -2012,6 +2019,11 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
+"@types/lodash@^4.14.165":
+  version "4.14.168"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.168.tgz#fe24632e79b7ade3f132891afff86caa5e5ce008"
+  integrity sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q==
+
 "@types/minimatch@*":
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.4.tgz#f0ec25dbf2f0e4b18647313ac031134ca5b24b21"
@@ -4472,6 +4484,11 @@ deep-is@^0.1.3, deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
+deepmerge@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
+
 deepmerge@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
@@ -5694,6 +5711,19 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+formik@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/formik/-/formik-2.2.6.tgz#378a4bafe4b95caf6acf6db01f81f3fe5147559d"
+  integrity sha512-Kxk2zQRafy56zhLmrzcbryUpMBvT0tal5IvcifK5+4YNGelKsnrODFJ0sZQRMQboblWNym4lAW3bt+tf2vApSA==
+  dependencies:
+    deepmerge "^2.1.1"
+    hoist-non-react-statics "^3.3.0"
+    lodash "^4.17.14"
+    lodash-es "^4.17.14"
+    react-fast-compare "^2.0.1"
+    tiny-warning "^1.0.2"
+    tslib "^1.10.0"
+
 forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
@@ -7884,6 +7914,11 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
+lodash-es@^4.17.14, lodash-es@^4.17.15:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash._reinterpolate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@@ -8409,6 +8444,11 @@ nan@^2.12.1, nan@^2.13.2:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
   integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
 
+nanoclone@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/nanoclone/-/nanoclone-0.2.1.tgz#dd4090f8f1a110d26bb32c49ed2f5b9235209ed4"
+  integrity sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==
+
 nanoid@^3.1.22:
   version "3.1.22"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.22.tgz#b35f8fb7d151990a8aebd5aa5015c03cf726f844"
@@ -10029,6 +10069,11 @@ prop-types@^15.6.2, prop-types@^15.7.2:
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+property-expr@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.4.tgz#37b925478e58965031bb612ec5b3260f8241e910"
+  integrity sha512-sFPkHQjVKheDNnPvotjQmm3KD3uk1fWKUN7CrpdbwmUx3CrG3QiM8QpTSimvig5vTXmTvjz7+TDvXOI9+4rkcg==
+
 proxy-addr@~2.0.5:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.6.tgz#fdc2336505447d3f2f2c638ed272caf614bbb2bf"
@@ -10240,6 +10285,11 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
+react-fast-compare@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
+  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+
 react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -12074,6 +12124,11 @@ toidentifier@1.0.0:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
+toposort@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
+  integrity sha1-riF2gXXRVZ1IvvNUILL0li8JwzA=
+
 tough-cookie@^2.3.3, tough-cookie@~2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
@@ -12130,7 +12185,7 @@ tsconfig-paths@^3.9.0:
     minimist "^1.2.0"
     strip-bom "^3.0.0"
 
-tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
+tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@@ -13085,3 +13140,16 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+yup@^0.32.9:
+  version "0.32.9"
+  resolved "https://registry.yarnpkg.com/yup/-/yup-0.32.9.tgz#9367bec6b1b0e39211ecbca598702e106019d872"
+  integrity sha512-Ci1qN+i2H0XpY7syDQ0k5zKQ/DoxO0LzPg8PAR/X4Mpj6DqaeCoIYEEjDJwhArh3Fa7GWbQQVDZKeXYlSH4JMg==
+  dependencies:
+    "@babel/runtime" "^7.10.5"
+    "@types/lodash" "^4.14.165"
+    lodash "^4.17.20"
+    lodash-es "^4.17.15"
+    nanoclone "^0.2.1"
+    property-expr "^2.0.4"
+    toposort "^2.0.2"

From ff513ba975dc799b8551083ef4f2b6d6fee0c161 Mon Sep 17 00:00:00 2001
From: Vlad <kiyashko.vlad1@gmail.com>
Date: Wed, 28 Apr 2021 22:23:37 +0200
Subject: [PATCH 5/8] Add colors for Add Drive View

---
 frontend-react/src/theme/index.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend-react/src/theme/index.js b/frontend-react/src/theme/index.js
index 68f7d917..e2eb4d1f 100644
--- a/frontend-react/src/theme/index.js
+++ b/frontend-react/src/theme/index.js
@@ -9,11 +9,17 @@ const themeObject = {
     },
     background: {
       default: '#fff',
+      grayLight: '#e9ecef',
     },
     sidebar: {
       fg: '#fff',
       bg: '#338ec9',
-    }
+    },
+    errorMessage: {
+      fg: '#721c24',
+      bg: '#f8d7da',
+      border: '#f5c6cb'
+    },
   },
 };
 

From 78a2ff465ff08948e8c581c1ede241fc8adb3486 Mon Sep 17 00:00:00 2001
From: Vlad <kiyashko.vlad1@gmail.com>
Date: Wed, 28 Apr 2021 22:26:00 +0200
Subject: [PATCH 6/8] Create Add Drive View and Add new route for it.

---
 frontend-react/src/routes.js                 |   6 +
 frontend-react/src/views/Add Drive/index.js  | 208 +++++++++++++++++++
 frontend-react/src/views/Add Drive/styles.js |  57 +++++
 3 files changed, 271 insertions(+)
 create mode 100644 frontend-react/src/views/Add Drive/index.js
 create mode 100644 frontend-react/src/views/Add Drive/styles.js

diff --git a/frontend-react/src/routes.js b/frontend-react/src/routes.js
index ab7dfc66..07eba1ea 100644
--- a/frontend-react/src/routes.js
+++ b/frontend-react/src/routes.js
@@ -44,6 +44,7 @@ const routeKeys = {
   LOGOUT: 'logout',
   NOTFOUND: 'notfound',
   DEFAULT: 'default',
+  DRIVE: 'drive'
 }
 
 const routes = [
@@ -70,6 +71,11 @@ const routes = [
     key: routeKeys.NOTFOUND,
     component: lazy(() => import('./views/NotFound'))
   },
+  {
+    path: '/drive',
+    key: routeKeys.DRIVE,
+    component: lazy(() => import('./views/Add Drive'))
+  },
   {
     path: '*',
     key: routeKeys.DEFAULT,
diff --git a/frontend-react/src/views/Add Drive/index.js b/frontend-react/src/views/Add Drive/index.js
new file mode 100644
index 00000000..a6b49614
--- /dev/null
+++ b/frontend-react/src/views/Add Drive/index.js	
@@ -0,0 +1,208 @@
+import React, { useState, useEffect } from 'react';
+import Page from '../../components/Page';
+import {
+  FormControl,
+  Box,
+  TextField,
+  InputLabel,
+  Select,
+  MenuItem,
+  Container,
+  Button,
+  Typography,
+} from '@material-ui/core';
+
+import useT from '../../utils/translation';
+import { useFormik } from 'formik';
+import * as yup from 'yup';
+
+// styling
+import { useStyles, WhiteBox, ButtonsContainer } from './styles';
+
+const DriveView = () => {
+  // local state
+  const [traveled, setTraveled] = useState(0);
+
+  // Translated labels
+  const title = useT('Add new drive');
+  const errorTitle = useT('Please correct the following error(s):');
+
+  // separate object to generate fields dynamically
+  const translatedFieldsLabels = {
+    date: useT('Date'),
+    startLocation: useT('Start location'),
+    mileageStart: useT('Starting mileage'),
+    project: useT('Project'),
+    car: useT('Choose a car'),
+    passenger: useT('Passenger'),
+    description: useT('Description'),
+    endLocation: useT('End location'),
+    mileageEnd: useT('Ending mileage'),
+  };
+
+  const validationSchema = yup.object().shape({
+    startLocation: yup.string().required(useT('Start location is required')),
+    mileageStart: yup.string().required(useT('Starting mileage is required')),
+    project: yup.string().required(useT('Project is required')),
+    car: yup.string().required(useT('Car is required')),
+    passenger: yup.string().required(useT('Start location is required')),
+    endLocation: yup.string().required(useT('End location is required')),
+    mileageEnd: yup.string().required(useT('Ending mileage is required')),
+  });
+
+  const formik = useFormik({
+    initialValues: {
+      date: new Date().toISOString().split('T')[0],
+      startLocation: '',
+      mileageStart: 0,
+      project: '',
+      car: '',
+      passenger: '',
+      description: '',
+      endLocation: '',
+      mileageEnd: 0,
+    },
+    validateOnChange: false,
+    validationSchema: validationSchema,
+    onSubmit: (values) => {
+      alert(JSON.stringify(values, null, 2));
+    },
+  });
+
+  useEffect(() => {
+    const { mileageStart, mileageEnd } = formik.values;
+    const mileage = mileageEnd - mileageStart;
+
+    if (mileage !== traveled && mileage >= 0) {
+      setTraveled(mileage);
+    }
+  }, [formik.values, traveled]);
+
+  // values to generate MenuItems in select fields. Will be converted to redux slice.
+  const selectItems = {
+    project: ['TestProject1', 'TestProject2', 'TestProject3'],
+    car: ['Audi', 'Opel', 'Lamborghini'],
+    passenger: ['Passenger1', 'Passenger2', 'Passenger3'],
+  };
+
+  const selectItemsNames = Object.keys(selectItems);
+
+  // generate fieldList array dynamically
+  const fieldList = Object.keys(formik.values).map((label) => {
+    let type = 'text';
+
+    // set type based on label
+    if (label.includes('mileage')) {
+      type = 'number';
+    } else if (label === 'date') {
+      type = 'date';
+    }
+
+    const isSelect = selectItemsNames.includes(label);
+
+    const result = {
+      isTextField: !isSelect,
+      translatedLabel: translatedFieldsLabels[label],
+      labelName: label,
+      type,
+      errorText: formik.errors[label],
+    };
+
+    if (isSelect) {
+      result.items = selectItems[label];
+    }
+
+    return result;
+  });
+
+  const classes = useStyles();
+  
+  return (
+    <Page title="Drive" className={classes.root}>
+      <Container className={classes.container} maxWidth="md">
+        {Object.keys(formik.errors).length > 0 ? (
+          <Box className={classes.errorContainer}>
+            <Typography
+              variant="h4"
+              component="h4"
+              className={classes.errorTitle}
+            >
+              {errorTitle}
+            </Typography>
+            <ul>
+              {Object.values(formik.errors).map((errorText) => (
+                <li key={errorText}>{errorText}</li>
+              ))}
+            </ul>
+          </Box>
+        ) : null}
+        <form className={classes.formContainer} onSubmit={formik.handleSubmit}>
+          <Typography variant="h2" component="h2" className={classes.title}>
+            {title}
+          </Typography>
+          <Box display="flex" flexDirection="column">
+            {fieldList.map((field) => {
+              if (!field.isTextField) {
+                const { translatedLabel, labelName, items, errorText } = field;
+                return (
+                  <WhiteBox key={`${labelName}-select-container`}>
+                    <FormControl variant="outlined" fullWidth>
+                      <InputLabel id={`drive-${labelName}-label`}>
+                        {translatedLabel}
+                      </InputLabel>
+                      <Select
+                        id={`drive-${labelName}`}
+                        name={labelName}
+                        labelId={`drive-${labelName}-label`}
+                        label={translatedLabel}
+                        value={formik.values[labelName]}
+                        onChange={formik.handleChange}
+                        error={!!errorText}
+                      >
+                        {items.map((item) => (
+                          <MenuItem key={item} value={item}>
+                            {item}
+                          </MenuItem>
+                        ))}
+                      </Select>
+                    </FormControl>
+                  </WhiteBox>
+                );
+              } else {
+                const { translatedLabel, labelName, type, errorText } = field;
+                return (
+                  <WhiteBox key={`${labelName}-container`}>
+                    <TextField
+                      id={`drive-${labelName}`}
+                      name={labelName}
+                      variant="outlined"
+                      fullWidth
+                      label={translatedLabel}
+                      type={type}
+                      value={formik.values[labelName]}
+                      onChange={formik.handleChange}
+                      error={!!errorText}
+                    />
+                  </WhiteBox>
+                );
+              }
+            })}
+          </Box>
+          <p>
+            {traveled} km {useT('traveled')}
+          </p>
+          <ButtonsContainer>
+            <Button type="submit" variant="contained" color="primary">
+              Submit
+            </Button>
+            <Button variant="contained" onClick={formik.resetForm}>
+              Reset
+            </Button>
+          </ButtonsContainer>
+        </form>
+      </Container>
+    </Page>
+  );
+};
+
+export default DriveView;
diff --git a/frontend-react/src/views/Add Drive/styles.js b/frontend-react/src/views/Add Drive/styles.js
new file mode 100644
index 00000000..613cfadf
--- /dev/null
+++ b/frontend-react/src/views/Add Drive/styles.js	
@@ -0,0 +1,57 @@
+import { makeStyles, styled } from '@material-ui/styles';
+import { Box } from '@material-ui/core';
+
+export const useStyles = makeStyles(({ palette }) => ({
+  root: {
+    flexGrow: 1,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    minHeight: '100%',
+  },
+  container: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'column',
+    background: palette.background.grayLight,
+    padding: '4rem 2rem',
+    margin: '0.5rem',
+    borderRadius: '0.3rem',
+  },
+  formContainer: {
+    minWidth: '60%',
+  },
+  title: {
+    fontSize: '2rem',
+    fontWeight: 'normal',
+    marginBottom: '2rem',
+  },
+  errorContainer: {
+    minWidth: '60%',
+    padding: '.75rem 1.25rem',
+    marginBottom: '1rem',
+    fontSize: '1rem',
+    color: palette.errorMessage.fg,
+    backgroundColor: palette.errorMessage.bg,
+    border: `1px solid ${palette.errorMessage.border}`,
+    borderRadius: '.25rem',
+  },
+  errorTitle: {
+    fontSize: '1.125rem',
+    fontWeight: 'bold',
+  },
+}));
+
+export const WhiteBox = styled(Box)({
+  backgroundColor: 'white',
+  marginBottom: '1.5rem',
+  '&:last-of-type': {
+    marginBottom: 'unset',
+  },
+});
+
+export const ButtonsContainer = styled(Box)({
+  display: 'flex',
+  justifyContent: 'space-between',
+});

From 4e55993d3a48a47141441e28eacd0f1eef35918f Mon Sep 17 00:00:00 2001
From: Vlad <kiyashko.vlad1@gmail.com>
Date: Sun, 2 May 2021 21:49:50 +0200
Subject: [PATCH 7/8] Resolve issues listed in code review(Renamed folder to
 AddDrive, changed validation types in yup to number for mileage start and
 end, extracted traveledT variable otside JSX.)

---
 frontend-react/src/routes.js                             | 2 +-
 .../src/views/{Add Drive => AddDrive}/index.js           | 9 +++++----
 .../src/views/{Add Drive => AddDrive}/styles.js          | 0
 3 files changed, 6 insertions(+), 5 deletions(-)
 rename frontend-react/src/views/{Add Drive => AddDrive}/index.js (96%)
 rename frontend-react/src/views/{Add Drive => AddDrive}/styles.js (100%)

diff --git a/frontend-react/src/routes.js b/frontend-react/src/routes.js
index 07eba1ea..8990d35b 100644
--- a/frontend-react/src/routes.js
+++ b/frontend-react/src/routes.js
@@ -74,7 +74,7 @@ const routes = [
   {
     path: '/drive',
     key: routeKeys.DRIVE,
-    component: lazy(() => import('./views/Add Drive'))
+    component: lazy(() => import('./views/AddDrive'))
   },
   {
     path: '*',
diff --git a/frontend-react/src/views/Add Drive/index.js b/frontend-react/src/views/AddDrive/index.js
similarity index 96%
rename from frontend-react/src/views/Add Drive/index.js
rename to frontend-react/src/views/AddDrive/index.js
index a6b49614..130b9192 100644
--- a/frontend-react/src/views/Add Drive/index.js	
+++ b/frontend-react/src/views/AddDrive/index.js
@@ -26,6 +26,7 @@ const DriveView = () => {
   // Translated labels
   const title = useT('Add new drive');
   const errorTitle = useT('Please correct the following error(s):');
+  const traveledT = useT('traveled');
 
   // separate object to generate fields dynamically
   const translatedFieldsLabels = {
@@ -42,12 +43,12 @@ const DriveView = () => {
 
   const validationSchema = yup.object().shape({
     startLocation: yup.string().required(useT('Start location is required')),
-    mileageStart: yup.string().required(useT('Starting mileage is required')),
+    mileageStart: yup.number().required(useT('Starting mileage is required')),
     project: yup.string().required(useT('Project is required')),
     car: yup.string().required(useT('Car is required')),
     passenger: yup.string().required(useT('Start location is required')),
     endLocation: yup.string().required(useT('End location is required')),
-    mileageEnd: yup.string().required(useT('Ending mileage is required')),
+    mileageEnd: yup.number().required(useT('Ending mileage is required')),
   });
 
   const formik = useFormik({
@@ -116,7 +117,7 @@ const DriveView = () => {
   });
 
   const classes = useStyles();
-  
+
   return (
     <Page title="Drive" className={classes.root}>
       <Container className={classes.container} maxWidth="md">
@@ -189,7 +190,7 @@ const DriveView = () => {
             })}
           </Box>
           <p>
-            {traveled} km {useT('traveled')}
+            {traveled} km {traveledT}
           </p>
           <ButtonsContainer>
             <Button type="submit" variant="contained" color="primary">
diff --git a/frontend-react/src/views/Add Drive/styles.js b/frontend-react/src/views/AddDrive/styles.js
similarity index 100%
rename from frontend-react/src/views/Add Drive/styles.js
rename to frontend-react/src/views/AddDrive/styles.js

From b82eeb0596db5d027c87ee04aa1d4995fd39ad5c Mon Sep 17 00:00:00 2001
From: Vlad <kiyashko.vlad1@gmail.com>
Date: Sun, 2 May 2021 22:47:04 +0200
Subject: [PATCH 8/8] Fix naming inconsitency and extract button's texts from
 JSX to variables.

---
 frontend-react/src/routes.js                           | 2 +-
 frontend-react/src/views/{AddDrive => Drive}/index.js  | 6 ++++--
 frontend-react/src/views/{AddDrive => Drive}/styles.js | 0
 3 files changed, 5 insertions(+), 3 deletions(-)
 rename frontend-react/src/views/{AddDrive => Drive}/index.js (98%)
 rename frontend-react/src/views/{AddDrive => Drive}/styles.js (100%)

diff --git a/frontend-react/src/routes.js b/frontend-react/src/routes.js
index 8990d35b..9ace5e34 100644
--- a/frontend-react/src/routes.js
+++ b/frontend-react/src/routes.js
@@ -74,7 +74,7 @@ const routes = [
   {
     path: '/drive',
     key: routeKeys.DRIVE,
-    component: lazy(() => import('./views/AddDrive'))
+    component: lazy(() => import('./views/Drive'))
   },
   {
     path: '*',
diff --git a/frontend-react/src/views/AddDrive/index.js b/frontend-react/src/views/Drive/index.js
similarity index 98%
rename from frontend-react/src/views/AddDrive/index.js
rename to frontend-react/src/views/Drive/index.js
index 130b9192..b6ec5556 100644
--- a/frontend-react/src/views/AddDrive/index.js
+++ b/frontend-react/src/views/Drive/index.js
@@ -27,6 +27,8 @@ const DriveView = () => {
   const title = useT('Add new drive');
   const errorTitle = useT('Please correct the following error(s):');
   const traveledT = useT('traveled');
+  const submit = useT('Submit');
+  const reset = useT('Reset');
 
   // separate object to generate fields dynamically
   const translatedFieldsLabels = {
@@ -194,10 +196,10 @@ const DriveView = () => {
           </p>
           <ButtonsContainer>
             <Button type="submit" variant="contained" color="primary">
-              Submit
+              {submit}
             </Button>
             <Button variant="contained" onClick={formik.resetForm}>
-              Reset
+              {reset}
             </Button>
           </ButtonsContainer>
         </form>
diff --git a/frontend-react/src/views/AddDrive/styles.js b/frontend-react/src/views/Drive/styles.js
similarity index 100%
rename from frontend-react/src/views/AddDrive/styles.js
rename to frontend-react/src/views/Drive/styles.js