From ef4b942976966d3e59b8e6528519094dc1182dff Mon Sep 17 00:00:00 2001
From: Regis Freyd <djaiss@users.noreply.github.com>
Date: Sun, 5 Feb 2023 20:20:04 -0500
Subject: [PATCH 01/12] feat: list all addresses in vault

---
 .../ContactModuleAddressController.php        |   8 +-
 .../ModuleContactAddressesViewHelper.php      |  16 +-
 resources/js/Shared/Modules/Addresses.vue     | 369 ++++++++++--------
 .../ModuleContactAddressesViewHelperTest.php  |  28 +-
 4 files changed, 247 insertions(+), 174 deletions(-)

diff --git a/app/Domains/Contact/ManageContactAddresses/Web/Controllers/ContactModuleAddressController.php b/app/Domains/Contact/ManageContactAddresses/Web/Controllers/ContactModuleAddressController.php
index 24e6b6643..4fd33c496 100644
--- a/app/Domains/Contact/ManageContactAddresses/Web/Controllers/ContactModuleAddressController.php
+++ b/app/Domains/Contact/ManageContactAddresses/Web/Controllers/ContactModuleAddressController.php
@@ -8,6 +8,7 @@
 use App\Domains\Vault\ManageAddresses\Services\CreateAddress;
 use App\Domains\Vault\ManageAddresses\Services\UpdateAddress;
 use App\Http\Controllers\Controller;
+use App\Models\Address;
 use App\Models\Contact;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
@@ -31,7 +32,12 @@ public function store(Request $request, int $vaultId, int $contactId)
             'longitude' => null,
         ];
 
-        $address = (new CreateAddress())->execute($data);
+        if (! $request->input('existing_address')) {
+            $address = (new CreateAddress())->execute($data);
+        } else {
+            $address = Address::where('vault_id', $vaultId)
+                ->findOrFail($request->input('existing_address_id'));
+        }
 
         (new AssociateAddressToContact())->execute([
             'account_id' => Auth::user()->account_id,
diff --git a/app/Domains/Contact/ManageContactAddresses/Web/ViewHelpers/ModuleContactAddressesViewHelper.php b/app/Domains/Contact/ManageContactAddresses/Web/ViewHelpers/ModuleContactAddressesViewHelper.php
index 088c0c9ca..b99f943cc 100644
--- a/app/Domains/Contact/ManageContactAddresses/Web/ViewHelpers/ModuleContactAddressesViewHelper.php
+++ b/app/Domains/Contact/ManageContactAddresses/Web/ViewHelpers/ModuleContactAddressesViewHelper.php
@@ -12,12 +12,12 @@ class ModuleContactAddressesViewHelper
 {
     public static function data(Contact $contact, User $user): array
     {
-        $activeAddressesCollection = $contact->addresses()
+        $contactActiveAddressesCollection = $contact->addresses()
             ->wherePivot('is_past_address', false)
             ->get()
             ->map(fn (Address $address) => self::dto($contact, $address, $user));
 
-        $inactiveAddressesCollection = $contact->addresses()
+        $contactInactiveAddressesCollection = $contact->addresses()
             ->wherePivot('is_past_address', true)
             ->get()
             ->map(fn (Address $address) => self::dto($contact, $address, $user));
@@ -31,10 +31,18 @@ public static function data(Contact $contact, User $user): array
                 'selected' => false,
             ]);
 
+        $vaultAddressesCollection = $contact->vault->addresses()
+            ->get()
+            ->map(fn (Address $address) => [
+                'id' => $address->id,
+                'address' => MapHelper::getAddressAsString($address),
+            ]);
+
         return [
-            'active_addresses' => $activeAddressesCollection,
-            'inactive_addresses' => $inactiveAddressesCollection,
+            'active_addresses' => $contactActiveAddressesCollection,
+            'inactive_addresses' => $contactInactiveAddressesCollection,
             'address_types' => $addressTypesCollection,
+            'addresses_in_vault' => $vaultAddressesCollection,
             'url' => [
                 'store' => route('contact.address.store', [
                     'vault' => $contact->vault_id,
diff --git a/resources/js/Shared/Modules/Addresses.vue b/resources/js/Shared/Modules/Addresses.vue
index 2157d3c9f..928112b5b 100644
--- a/resources/js/Shared/Modules/Addresses.vue
+++ b/resources/js/Shared/Modules/Addresses.vue
@@ -1,3 +1,144 @@
+<script setup>
+import PrettyButton from '@/Shared/Form/PrettyButton.vue';
+import PrettySpan from '@/Shared/Form/PrettySpan.vue';
+import TextInput from '@/Shared/Form/TextInput.vue';
+import Errors from '@/Shared/Form/Errors.vue';
+import Dropdown from '@/Shared/Form/Dropdown.vue';
+import { onMounted, ref, nextTick } from 'vue';
+import { useForm } from '@inertiajs/inertia-vue3';
+
+const props = defineProps({
+  layoutData: Object,
+  data: Object,
+});
+
+const loadingState = ref('');
+const createAddressModalShown = ref(false);
+const inactiveAddressesShown = ref(false);
+const localActiveAddresses = ref([]);
+const localInactiveAddresses = ref([]);
+const editedAddressId = ref(0);
+const choiceChooseExisting = ref(true);
+const warning = ref('');
+
+const form = useForm({
+  existing_address: false,
+  existing_address_id: 0,
+  type: '',
+  address_type_id: 0,
+  is_past_address: false,
+  line_1: '',
+  line_2: '',
+  city: '',
+  province: '',
+  postal_code: '',
+  country: '',
+  errors: [],
+});
+
+onMounted(() => {
+  localActiveAddresses.value = props.data.active_addresses;
+  localInactiveAddresses.value = props.data.inactive_addresses;
+  choiceChooseExisting.value = true;
+});
+
+const showCreateAddressModal = () => {
+  form.errors = [];
+  form.is_past_address = false;
+  form.address_type_id = 0;
+  form.line_1 = '';
+  form.line_2 = '';
+  form.city = '';
+  form.province = '';
+  form.postal_code = '';
+  form.country = '';
+  createAddressModalShown.value = true;
+};
+
+const toggleInactiveAdresses = () => {
+  inactiveAddressesShown.value = !inactiveAddressesShown.value;
+};
+
+const showEditAddressModal = (address) => {
+  editedAddressId.value = address.id;
+  form.errors = [];
+  form.is_past_address = address.is_past_address;
+  form.address_type_id = address.type ? address.type.id : 0;
+  form.line_1 = address.line_1;
+  form.line_2 = address.line_2;
+  form.city = address.city;
+  form.province = address.province;
+  form.postal_code = address.postal_code;
+  form.country = address.country;
+};
+
+const submit = () => {
+  loadingState.value = 'loading';
+  form.existing_address = choiceChooseExisting.value;
+
+  axios
+    .post(props.data.url.store, form)
+    .then((response) => {
+      if (form.is_past_address) {
+        localInactiveAddresses.value.unshift(response.data.data);
+      } else {
+        localActiveAddresses.value.unshift(response.data.data);
+      }
+
+      loadingState.value = '';
+      createAddressModalShown.value = false;
+    })
+    .catch((error) => {
+      loadingState.value = '';
+      form.errors = error.response.data;
+    });
+};
+
+const update = (address) => {
+  loadingState.value = 'loading';
+
+  axios
+    .put(address.url.update, form)
+    .then((response) => {
+      loadingState.value = '';
+
+      if (form.is_past_address) {
+        localInactiveAddresses.value[localInactiveAddresses.value.findIndex((x) => x.id === address.id)] =
+          response.data.data;
+      } else {
+        localActiveAddresses.value[localActiveAddresses.value.findIndex((x) => x.id === address.id)] =
+          response.data.data;
+      }
+      editedAddressId.value = 0;
+    })
+    .catch((error) => {
+      loadingState.value = '';
+      form.errors = error.response.data;
+    });
+};
+
+const destroy = (address) => {
+  if (confirm(this.$t('contact.addresses_delete_confirm'))) {
+    axios
+      .delete(address.url.destroy)
+      .then(() => {
+        if (address.is_past_address) {
+          const id = localInactiveAddresses.value.findIndex((x) => x.id === address.id);
+          localInactiveAddresses.value.splice(id, 1);
+        } else {
+          const id2 = localActiveAddresses.value.findIndex((x) => x.id === address.id);
+          localActiveAddresses.value.splice(id2, 1);
+        }
+      })
+      .catch((error) => {
+        loadingState.value = null;
+        form.errors = error.response.data;
+      });
+  }
+};
+
+</script>
+
 <template>
   <div class="mb-10">
     <!-- title + cta -->
@@ -36,7 +177,69 @@
         v-if="createAddressModalShown"
         class="bg-form mb-6 rounded-lg border border-gray-200 dark:border-gray-700 dark:bg-gray-900"
         @submit.prevent="submit()">
-        <div class="border-b border-gray-200 dark:border-gray-700">
+
+        <!-- radio button: choose existing or create new address -->
+        <div class="p-5 mb-2 border-b border-gray-200 dark:border-gray-700">
+          <div class="mb-2 flex items-center">
+            <input
+              id="chooseExisting"
+              :checked="choiceChooseExisting"
+              @change="choiceChooseExisting = true"
+              name="exist"
+              type="radio"
+              class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
+            <label
+              for="chooseExisting"
+              class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+              Choose an existing address
+            </label>
+          </div>
+
+          <div class="flex items-center">
+            <input
+              id="createNew"
+              :checked="!choiceChooseExisting"
+              @change="choiceChooseExisting = false"
+              name="exist"
+              type="radio"
+              class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
+            <label
+              for="createNew"
+              class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+              Create a new address
+            </label>
+          </div>
+        </div>
+
+        <!-- existing addresses -->
+        <div v-if="choiceChooseExisting" class="p-3 border-b border-gray-200 dark:border-gray-700">
+          <ul
+            class="rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
+            <li
+              v-for="address in props.data.addresses_in_vault"
+              :key="address.id"
+              class="item-list px-3 py-2 border-b border-gray-200 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
+              <!-- detail of the address type -->
+              <div class="flex items-center">
+                <input
+                  :id="'address-' + address.id"
+                  v-model="form.existing_address_id"
+                  :value="address.id"
+                  name="date-format"
+                  type="radio"
+                  class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
+                <label
+                  :for="'address-' + address.id"
+                  class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                  {{ address.address }}
+                </label>
+              </div>
+            </li>
+          </ul>
+        </div>
+
+        <!-- create new address -->
+        <div v-if="!choiceChooseExisting" class="border-b border-gray-200 dark:border-gray-700">
           <div v-if="form.errors.length > 0" class="p-5">
             <errors :errors="form.errors" />
           </div>
@@ -487,170 +690,6 @@
   </div>
 </template>
 
-<script>
-import PrettyButton from '@/Shared/Form/PrettyButton.vue';
-import PrettySpan from '@/Shared/Form/PrettySpan.vue';
-import TextInput from '@/Shared/Form/TextInput.vue';
-import Errors from '@/Shared/Form/Errors.vue';
-import Dropdown from '@/Shared/Form/Dropdown.vue';
-
-export default {
-  components: {
-    PrettyButton,
-    PrettySpan,
-    TextInput,
-    Errors,
-    Dropdown,
-  },
-
-  props: {
-    layoutData: {
-      type: Object,
-      default: null,
-    },
-    data: {
-      type: Object,
-      default: null,
-    },
-  },
-
-  data() {
-    return {
-      loadingState: '',
-      createAddressModalShown: false,
-      inactiveAddressesShown: false,
-      localActiveAddresses: [],
-      localInactiveAddresses: [],
-      editedAddressId: 0,
-      warning: '',
-      form: {
-        type: '',
-        address_type_id: 0,
-        is_past_address: false,
-        line_1: '',
-        line_2: '',
-        city: '',
-        province: '',
-        postal_code: '',
-        country: '',
-        errors: [],
-      },
-    };
-  },
-
-  created() {
-    this.localActiveAddresses = this.data.active_addresses;
-    this.localInactiveAddresses = this.data.inactive_addresses;
-  },
-
-  methods: {
-    showCreateAddressModal() {
-      this.form.errors = [];
-
-      this.form.is_past_address = false;
-      this.form.address_type_id = 0;
-      this.form.line_1 = '';
-      this.form.line_2 = '';
-      this.form.city = '';
-      this.form.province = '';
-      this.form.postal_code = '';
-      this.form.country = '';
-      this.createAddressModalShown = true;
-
-      this.$nextTick(() => {
-        this.$refs.line_1.focus();
-      });
-    },
-
-    toggleInactiveAdresses() {
-      this.inactiveAddressesShown = !this.inactiveAddressesShown;
-    },
-
-    showEditAddressModal(address) {
-      this.editedAddressId = address.id;
-      this.form.errors = [];
-      this.form.is_past_address = address.is_past_address;
-      this.form.address_type_id = address.type ? address.type.id : 0;
-      this.form.line_1 = address.line_1;
-      this.form.line_2 = address.line_2;
-      this.form.city = address.city;
-      this.form.province = address.province;
-      this.form.postal_code = address.postal_code;
-      this.form.country = address.country;
-    },
-
-    submit() {
-      this.loadingState = 'loading';
-
-      axios
-        .post(this.data.url.store, this.form)
-        .then((response) => {
-          this.flash(this.$t('contact.addresses_new_success'), 'success');
-
-          if (this.form.is_past_address) {
-            this.localInactiveAddresses.unshift(response.data.data);
-          } else {
-            this.localActiveAddresses.unshift(response.data.data);
-          }
-
-          this.loadingState = '';
-          this.createAddressModalShown = false;
-        })
-        .catch((error) => {
-          this.loadingState = '';
-          this.form.errors = error.response.data;
-        });
-    },
-
-    update(address) {
-      this.loadingState = 'loading';
-
-      axios
-        .put(address.url.update, this.form)
-        .then((response) => {
-          this.loadingState = '';
-          this.flash(this.$t('contact.addresses_edit_success'), 'success');
-
-          if (this.form.is_past_address) {
-            this.localInactiveAddresses[this.localInactiveAddresses.findIndex((x) => x.id === address.id)] =
-              response.data.data;
-          } else {
-            this.localActiveAddresses[this.localActiveAddresses.findIndex((x) => x.id === address.id)] =
-              response.data.data;
-          }
-          this.editedAddressId = 0;
-        })
-        .catch((error) => {
-          this.loadingState = '';
-          this.form.errors = error.response.data;
-        });
-    },
-
-    destroy(address) {
-      if (confirm(this.$t('contact.addresses_delete_confirm'))) {
-        axios
-          .delete(address.url.destroy)
-          .then(() => {
-            this.flash(this.$t('contact.addresses_delete_success'), 'success');
-
-            if (address.is_past_address) {
-              const id = this.localInactiveAddresses.findIndex((x) => x.id === address.id);
-              this.localInactiveAddresses.splice(id, 1);
-            } else {
-              const id2 = this.localActiveAddresses.findIndex((x) => x.id === address.id);
-              this.localActiveAddresses.splice(id2, 1);
-            }
-          })
-          .catch((error) => {
-            this.loadingState = null;
-            this.form.errors = error.response.data;
-          });
-      }
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .icon-sidebar {
   color: #737e8d;
diff --git a/tests/Unit/Domains/Vault/ManageAddresses/Web/ViewHelpers/ModuleContactAddressesViewHelperTest.php b/tests/Unit/Domains/Vault/ManageAddresses/Web/ViewHelpers/ModuleContactAddressesViewHelperTest.php
index 5294dbeb4..a6c728d71 100644
--- a/tests/Unit/Domains/Vault/ManageAddresses/Web/ViewHelpers/ModuleContactAddressesViewHelperTest.php
+++ b/tests/Unit/Domains/Vault/ManageAddresses/Web/ViewHelpers/ModuleContactAddressesViewHelperTest.php
@@ -3,6 +3,7 @@
 namespace Tests\Unit\Domains\Vault\ManageAddresses\Web\ViewHelpers;
 
 use App\Domains\Contact\ManageContactAddresses\Web\ViewHelpers\ModuleContactAddressesViewHelper;
+use App\Helpers\MapHelper;
 use App\Models\Address;
 use App\Models\AddressType;
 use App\Models\Contact;
@@ -21,10 +22,14 @@ public function it_gets_the_data_needed_for_the_view(): void
         $contact = Contact::factory()->create();
         $user = User::factory()->create();
 
-        $address = Address::factory()->create();
+        $address = Address::factory()->create([
+            'vault_id' => $contact->vault_id,
+        ]);
         $address->contacts()->attach($contact, ['is_past_address' => true]);
-        $address = Address::factory()->create();
-        $address->contacts()->attach($contact, ['is_past_address' => false]);
+        $otherAddress = Address::factory()->create([
+            'vault_id' => $contact->vault_id,
+        ]);
+        $otherAddress->contacts()->attach($contact, ['is_past_address' => false]);
 
         $addressType = AddressType::factory()->create([
             'account_id' => $contact->vault->account_id,
@@ -34,13 +39,14 @@ public function it_gets_the_data_needed_for_the_view(): void
         $array = ModuleContactAddressesViewHelper::data($contact, $user);
 
         $this->assertEquals(
-            4,
+            5,
             count($array)
         );
 
         $this->assertArrayHasKey('active_addresses', $array);
         $this->assertArrayHasKey('inactive_addresses', $array);
         $this->assertArrayHasKey('address_types', $array);
+        $this->assertArrayHasKey('addresses_in_vault', $array);
         $this->assertArrayHasKey('url', $array);
 
         $this->assertEquals(
@@ -64,6 +70,20 @@ public function it_gets_the_data_needed_for_the_view(): void
             $array['inactive_addresses']->count()
         );
 
+        $this->assertEquals(
+            [
+                0 => [
+                    'id' => $address->id,
+                    'address' => MapHelper::getAddressAsString($address),
+                ],
+                1 => [
+                    'id' => $otherAddress->id,
+                    'address' => MapHelper::getAddressAsString($otherAddress),
+                ],
+            ],
+            $array['addresses_in_vault']->toArray()
+        );
+
         $this->assertEquals(
             [
                 'store' => env('APP_URL').'/vaults/'.$contact->vault->id.'/contacts/'.$contact->id.'/addresses',

From dfbddb733c4665061f10bc92b202f01310c085ba Mon Sep 17 00:00:00 2001
From: Regis Freyd <djaiss@users.noreply.github.com>
Date: Sun, 5 Feb 2023 21:10:42 -0500
Subject: [PATCH 02/12] Update Addresses.vue

---
 resources/js/Shared/Modules/Addresses.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/Shared/Modules/Addresses.vue b/resources/js/Shared/Modules/Addresses.vue
index 928112b5b..78069a459 100644
--- a/resources/js/Shared/Modules/Addresses.vue
+++ b/resources/js/Shared/Modules/Addresses.vue
@@ -118,7 +118,7 @@ const update = (address) => {
 };
 
 const destroy = (address) => {
-  if (confirm(this.$t('contact.addresses_delete_confirm'))) {
+  if (confirm('Are you sure? This can not be undone.')) {
     axios
       .delete(address.url.destroy)
       .then(() => {
@@ -212,7 +212,7 @@ const destroy = (address) => {
         </div>
 
         <!-- existing addresses -->
-        <div v-if="choiceChooseExisting" class="p-3 border-b border-gray-200 dark:border-gray-700">
+        <div v-if="choiceChooseExisting" class="overflow-auto h-40 p-3 border-b border-gray-200 dark:border-gray-700">
           <ul
             class="rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
             <li

From 77b2bd22e22f95748ed2e274ab03af9f1c136f61 Mon Sep 17 00:00:00 2001
From: Regis Freyd <djaiss@users.noreply.github.com>
Date: Mon, 6 Feb 2023 18:08:15 -0500
Subject: [PATCH 03/12] wip

---
 .../ReportAddressesCitiesController.php       | 27 ++++++
 .../Controllers/ReportAddressesController.php | 25 +++++
 .../ReportAddressIndexViewHelper.php          | 68 ++++++++++++++
 .../ReportCitiesShowViewHelper.php            | 45 +++++++++
 .../Web/ViewHelpers/ReportIndexViewHelper.php |  3 +
 .../Vault/Reports/Address/Cities/Index.vue    | 78 +++++++++++++++
 .../js/Pages/Vault/Reports/Address/Index.vue  | 94 +++++++++++++++++++
 resources/js/Pages/Vault/Reports/Index.vue    |  5 +
 routes/web.php                                |  7 ++
 .../ViewHelpers/ReportIndexViewHelperTest.php |  1 +
 10 files changed, 353 insertions(+)
 create mode 100644 app/Domains/Vault/ManageReports/Web/Controllers/ReportAddressesCitiesController.php
 create mode 100644 app/Domains/Vault/ManageReports/Web/Controllers/ReportAddressesController.php
 create mode 100644 app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportAddressIndexViewHelper.php
 create mode 100644 app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCitiesShowViewHelper.php
 create mode 100644 resources/js/Pages/Vault/Reports/Address/Cities/Index.vue
 create mode 100644 resources/js/Pages/Vault/Reports/Address/Index.vue

diff --git a/app/Domains/Vault/ManageReports/Web/Controllers/ReportAddressesCitiesController.php b/app/Domains/Vault/ManageReports/Web/Controllers/ReportAddressesCitiesController.php
new file mode 100644
index 000000000..20980ccea
--- /dev/null
+++ b/app/Domains/Vault/ManageReports/Web/Controllers/ReportAddressesCitiesController.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Domains\Vault\ManageReports\Web\Controllers;
+
+use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportAddressIndexViewHelper;
+use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportCitiesShowViewHelper;
+use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportImportantDateSummaryIndexViewHelper;
+use App\Domains\Vault\ManageVault\Web\ViewHelpers\VaultIndexViewHelper;
+use App\Http\Controllers\Controller;
+use App\Models\Vault;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Inertia\Inertia;
+
+class ReportAddressesCitiesController extends Controller
+{
+    public function show(Request $request, int $vaultId, string $city)
+    {
+        $vault = Vault::findOrFail($vaultId);
+        $city = utf8_decode(urldecode($city));
+
+        return Inertia::render('Vault/Reports/Address/Cities/Index', [
+            'layoutData' => VaultIndexViewHelper::layoutData($vault),
+            'data' => ReportCitiesShowViewHelper::data($vault, $city),
+        ]);
+    }
+}
diff --git a/app/Domains/Vault/ManageReports/Web/Controllers/ReportAddressesController.php b/app/Domains/Vault/ManageReports/Web/Controllers/ReportAddressesController.php
new file mode 100644
index 000000000..1c9331cd8
--- /dev/null
+++ b/app/Domains/Vault/ManageReports/Web/Controllers/ReportAddressesController.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Domains\Vault\ManageReports\Web\Controllers;
+
+use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportAddressIndexViewHelper;
+use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportImportantDateSummaryIndexViewHelper;
+use App\Domains\Vault\ManageVault\Web\ViewHelpers\VaultIndexViewHelper;
+use App\Http\Controllers\Controller;
+use App\Models\Vault;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Inertia\Inertia;
+
+class ReportAddressesController extends Controller
+{
+    public function index(Request $request, int $vaultId)
+    {
+        $vault = Vault::findOrFail($vaultId);
+
+        return Inertia::render('Vault/Reports/Address/Index', [
+            'layoutData' => VaultIndexViewHelper::layoutData($vault),
+            'data' => ReportAddressIndexViewHelper::data($vault),
+        ]);
+    }
+}
diff --git a/app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportAddressIndexViewHelper.php b/app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportAddressIndexViewHelper.php
new file mode 100644
index 000000000..a1c7c852a
--- /dev/null
+++ b/app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportAddressIndexViewHelper.php
@@ -0,0 +1,68 @@
+<?php
+
+namespace App\Domains\Vault\ManageReports\Web\ViewHelpers;
+
+use App\Models\Vault;
+use Illuminate\Support\Str;
+
+class ReportAddressIndexViewHelper
+{
+    public static function data(Vault $vault): array
+    {
+        // all the cities in the vault
+        // the distinct method does not do a case-insensitive search, so we need
+        // to do it manually. there would be a way to do it with raw SQL but
+        // it wouldn't work on sqlite
+        $cities = $vault->addresses()
+            ->select('id', 'city')
+            ->whereNotNull('city')
+            ->withCount('contacts')
+            ->distinct('city')
+            ->get()
+            ->map(fn ($address) => [
+                'id' => $address->id,
+                'name' => Str::ucfirst($address->city),
+                'contacts' => $address->contacts_count,
+                'url' => [
+                    'index' => route('vault.reports.addresses.cities.show', [
+                        'vault' => $vault->id,
+                        'city' => urlencode(utf8_encode($address->city)),
+                    ]),
+                ],
+            ])
+            ->unique('name');
+
+        // all the countries in the vault
+        $countries = $vault->addresses()
+            ->select('country')
+            ->whereNotNull('country')
+            ->withCount('contacts')
+            ->distinct('country')
+            ->get()
+            ->map(fn ($address) => [
+                'id' => $address->id,
+                'name' => Str::ucfirst($address->country),
+                'contacts' => $address->contacts_count,
+                'url' => [
+                    'index' => route('vault.reports.addresses.countries.show', [
+                        'vault' => $vault->id,
+                    'country' => urlencode(utf8_encode($address->country)),
+                    ]),
+                ],
+            ])
+            ->unique('name');
+
+        return [
+            'cities' => $cities,
+            'countries' => $countries,
+            'url' => [
+                'mood_tracking_events' => route('vault.reports.mood_tracking_events.index', [
+                    'vault' => $vault->id,
+                ]),
+                'important_date_summary' => route('vault.reports.important_dates.index', [
+                    'vault' => $vault->id,
+                ]),
+            ],
+        ];
+    }
+}
diff --git a/app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCitiesShowViewHelper.php b/app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCitiesShowViewHelper.php
new file mode 100644
index 000000000..cf52ed75c
--- /dev/null
+++ b/app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCitiesShowViewHelper.php
@@ -0,0 +1,45 @@
+<?php
+
+namespace App\Domains\Vault\ManageReports\Web\ViewHelpers;
+
+use App\Helpers\ContactCardHelper;
+use App\Helpers\MapHelper;
+use App\Models\Contact;
+use App\Models\Vault;
+use Illuminate\Support\Str;
+
+class ReportCitiesShowViewHelper
+{
+    public static function data(Vault $vault, string $city): array
+    {
+        $addresses = $vault->addresses()
+            ->select('id', 'city')
+            ->whereNotNull('city')
+            ->where('city', Str::ucfirst($city))
+            ->where('city', Str::lcfirst($city))
+            ->with('contacts')
+            ->get()
+            ->map(fn ($address) => [
+                'id' => $address->id,
+                'name' => Str::ucfirst($address->city),
+                'address' => MapHelper::getAddressAsString($address),
+                'contacts' => $address->contacts()
+                    ->get()
+                    ->map(fn (Contact $contact) => ContactCardHelper::data($contact)),
+            ])
+            ->unique('name');
+
+        return [
+            'city' => Str::ucfirst($city),
+            'addresses' => $addresses,
+            'url' => [
+                'mood_tracking_events' => route('vault.reports.mood_tracking_events.index', [
+                    'vault' => $vault->id,
+                ]),
+                'important_date_summary' => route('vault.reports.important_dates.index', [
+                    'vault' => $vault->id,
+                ]),
+            ],
+        ];
+    }
+}
diff --git a/app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportIndexViewHelper.php b/app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportIndexViewHelper.php
index 5101ba409..ddfa5cc54 100644
--- a/app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportIndexViewHelper.php
+++ b/app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportIndexViewHelper.php
@@ -10,6 +10,9 @@ public static function data(Vault $vault): array
     {
         return [
             'url' => [
+                'addresses' => route('vault.reports.addresses.index', [
+                    'vault' => $vault->id,
+                ]),
                 'mood_tracking_events' => route('vault.reports.mood_tracking_events.index', [
                     'vault' => $vault->id,
                 ]),
diff --git a/resources/js/Pages/Vault/Reports/Address/Cities/Index.vue b/resources/js/Pages/Vault/Reports/Address/Cities/Index.vue
new file mode 100644
index 000000000..c8eb56740
--- /dev/null
+++ b/resources/js/Pages/Vault/Reports/Address/Cities/Index.vue
@@ -0,0 +1,78 @@
+<script setup>
+import Layout from '@/Shared/Layout.vue';
+import { Link } from '@inertiajs/inertia-vue3';
+
+defineProps({
+  layoutData: Object,
+  data: Object,
+});
+</script>
+
+<template>
+  <Layout :layout-data="layoutData" :inside-vault="true">
+    <!-- breadcrumb -->
+    <nav class="bg-white dark:bg-gray-900 sm:mt-20 sm:border-b">
+      <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
+        <div class="flex items-baseline justify-between space-x-6">
+          <ul class="text-sm">
+            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+              {{ $t('app.breadcrumb_location') }}
+            </li>
+            <li class="mr-2 inline">
+              <inertia-link :href="data.url.reports" class="text-blue-500 hover:underline">Reports</inertia-link>
+            </li>
+            <li class="relative mr-2 inline">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="icon-breadcrumb relative inline h-3 w-3"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+              </svg>
+            </li>
+            <li class="inline">List of addresses</li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+
+    <main class="sm:mt-18 relative">
+      <div class="mx-auto max-w-xl px-2 py-2 sm:py-6 sm:px-6 lg:px-8">
+        <ul>
+          <li v-for="address in data.addresses" :key="address.id">
+            {{ address.address }}
+          </li>
+        </ul>
+      </div>
+    </main>
+  </Layout>
+</template>
+
+<style lang="scss" scoped>
+.item-list {
+  &:hover:first-child {
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+  }
+
+  &:last-child {
+    border-bottom: 0;
+  }
+
+  &:hover:last-child {
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+  }
+}
+
+.special-grid {
+  grid-template-columns: 1fr 1fr;
+}
+
+@media (max-width: 480px) {
+  .special-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/resources/js/Pages/Vault/Reports/Address/Index.vue b/resources/js/Pages/Vault/Reports/Address/Index.vue
new file mode 100644
index 000000000..15db08ac4
--- /dev/null
+++ b/resources/js/Pages/Vault/Reports/Address/Index.vue
@@ -0,0 +1,94 @@
+<script setup>
+import Layout from '@/Shared/Layout.vue';
+import { Link } from '@inertiajs/inertia-vue3';
+
+defineProps({
+  layoutData: Object,
+  data: Object,
+});
+</script>
+
+<template>
+  <Layout :layout-data="layoutData" :inside-vault="true">
+    <!-- breadcrumb -->
+    <nav class="bg-white dark:bg-gray-900 sm:mt-20 sm:border-b">
+      <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
+        <div class="flex items-baseline justify-between space-x-6">
+          <ul class="text-sm">
+            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+              {{ $t('app.breadcrumb_location') }}
+            </li>
+            <li class="mr-2 inline">
+              <inertia-link :href="data.url.reports" class="text-blue-500 hover:underline">Reports</inertia-link>
+            </li>
+            <li class="relative mr-2 inline">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="icon-breadcrumb relative inline h-3 w-3"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+              </svg>
+            </li>
+            <li class="inline">List of addresses</li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+
+    <main class="sm:mt-18 relative">
+      <div class="mx-auto max-w-xl px-2 py-2 sm:py-6 sm:px-6 lg:px-8">
+        <div class="special-grid grid grid-cols-1 gap-6 sm:grid-cols-3">
+          <!-- left -->
+          <div>
+            <ul>
+              <li class="font-semibold mb-2"><span class="mr-1">🌍</span> All the countries</li>
+              <li v-for="country in data.countries" :key="country.id">
+                <Link :href="country.url.index" class="text-blue-500 hover:underline">{{ country.name }}</Link> ({{ country.contacts }})
+              </li>
+            </ul>
+          </div>
+
+          <!-- right -->
+          <div class="p-3 sm:px-3 sm:py-0">
+            <ul>
+              <li class="font-semibold mb-2"><span class="mr-1">🏙️</span> All the cities</li>
+              <li v-for="city in data.cities" :key="city.id">
+                <Link :href="city.url.index" class="text-blue-500 hover:underline">{{ city.name }}</Link> ({{ city.contacts }})
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </main>
+  </Layout>
+</template>
+
+<style lang="scss" scoped>
+.item-list {
+  &:hover:first-child {
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+  }
+
+  &:last-child {
+    border-bottom: 0;
+  }
+
+  &:hover:last-child {
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+  }
+}
+
+.special-grid {
+  grid-template-columns: 1fr 1fr;
+}
+
+@media (max-width: 480px) {
+  .special-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/resources/js/Pages/Vault/Reports/Index.vue b/resources/js/Pages/Vault/Reports/Index.vue
index de3417348..c40c04246 100644
--- a/resources/js/Pages/Vault/Reports/Index.vue
+++ b/resources/js/Pages/Vault/Reports/Index.vue
@@ -15,6 +15,11 @@ defineProps({
         <h2 class="mb-6 text-center text-lg">All the reports</h2>
         <div class="mb-12 rounded-lg border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-900">
           <ul>
+            <li class="mb-2 flex justify-start">
+              <Link :href="data.url.addresses" class="text-blue-500 hover:underline">
+                List of addresses of the contacts in the vault
+              </Link>
+            </li>
             <li class="mb-2 flex justify-start">
               <Link :href="data.url.mood_tracking_events" class="text-blue-500 hover:underline">
                 Mood tracking events
diff --git a/routes/web.php b/routes/web.php
index 40e5a21ad..011bd71ee 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -95,6 +95,8 @@
 use App\Domains\Vault\ManageJournals\Web\Controllers\PostTagController;
 use App\Domains\Vault\ManageJournals\Web\Controllers\SliceOfLifeController;
 use App\Domains\Vault\ManageJournals\Web\Controllers\SliceOfLifeCoverImageController;
+use App\Domains\Vault\ManageReports\Web\Controllers\ReportAddressesCitiesController;
+use App\Domains\Vault\ManageReports\Web\Controllers\ReportAddressesController;
 use App\Domains\Vault\ManageReports\Web\Controllers\ReportImportantDateSummaryController;
 use App\Domains\Vault\ManageReports\Web\Controllers\ReportIndexController;
 use App\Domains\Vault\ManageReports\Web\Controllers\ReportMoodTrackingEventController;
@@ -183,6 +185,11 @@
             Route::prefix('reports')->group(function () {
                 Route::get('', [ReportIndexController::class, 'index'])->name('vault.reports.index');
 
+                // contact addresses
+                Route::get('addresses', [ReportAddressesController::class, 'index'])->name('vault.reports.addresses.index');
+                Route::get('addresses/city/{city}', [ReportAddressesCitiesController::class, 'show'])->name('vault.reports.addresses.cities.show');
+                Route::get('addresses/country/{country}', [ReportAddressesCountriesController::class, 'show'])->name('vault.reports.addresses.countries.show');
+
                 // mood tracking event
                 Route::get('moodTrackingEvents', [ReportMoodTrackingEventController::class, 'index'])->name('vault.reports.mood_tracking_events.index');
 
diff --git a/tests/Unit/Domains/Vault/ManageReports/Web/ViewHelpers/ReportIndexViewHelperTest.php b/tests/Unit/Domains/Vault/ManageReports/Web/ViewHelpers/ReportIndexViewHelperTest.php
index f96269c8d..5512450cd 100644
--- a/tests/Unit/Domains/Vault/ManageReports/Web/ViewHelpers/ReportIndexViewHelperTest.php
+++ b/tests/Unit/Domains/Vault/ManageReports/Web/ViewHelpers/ReportIndexViewHelperTest.php
@@ -20,6 +20,7 @@ public function it_gets_the_data_needed_for_the_view(): void
         $this->assertEquals(
             [
                 'url' => [
+                    'addresses' => env('APP_URL').'/vaults/'.$vault->id.'/reports/addresses',
                     'mood_tracking_events' => env('APP_URL').'/vaults/'.$vault->id.'/reports/moodTrackingEvents',
                     'important_date_summary' => env('APP_URL').'/vaults/'.$vault->id.'/reports/importantDates',
                 ],

From fa1c7f4382302dfd8039fc122066174c62d5dbb9 Mon Sep 17 00:00:00 2001
From: djaiss <djaiss@users.noreply.github.com>
Date: Mon, 6 Feb 2023 23:09:13 +0000
Subject: [PATCH 04/12] chore: php linting with pint

---
 .../Web/Controllers/ReportAddressesCitiesController.php        | 3 ---
 .../Web/Controllers/ReportAddressesController.php              | 2 --
 .../Web/ViewHelpers/ReportAddressIndexViewHelper.php           | 2 +-
 3 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/app/Domains/Vault/ManageReports/Web/Controllers/ReportAddressesCitiesController.php b/app/Domains/Vault/ManageReports/Web/Controllers/ReportAddressesCitiesController.php
index 20980ccea..a3af22a40 100644
--- a/app/Domains/Vault/ManageReports/Web/Controllers/ReportAddressesCitiesController.php
+++ b/app/Domains/Vault/ManageReports/Web/Controllers/ReportAddressesCitiesController.php
@@ -2,14 +2,11 @@
 
 namespace App\Domains\Vault\ManageReports\Web\Controllers;
 
-use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportAddressIndexViewHelper;
 use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportCitiesShowViewHelper;
-use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportImportantDateSummaryIndexViewHelper;
 use App\Domains\Vault\ManageVault\Web\ViewHelpers\VaultIndexViewHelper;
 use App\Http\Controllers\Controller;
 use App\Models\Vault;
 use Illuminate\Http\Request;
-use Illuminate\Support\Facades\Auth;
 use Inertia\Inertia;
 
 class ReportAddressesCitiesController extends Controller
diff --git a/app/Domains/Vault/ManageReports/Web/Controllers/ReportAddressesController.php b/app/Domains/Vault/ManageReports/Web/Controllers/ReportAddressesController.php
index 1c9331cd8..1a29e7033 100644
--- a/app/Domains/Vault/ManageReports/Web/Controllers/ReportAddressesController.php
+++ b/app/Domains/Vault/ManageReports/Web/Controllers/ReportAddressesController.php
@@ -3,12 +3,10 @@
 namespace App\Domains\Vault\ManageReports\Web\Controllers;
 
 use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportAddressIndexViewHelper;
-use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportImportantDateSummaryIndexViewHelper;
 use App\Domains\Vault\ManageVault\Web\ViewHelpers\VaultIndexViewHelper;
 use App\Http\Controllers\Controller;
 use App\Models\Vault;
 use Illuminate\Http\Request;
-use Illuminate\Support\Facades\Auth;
 use Inertia\Inertia;
 
 class ReportAddressesController extends Controller
diff --git a/app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportAddressIndexViewHelper.php b/app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportAddressIndexViewHelper.php
index a1c7c852a..dcf1c3e54 100644
--- a/app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportAddressIndexViewHelper.php
+++ b/app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportAddressIndexViewHelper.php
@@ -46,7 +46,7 @@ public static function data(Vault $vault): array
                 'url' => [
                     'index' => route('vault.reports.addresses.countries.show', [
                         'vault' => $vault->id,
-                    'country' => urlencode(utf8_encode($address->country)),
+                        'country' => urlencode(utf8_encode($address->country)),
                     ]),
                 ],
             ])

From cf7a5b638b17bc51b33b53f4a3af202a88fceaf4 Mon Sep 17 00:00:00 2001
From: Regis Freyd <djaiss@users.noreply.github.com>
Date: Mon, 6 Feb 2023 20:57:10 -0500
Subject: [PATCH 05/12] wip

---
 .../Services/RemoveAddressFromContact.php     |   4 +
 .../ReportAddressesCountriesController.php    |  25 ++++
 .../ReportAddressIndexViewHelper.php          |  10 +-
 .../ReportCitiesShowViewHelper.php            |  19 +--
 .../ReportCountriesShowViewHelper.php         |  47 ++++++++
 app/Helpers/MapHelper.php                     |   1 +
 app/Helpers/WikipediaHelper.php               |  49 ++++++++
 .../Vault/Reports/Address/Cities/Index.vue    |  53 ++++++--
 .../Vault/Reports/Address/Countries/Index.vue | 113 ++++++++++++++++++
 .../js/Pages/Vault/Reports/Address/Index.vue  |   2 +-
 routes/web.php                                |   1 +
 .../ReportAddressIndexViewHelperTest.php      |  67 +++++++++++
 .../ReportCitiesShowViewHelperTest.php        |  74 ++++++++++++
 .../ReportCountriesShowViewHelperTest.php     |  75 ++++++++++++
 tests/Unit/Helpers/WikipediaHelperTest.php    |  28 +++++
 15 files changed, 541 insertions(+), 27 deletions(-)
 create mode 100644 app/Domains/Vault/ManageReports/Web/Controllers/ReportAddressesCountriesController.php
 create mode 100644 app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCountriesShowViewHelper.php
 create mode 100644 app/Helpers/WikipediaHelper.php
 create mode 100644 resources/js/Pages/Vault/Reports/Address/Countries/Index.vue
 create mode 100644 tests/Unit/Domains/Vault/ManageReports/Web/ViewHelpers/ReportAddressIndexViewHelperTest.php
 create mode 100644 tests/Unit/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCitiesShowViewHelperTest.php
 create mode 100644 tests/Unit/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCountriesShowViewHelperTest.php
 create mode 100644 tests/Unit/Helpers/WikipediaHelperTest.php

diff --git a/app/Domains/Contact/ManageContactAddresses/Services/RemoveAddressFromContact.php b/app/Domains/Contact/ManageContactAddresses/Services/RemoveAddressFromContact.php
index 176fa9b6f..868b38324 100644
--- a/app/Domains/Contact/ManageContactAddresses/Services/RemoveAddressFromContact.php
+++ b/app/Domains/Contact/ManageContactAddresses/Services/RemoveAddressFromContact.php
@@ -72,6 +72,10 @@ private function validate(): void
     private function remove(): void
     {
         $this->contact->addresses()->detach($this->address);
+
+        if ($this->address->contacts()->count() === 0) {
+            $this->address->delete();
+        }
     }
 
     private function createFeedItem(): void
diff --git a/app/Domains/Vault/ManageReports/Web/Controllers/ReportAddressesCountriesController.php b/app/Domains/Vault/ManageReports/Web/Controllers/ReportAddressesCountriesController.php
new file mode 100644
index 000000000..289449bfc
--- /dev/null
+++ b/app/Domains/Vault/ManageReports/Web/Controllers/ReportAddressesCountriesController.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Domains\Vault\ManageReports\Web\Controllers;
+
+use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportCitiesShowViewHelper;
+use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportCountriesShowViewHelper;
+use App\Domains\Vault\ManageVault\Web\ViewHelpers\VaultIndexViewHelper;
+use App\Http\Controllers\Controller;
+use App\Models\Vault;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+
+class ReportAddressesCountriesController extends Controller
+{
+    public function show(Request $request, int $vaultId, string $country)
+    {
+        $vault = Vault::findOrFail($vaultId);
+        $country = utf8_decode(urldecode($country));
+
+        return Inertia::render('Vault/Reports/Address/Countries/Index', [
+            'layoutData' => VaultIndexViewHelper::layoutData($vault),
+            'data' => ReportCountriesShowViewHelper::data($vault, $country),
+        ]);
+    }
+}
diff --git a/app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportAddressIndexViewHelper.php b/app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportAddressIndexViewHelper.php
index dcf1c3e54..957153721 100644
--- a/app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportAddressIndexViewHelper.php
+++ b/app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportAddressIndexViewHelper.php
@@ -34,7 +34,7 @@ public static function data(Vault $vault): array
 
         // all the countries in the vault
         $countries = $vault->addresses()
-            ->select('country')
+            ->select('id', 'country')
             ->whereNotNull('country')
             ->withCount('contacts')
             ->distinct('country')
@@ -55,14 +55,6 @@ public static function data(Vault $vault): array
         return [
             'cities' => $cities,
             'countries' => $countries,
-            'url' => [
-                'mood_tracking_events' => route('vault.reports.mood_tracking_events.index', [
-                    'vault' => $vault->id,
-                ]),
-                'important_date_summary' => route('vault.reports.important_dates.index', [
-                    'vault' => $vault->id,
-                ]),
-            ],
         ];
     }
 }
diff --git a/app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCitiesShowViewHelper.php b/app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCitiesShowViewHelper.php
index cf52ed75c..fb85d95fc 100644
--- a/app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCitiesShowViewHelper.php
+++ b/app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCitiesShowViewHelper.php
@@ -4,6 +4,7 @@
 
 use App\Helpers\ContactCardHelper;
 use App\Helpers\MapHelper;
+use App\Helpers\WikipediaHelper;
 use App\Models\Contact;
 use App\Models\Vault;
 use Illuminate\Support\Str;
@@ -13,10 +14,9 @@ class ReportCitiesShowViewHelper
     public static function data(Vault $vault, string $city): array
     {
         $addresses = $vault->addresses()
-            ->select('id', 'city')
             ->whereNotNull('city')
             ->where('city', Str::ucfirst($city))
-            ->where('city', Str::lcfirst($city))
+            ->orWhere('city', Str::lcfirst($city))
             ->with('contacts')
             ->get()
             ->map(fn ($address) => [
@@ -26,17 +26,20 @@ public static function data(Vault $vault, string $city): array
                 'contacts' => $address->contacts()
                     ->get()
                     ->map(fn (Contact $contact) => ContactCardHelper::data($contact)),
-            ])
-            ->unique('name');
+            ]);
+
+        $wikipediaInformation = WikipediaHelper::getInformation($city);
 
         return [
             'city' => Str::ucfirst($city),
             'addresses' => $addresses,
+            'wikipedia' => [
+                'url' => $wikipediaInformation['url'],
+                'description' => $wikipediaInformation['description'],
+                'thumbnail' => $wikipediaInformation['thumbnail'],
+            ],
             'url' => [
-                'mood_tracking_events' => route('vault.reports.mood_tracking_events.index', [
-                    'vault' => $vault->id,
-                ]),
-                'important_date_summary' => route('vault.reports.important_dates.index', [
+                'addresses' => route('vault.reports.addresses.index', [
                     'vault' => $vault->id,
                 ]),
             ],
diff --git a/app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCountriesShowViewHelper.php b/app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCountriesShowViewHelper.php
new file mode 100644
index 000000000..466cb7c80
--- /dev/null
+++ b/app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCountriesShowViewHelper.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Domains\Vault\ManageReports\Web\ViewHelpers;
+
+use App\Helpers\ContactCardHelper;
+use App\Helpers\MapHelper;
+use App\Helpers\WikipediaHelper;
+use App\Models\Contact;
+use App\Models\Vault;
+use Illuminate\Support\Str;
+
+class ReportCountriesShowViewHelper {
+    public static function data(Vault $vault, string $country): array
+    {
+        $addresses = $vault->addresses()
+            ->whereNotNull('country')
+            ->where('country', Str::ucfirst($country))
+            ->orWhere('country', Str::lcfirst($country))
+            ->with('contacts')
+            ->get()
+            ->map(fn ($address) => [
+                'id' => $address->id,
+                'name' => Str::ucfirst($address->country),
+                'address' => MapHelper::getAddressAsString($address),
+                'contacts' => $address->contacts()
+                    ->get()
+                    ->map(fn (Contact $contact) => ContactCardHelper::data($contact)),
+            ]);
+
+        $wikipediaInformation = WikipediaHelper::getInformation($country);
+
+        return [
+            'country' => Str::ucfirst($country),
+            'addresses' => $addresses,
+            'wikipedia' => [
+                'url' => $wikipediaInformation['url'],
+                'description' => $wikipediaInformation['description'],
+                'thumbnail' => $wikipediaInformation['thumbnail'],
+            ],
+            'url' => [
+                'addresses' => route('vault.reports.addresses.index', [
+                    'vault' => $vault->id,
+                ]),
+            ],
+        ];
+    }
+}
diff --git a/app/Helpers/MapHelper.php b/app/Helpers/MapHelper.php
index 545bf055f..99fd9d4d8 100644
--- a/app/Helpers/MapHelper.php
+++ b/app/Helpers/MapHelper.php
@@ -4,6 +4,7 @@
 
 use App\Models\Address;
 use App\Models\User;
+use Illuminate\Support\Facades\Http;
 use Illuminate\Support\Str;
 
 class MapHelper
diff --git a/app/Helpers/WikipediaHelper.php b/app/Helpers/WikipediaHelper.php
new file mode 100644
index 000000000..d2f6dcc9b
--- /dev/null
+++ b/app/Helpers/WikipediaHelper.php
@@ -0,0 +1,49 @@
+<?php
+
+namespace App\Helpers;
+
+use App\Models\Address;
+use App\Models\User;
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Str;
+
+class WikipediaHelper
+{
+    /**
+     * Return the information about the given city or country from Wikipedia.
+     * All API calls are documented here:
+     * https://www.mediawiki.org/w/api.php?action=help&modules=query.
+     *
+     * @param string $topic
+     * @return void
+     */
+    public static function getInformation(string $topic)
+    {
+        $query = http_build_query([
+            'action' => 'query',
+            'prop' => 'description|pageimages',
+            'titles' => $topic,
+            'pithumbsize' => 400,
+            'format' => 'json',
+        ]);
+
+        $url = 'https://en.wikipedia.org/w/api.php?'.$query;
+
+        $response = Http::get($url);
+        $response->throw();
+
+        if ($response->json('query.pages.*.missing')[0] === true) {
+            return [
+                'url' => null,
+                'description' => null,
+                'thumbnail' => null,
+            ];
+        }
+
+        return [
+            'url' => 'https://en.wikipedia.org/wiki/'.Str::slug($topic),
+            'description' => $response->json('query.pages.*.description')[0],
+            'thumbnail' => $response->json('query.pages.*.thumbnail.source')[0],
+        ];
+    }
+}
diff --git a/resources/js/Pages/Vault/Reports/Address/Cities/Index.vue b/resources/js/Pages/Vault/Reports/Address/Cities/Index.vue
index c8eb56740..32dc5337c 100644
--- a/resources/js/Pages/Vault/Reports/Address/Cities/Index.vue
+++ b/resources/js/Pages/Vault/Reports/Address/Cities/Index.vue
@@ -1,6 +1,7 @@
 <script setup>
 import Layout from '@/Shared/Layout.vue';
 import { Link } from '@inertiajs/inertia-vue3';
+import ContactCard from '@/Shared/ContactCard.vue';
 
 defineProps({
   layoutData: Object,
@@ -19,7 +20,7 @@ defineProps({
               {{ $t('app.breadcrumb_location') }}
             </li>
             <li class="mr-2 inline">
-              <inertia-link :href="data.url.reports" class="text-blue-500 hover:underline">Reports</inertia-link>
+              <inertia-link :href="layoutData.vault.url.reports" class="text-blue-500 hover:underline">Reports</inertia-link>
             </li>
             <li class="relative mr-2 inline">
               <svg
@@ -31,19 +32,53 @@ defineProps({
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline">List of addresses</li>
+            <li class="mr-2 inline"><inertia-link :href="data.url.addresses" class="text-blue-500 hover:underline">List of addresses</inertia-link></li>
+            <li class="relative mr-2 inline">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="icon-breadcrumb relative inline h-3 w-3"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+              </svg>
+            </li>
+            <li class="mr-2 inline">{{ data.city }}</li>
           </ul>
         </div>
       </div>
     </nav>
 
     <main class="sm:mt-18 relative">
-      <div class="mx-auto max-w-xl px-2 py-2 sm:py-6 sm:px-6 lg:px-8">
-        <ul>
-          <li v-for="address in data.addresses" :key="address.id">
-            {{ address.address }}
-          </li>
-        </ul>
+      <div class="mx-auto max-w-3xl px-2 py-2 sm:py-6 sm:px-6 lg:px-8">
+        <div class="special-grid grid grid-cols-1 gap-6 sm:grid-cols-3">
+          <!-- left -->
+          <div>
+            <h2 class="font-bold mb-3">{{ data.city }}</h2>
+
+            <div v-if="data.wikipedia.description" class="border rounded p-2 border-gray-200 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
+              <p class="mb-3">{{ data.wikipedia.description }}</p>
+
+              <img :src="data.wikipedia.thumbnail" :alt="'Image of ' + data.city" class="rounded mb-2">
+
+              <p class="text-xs"><a :href="data.wikipedia.url" target="_blank">Information from Wikipedia</a></p>
+            </div>
+          </div>
+
+          <!-- right -->
+          <div>
+            <ul class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
+              <li v-for="address in data.addresses" :key="address.id" class="px-3 pt-3 pb-2 item-list border-b border-gray-200 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
+                <span class="mb-1 block">{{ address.address }}</span>
+                <ul class="list">
+                  <li v-for="contact in address.contacts" :key="contact.id" class="inline mr-3">
+                    <contact-card :contact="contact" :avatarClasses="'h-5 w-5 rounded-full mr-2'" :displayName="true" />
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </div>
+        </div>
       </div>
     </main>
   </Layout>
@@ -67,7 +102,7 @@ defineProps({
 }
 
 .special-grid {
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 200px 1fr;
 }
 
 @media (max-width: 480px) {
diff --git a/resources/js/Pages/Vault/Reports/Address/Countries/Index.vue b/resources/js/Pages/Vault/Reports/Address/Countries/Index.vue
new file mode 100644
index 000000000..ab2ca51a9
--- /dev/null
+++ b/resources/js/Pages/Vault/Reports/Address/Countries/Index.vue
@@ -0,0 +1,113 @@
+<script setup>
+import Layout from '@/Shared/Layout.vue';
+import { Link } from '@inertiajs/inertia-vue3';
+import ContactCard from '@/Shared/ContactCard.vue';
+
+defineProps({
+  layoutData: Object,
+  data: Object,
+});
+</script>
+
+<template>
+  <Layout :layout-data="layoutData" :inside-vault="true">
+    <!-- breadcrumb -->
+    <nav class="bg-white dark:bg-gray-900 sm:mt-20 sm:border-b">
+      <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
+        <div class="flex items-baseline justify-between space-x-6">
+          <ul class="text-sm">
+            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+              {{ $t('app.breadcrumb_location') }}
+            </li>
+            <li class="mr-2 inline">
+              <inertia-link :href="layoutData.vault.url.reports" class="text-blue-500 hover:underline">Reports</inertia-link>
+            </li>
+            <li class="relative mr-2 inline">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="icon-breadcrumb relative inline h-3 w-3"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+              </svg>
+            </li>
+            <li class="mr-2 inline"><inertia-link :href="data.url.addresses" class="text-blue-500 hover:underline">List of addresses</inertia-link></li>
+            <li class="relative mr-2 inline">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="icon-breadcrumb relative inline h-3 w-3"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+              </svg>
+            </li>
+            <li class="mr-2 inline">{{ data.country }}</li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+
+    <main class="sm:mt-18 relative">
+      <div class="mx-auto max-w-3xl px-2 py-2 sm:py-6 sm:px-6 lg:px-8">
+        <div class="special-grid grid grid-cols-1 gap-6 sm:grid-cols-3">
+          <!-- left -->
+          <div>
+            <h2 class="font-bold mb-3">{{ data.country }}</h2>
+
+            <div v-if="data.wikipedia.description" class="border rounded p-2 border-gray-200 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
+              <p class="mb-3">{{ data.wikipedia.description }}</p>
+
+              <img :src="data.wikipedia.thumbnail" :alt="'Image of ' + data.country" class="rounded mb-2">
+
+              <p class="text-xs"><a :href="data.wikipedia.url" target="_blank">Information from Wikipedia</a></p>
+            </div>
+          </div>
+
+          <!-- right -->
+          <div>
+            <ul class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
+              <li v-for="address in data.addresses" :key="address.id" class="px-3 pt-3 pb-2 item-list border-b border-gray-200 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
+                <span class="mb-1 block">{{ address.address }}</span>
+                <ul class="list">
+                  <li v-for="contact in address.contacts" :key="contact.id" class="inline mr-3">
+                    <contact-card :contact="contact" :avatarClasses="'h-5 w-5 rounded-full mr-2'" :displayName="true" />
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </main>
+  </Layout>
+</template>
+
+<style lang="scss" scoped>
+.item-list {
+  &:hover:first-child {
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+  }
+
+  &:last-child {
+    border-bottom: 0;
+  }
+
+  &:hover:last-child {
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+  }
+}
+
+.special-grid {
+  grid-template-columns: 200px 1fr;
+}
+
+@media (max-width: 480px) {
+  .special-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/resources/js/Pages/Vault/Reports/Address/Index.vue b/resources/js/Pages/Vault/Reports/Address/Index.vue
index 15db08ac4..d047f8978 100644
--- a/resources/js/Pages/Vault/Reports/Address/Index.vue
+++ b/resources/js/Pages/Vault/Reports/Address/Index.vue
@@ -19,7 +19,7 @@ defineProps({
               {{ $t('app.breadcrumb_location') }}
             </li>
             <li class="mr-2 inline">
-              <inertia-link :href="data.url.reports" class="text-blue-500 hover:underline">Reports</inertia-link>
+              <inertia-link :href="layoutData.vault.url.reports" class="text-blue-500 hover:underline">Reports</inertia-link>
             </li>
             <li class="relative mr-2 inline">
               <svg
diff --git a/routes/web.php b/routes/web.php
index 011bd71ee..cd5689288 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -97,6 +97,7 @@
 use App\Domains\Vault\ManageJournals\Web\Controllers\SliceOfLifeCoverImageController;
 use App\Domains\Vault\ManageReports\Web\Controllers\ReportAddressesCitiesController;
 use App\Domains\Vault\ManageReports\Web\Controllers\ReportAddressesController;
+use App\Domains\Vault\ManageReports\Web\Controllers\ReportAddressesCountriesController;
 use App\Domains\Vault\ManageReports\Web\Controllers\ReportImportantDateSummaryController;
 use App\Domains\Vault\ManageReports\Web\Controllers\ReportIndexController;
 use App\Domains\Vault\ManageReports\Web\Controllers\ReportMoodTrackingEventController;
diff --git a/tests/Unit/Domains/Vault/ManageReports/Web/ViewHelpers/ReportAddressIndexViewHelperTest.php b/tests/Unit/Domains/Vault/ManageReports/Web/ViewHelpers/ReportAddressIndexViewHelperTest.php
new file mode 100644
index 000000000..b83c00733
--- /dev/null
+++ b/tests/Unit/Domains/Vault/ManageReports/Web/ViewHelpers/ReportAddressIndexViewHelperTest.php
@@ -0,0 +1,67 @@
+<?php
+
+namespace Tests\Unit\Domains\Vault\ManageReports\Web\ViewHelpers;
+
+use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportAddressIndexViewHelper;
+use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportImportantDateSummaryIndexViewHelper;
+use App\Models\Address;
+use App\Models\Contact;
+use App\Models\ContactImportantDate;
+use App\Models\User;
+use App\Models\Vault;
+use Carbon\Carbon;
+use Illuminate\Foundation\Testing\DatabaseTransactions;
+use Tests\TestCase;
+
+class ReportAddressIndexViewHelperTest extends TestCase
+{
+    use DatabaseTransactions;
+
+    /** @test */
+    public function it_gets_the_data_needed_for_the_view(): void
+    {
+        $vault = Vault::factory()->create();
+        $contact = Contact::factory()->create([
+            'vault_id' => $vault->id,
+        ]);
+        $address = Address::factory()->create([
+            'vault_id' => $vault->id,
+            'city' => 'montreal',
+            'country' => 'canada',
+        ]);
+        $contact->addresses()->attach($address);
+
+        $array = ReportAddressIndexViewHelper::data($vault);
+
+        $this->assertCount(2, $array);
+        $this->assertArrayHasKey('cities', $array);
+        $this->assertArrayHasKey('countries', $array);
+
+        $this->assertEquals(
+            [
+                0 => [
+                    'id' => $address->id,
+                    'name' => 'Montreal',
+                    'contacts' => 1,
+                    'url' => [
+                        'index' => env('APP_URL').'/vaults/'.$vault->id.'/reports/addresses/city/montreal',
+                    ],
+                ],
+            ],
+            $array['cities']->toArray()
+        );
+        $this->assertEquals(
+            [
+                0 => [
+                    'id' => $address->id,
+                    'name' => 'Canada',
+                    'contacts' => 1,
+                    'url' => [
+                        'index' => env('APP_URL').'/vaults/'.$vault->id.'/reports/addresses/country/canada',
+                    ],
+                ],
+            ],
+            $array['countries']->toArray()
+        );
+    }
+}
diff --git a/tests/Unit/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCitiesShowViewHelperTest.php b/tests/Unit/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCitiesShowViewHelperTest.php
new file mode 100644
index 000000000..8d723395b
--- /dev/null
+++ b/tests/Unit/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCitiesShowViewHelperTest.php
@@ -0,0 +1,74 @@
+<?php
+
+namespace Tests\Unit\Domains\Vault\ManageReports\Web\ViewHelpers;
+
+use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportAddressIndexViewHelper;
+use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportCitiesShowViewHelper;
+use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportImportantDateSummaryIndexViewHelper;
+use App\Helpers\ContactCardHelper;
+use App\Helpers\MapHelper;
+use App\Models\Address;
+use App\Models\Contact;
+use App\Models\ContactImportantDate;
+use App\Models\User;
+use App\Models\Vault;
+use Carbon\Carbon;
+use Illuminate\Foundation\Testing\DatabaseTransactions;
+use Tests\TestCase;
+
+class ReportCitiesShowViewHelperTest extends TestCase
+{
+    use DatabaseTransactions;
+
+    /** @test */
+    public function it_gets_the_data_needed_for_the_view(): void
+    {
+        $vault = Vault::factory()->create();
+        $contact = Contact::factory()->create([
+            'vault_id' => $vault->id,
+        ]);
+        $address = Address::factory()->create([
+            'vault_id' => $vault->id,
+            'city' => 'montreal',
+            'country' => 'canada',
+        ]);
+        $contact->addresses()->attach($address);
+
+        $array = ReportCitiesShowViewHelper::data($vault, 'montreal');
+
+        $this->assertCount(4, $array);
+        $this->assertArrayHasKey('city', $array);
+        $this->assertArrayHasKey('addresses', $array);
+        $this->assertArrayHasKey('url', $array);
+        $this->assertArrayHasKey('wikipedia', $array);
+
+        $this->assertEquals(
+            'Montreal',
+            $array['city']
+        );
+        $this->assertEquals(
+            $address->id,
+            $array['addresses']->toArray()[0]['id']
+        );
+        $this->assertEquals(
+            'Montreal',
+            $array['addresses']->toArray()[0]['name']
+        );
+        $this->assertEquals(
+            MapHelper::getAddressAsString($address),
+            $array['addresses']->toArray()[0]['address']
+        );
+        $this->assertEquals(
+            [
+                0 => ContactCardHelper::data($contact),
+            ],
+            $array['addresses']->toArray()[0]['contacts']->toArray()
+        );
+        $this->assertEquals(
+            [
+                'addresses' => env('APP_URL').'/vaults/'.$vault->id.'/reports/addresses',
+            ],
+            $array['url']
+        );
+    }
+}
diff --git a/tests/Unit/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCountriesShowViewHelperTest.php b/tests/Unit/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCountriesShowViewHelperTest.php
new file mode 100644
index 000000000..5073f047f
--- /dev/null
+++ b/tests/Unit/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCountriesShowViewHelperTest.php
@@ -0,0 +1,75 @@
+<?php
+
+namespace Tests\Unit\Domains\Vault\ManageReports\Web\ViewHelpers;
+
+use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportAddressIndexViewHelper;
+use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportCitiesShowViewHelper;
+use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportCountriesShowViewHelper;
+use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportImportantDateSummaryIndexViewHelper;
+use App\Helpers\ContactCardHelper;
+use App\Helpers\MapHelper;
+use App\Models\Address;
+use App\Models\Contact;
+use App\Models\ContactImportantDate;
+use App\Models\User;
+use App\Models\Vault;
+use Carbon\Carbon;
+use Illuminate\Foundation\Testing\DatabaseTransactions;
+use Tests\TestCase;
+
+class ReportCountriesShowViewHelperTest extends TestCase
+{
+    use DatabaseTransactions;
+
+    /** @test */
+    public function it_gets_the_data_needed_for_the_view(): void
+    {
+        $vault = Vault::factory()->create();
+        $contact = Contact::factory()->create([
+            'vault_id' => $vault->id,
+        ]);
+        $address = Address::factory()->create([
+            'vault_id' => $vault->id,
+            'city' => 'montreal',
+            'country' => 'canada',
+        ]);
+        $contact->addresses()->attach($address);
+
+        $array = ReportCountriesShowViewHelper::data($vault, 'canada');
+
+        $this->assertCount(4, $array);
+        $this->assertArrayHasKey('country', $array);
+        $this->assertArrayHasKey('addresses', $array);
+        $this->assertArrayHasKey('url', $array);
+        $this->assertArrayHasKey('wikipedia', $array);
+
+        $this->assertEquals(
+            'Canada',
+            $array['country']
+        );
+        $this->assertEquals(
+            $address->id,
+            $array['addresses']->toArray()[0]['id']
+        );
+        $this->assertEquals(
+            'Canada',
+            $array['addresses']->toArray()[0]['name']
+        );
+        $this->assertEquals(
+            MapHelper::getAddressAsString($address),
+            $array['addresses']->toArray()[0]['address']
+        );
+        $this->assertEquals(
+            [
+                0 => ContactCardHelper::data($contact),
+            ],
+            $array['addresses']->toArray()[0]['contacts']->toArray()
+        );
+        $this->assertEquals(
+            [
+                'addresses' => env('APP_URL').'/vaults/'.$vault->id.'/reports/addresses',
+            ],
+            $array['url']
+        );
+    }
+}
diff --git a/tests/Unit/Helpers/WikipediaHelperTest.php b/tests/Unit/Helpers/WikipediaHelperTest.php
new file mode 100644
index 000000000..98b9a91cb
--- /dev/null
+++ b/tests/Unit/Helpers/WikipediaHelperTest.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace Tests\Unit\Helpers;
+
+use App\Helpers\MapHelper;
+use App\Helpers\WikipediaHelper;
+use App\Models\Address;
+use App\Models\User;
+use Illuminate\Foundation\Testing\DatabaseTransactions;
+use Tests\TestCase;
+
+class WikipediaHelperTest extends TestCase
+{
+    use DatabaseTransactions;
+
+    /** @test */
+    public function it_gets_information_about_the_city_or_country(): void
+    {
+        $city = 'Montreal';
+
+        $array = WikipediaHelper::getInformation($city);
+
+        $this->assertCount(3, $array);
+        $this->assertArrayHasKey('description', $array);
+        $this->assertArrayHasKey('thumbnail', $array);
+        $this->assertArrayHasKey('url', $array);
+    }
+}

From a05df8f4094671f42b676555d3557fd98f8873d6 Mon Sep 17 00:00:00 2001
From: djaiss <djaiss@users.noreply.github.com>
Date: Tue, 7 Feb 2023 01:58:05 +0000
Subject: [PATCH 06/12] chore: php linting with pint

---
 .../Web/Controllers/ReportAddressesCountriesController.php  | 1 -
 .../Web/ViewHelpers/ReportCountriesShowViewHelper.php       | 3 ++-
 app/Helpers/MapHelper.php                                   | 1 -
 app/Helpers/WikipediaHelper.php                             | 4 +---
 .../Web/ViewHelpers/ReportAddressIndexViewHelperTest.php    | 4 ----
 .../Web/ViewHelpers/ReportCitiesShowViewHelperTest.php      | 5 -----
 .../Web/ViewHelpers/ReportCountriesShowViewHelperTest.php   | 6 ------
 tests/Unit/Helpers/WikipediaHelperTest.php                  | 3 ---
 8 files changed, 3 insertions(+), 24 deletions(-)

diff --git a/app/Domains/Vault/ManageReports/Web/Controllers/ReportAddressesCountriesController.php b/app/Domains/Vault/ManageReports/Web/Controllers/ReportAddressesCountriesController.php
index 289449bfc..949a9538a 100644
--- a/app/Domains/Vault/ManageReports/Web/Controllers/ReportAddressesCountriesController.php
+++ b/app/Domains/Vault/ManageReports/Web/Controllers/ReportAddressesCountriesController.php
@@ -2,7 +2,6 @@
 
 namespace App\Domains\Vault\ManageReports\Web\Controllers;
 
-use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportCitiesShowViewHelper;
 use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportCountriesShowViewHelper;
 use App\Domains\Vault\ManageVault\Web\ViewHelpers\VaultIndexViewHelper;
 use App\Http\Controllers\Controller;
diff --git a/app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCountriesShowViewHelper.php b/app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCountriesShowViewHelper.php
index 466cb7c80..c0d9a083c 100644
--- a/app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCountriesShowViewHelper.php
+++ b/app/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCountriesShowViewHelper.php
@@ -9,7 +9,8 @@
 use App\Models\Vault;
 use Illuminate\Support\Str;
 
-class ReportCountriesShowViewHelper {
+class ReportCountriesShowViewHelper
+{
     public static function data(Vault $vault, string $country): array
     {
         $addresses = $vault->addresses()
diff --git a/app/Helpers/MapHelper.php b/app/Helpers/MapHelper.php
index 99fd9d4d8..545bf055f 100644
--- a/app/Helpers/MapHelper.php
+++ b/app/Helpers/MapHelper.php
@@ -4,7 +4,6 @@
 
 use App\Models\Address;
 use App\Models\User;
-use Illuminate\Support\Facades\Http;
 use Illuminate\Support\Str;
 
 class MapHelper
diff --git a/app/Helpers/WikipediaHelper.php b/app/Helpers/WikipediaHelper.php
index d2f6dcc9b..9ab706408 100644
--- a/app/Helpers/WikipediaHelper.php
+++ b/app/Helpers/WikipediaHelper.php
@@ -2,8 +2,6 @@
 
 namespace App\Helpers;
 
-use App\Models\Address;
-use App\Models\User;
 use Illuminate\Support\Facades\Http;
 use Illuminate\Support\Str;
 
@@ -14,7 +12,7 @@ class WikipediaHelper
      * All API calls are documented here:
      * https://www.mediawiki.org/w/api.php?action=help&modules=query.
      *
-     * @param string $topic
+     * @param  string  $topic
      * @return void
      */
     public static function getInformation(string $topic)
diff --git a/tests/Unit/Domains/Vault/ManageReports/Web/ViewHelpers/ReportAddressIndexViewHelperTest.php b/tests/Unit/Domains/Vault/ManageReports/Web/ViewHelpers/ReportAddressIndexViewHelperTest.php
index b83c00733..6d4ebba7a 100644
--- a/tests/Unit/Domains/Vault/ManageReports/Web/ViewHelpers/ReportAddressIndexViewHelperTest.php
+++ b/tests/Unit/Domains/Vault/ManageReports/Web/ViewHelpers/ReportAddressIndexViewHelperTest.php
@@ -3,13 +3,9 @@
 namespace Tests\Unit\Domains\Vault\ManageReports\Web\ViewHelpers;
 
 use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportAddressIndexViewHelper;
-use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportImportantDateSummaryIndexViewHelper;
 use App\Models\Address;
 use App\Models\Contact;
-use App\Models\ContactImportantDate;
-use App\Models\User;
 use App\Models\Vault;
-use Carbon\Carbon;
 use Illuminate\Foundation\Testing\DatabaseTransactions;
 use Tests\TestCase;
 
diff --git a/tests/Unit/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCitiesShowViewHelperTest.php b/tests/Unit/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCitiesShowViewHelperTest.php
index 8d723395b..93a85b80a 100644
--- a/tests/Unit/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCitiesShowViewHelperTest.php
+++ b/tests/Unit/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCitiesShowViewHelperTest.php
@@ -2,17 +2,12 @@
 
 namespace Tests\Unit\Domains\Vault\ManageReports\Web\ViewHelpers;
 
-use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportAddressIndexViewHelper;
 use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportCitiesShowViewHelper;
-use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportImportantDateSummaryIndexViewHelper;
 use App\Helpers\ContactCardHelper;
 use App\Helpers\MapHelper;
 use App\Models\Address;
 use App\Models\Contact;
-use App\Models\ContactImportantDate;
-use App\Models\User;
 use App\Models\Vault;
-use Carbon\Carbon;
 use Illuminate\Foundation\Testing\DatabaseTransactions;
 use Tests\TestCase;
 
diff --git a/tests/Unit/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCountriesShowViewHelperTest.php b/tests/Unit/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCountriesShowViewHelperTest.php
index 5073f047f..242f6fdd9 100644
--- a/tests/Unit/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCountriesShowViewHelperTest.php
+++ b/tests/Unit/Domains/Vault/ManageReports/Web/ViewHelpers/ReportCountriesShowViewHelperTest.php
@@ -2,18 +2,12 @@
 
 namespace Tests\Unit\Domains\Vault\ManageReports\Web\ViewHelpers;
 
-use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportAddressIndexViewHelper;
-use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportCitiesShowViewHelper;
 use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportCountriesShowViewHelper;
-use App\Domains\Vault\ManageReports\Web\ViewHelpers\ReportImportantDateSummaryIndexViewHelper;
 use App\Helpers\ContactCardHelper;
 use App\Helpers\MapHelper;
 use App\Models\Address;
 use App\Models\Contact;
-use App\Models\ContactImportantDate;
-use App\Models\User;
 use App\Models\Vault;
-use Carbon\Carbon;
 use Illuminate\Foundation\Testing\DatabaseTransactions;
 use Tests\TestCase;
 
diff --git a/tests/Unit/Helpers/WikipediaHelperTest.php b/tests/Unit/Helpers/WikipediaHelperTest.php
index 98b9a91cb..f37b06453 100644
--- a/tests/Unit/Helpers/WikipediaHelperTest.php
+++ b/tests/Unit/Helpers/WikipediaHelperTest.php
@@ -2,10 +2,7 @@
 
 namespace Tests\Unit\Helpers;
 
-use App\Helpers\MapHelper;
 use App\Helpers\WikipediaHelper;
-use App\Models\Address;
-use App\Models\User;
 use Illuminate\Foundation\Testing\DatabaseTransactions;
 use Tests\TestCase;
 

From 237df5d7f1f2e855837b40134335049b6d9b2717 Mon Sep 17 00:00:00 2001
From: Regis Freyd <djaiss@users.noreply.github.com>
Date: Mon, 6 Feb 2023 21:00:54 -0500
Subject: [PATCH 07/12] fixes

---
 app/Helpers/WikipediaHelper.php                              | 4 ++--
 resources/js/Pages/Vault/Reports/Address/Cities/Index.vue    | 1 -
 resources/js/Pages/Vault/Reports/Address/Countries/Index.vue | 1 -
 resources/js/Shared/Modules/Addresses.vue                    | 3 +--
 4 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/app/Helpers/WikipediaHelper.php b/app/Helpers/WikipediaHelper.php
index 9ab706408..195270cad 100644
--- a/app/Helpers/WikipediaHelper.php
+++ b/app/Helpers/WikipediaHelper.php
@@ -13,9 +13,9 @@ class WikipediaHelper
      * https://www.mediawiki.org/w/api.php?action=help&modules=query.
      *
      * @param  string  $topic
-     * @return void
+     * @return array
      */
-    public static function getInformation(string $topic)
+    public static function getInformation(string $topic): array
     {
         $query = http_build_query([
             'action' => 'query',
diff --git a/resources/js/Pages/Vault/Reports/Address/Cities/Index.vue b/resources/js/Pages/Vault/Reports/Address/Cities/Index.vue
index 32dc5337c..940c5cdcb 100644
--- a/resources/js/Pages/Vault/Reports/Address/Cities/Index.vue
+++ b/resources/js/Pages/Vault/Reports/Address/Cities/Index.vue
@@ -1,6 +1,5 @@
 <script setup>
 import Layout from '@/Shared/Layout.vue';
-import { Link } from '@inertiajs/inertia-vue3';
 import ContactCard from '@/Shared/ContactCard.vue';
 
 defineProps({
diff --git a/resources/js/Pages/Vault/Reports/Address/Countries/Index.vue b/resources/js/Pages/Vault/Reports/Address/Countries/Index.vue
index ab2ca51a9..d5f215b7e 100644
--- a/resources/js/Pages/Vault/Reports/Address/Countries/Index.vue
+++ b/resources/js/Pages/Vault/Reports/Address/Countries/Index.vue
@@ -1,6 +1,5 @@
 <script setup>
 import Layout from '@/Shared/Layout.vue';
-import { Link } from '@inertiajs/inertia-vue3';
 import ContactCard from '@/Shared/ContactCard.vue';
 
 defineProps({
diff --git a/resources/js/Shared/Modules/Addresses.vue b/resources/js/Shared/Modules/Addresses.vue
index 78069a459..a69c33d90 100644
--- a/resources/js/Shared/Modules/Addresses.vue
+++ b/resources/js/Shared/Modules/Addresses.vue
@@ -4,7 +4,7 @@ import PrettySpan from '@/Shared/Form/PrettySpan.vue';
 import TextInput from '@/Shared/Form/TextInput.vue';
 import Errors from '@/Shared/Form/Errors.vue';
 import Dropdown from '@/Shared/Form/Dropdown.vue';
-import { onMounted, ref, nextTick } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useForm } from '@inertiajs/inertia-vue3';
 
 const props = defineProps({
@@ -19,7 +19,6 @@ const localActiveAddresses = ref([]);
 const localInactiveAddresses = ref([]);
 const editedAddressId = ref(0);
 const choiceChooseExisting = ref(true);
-const warning = ref('');
 
 const form = useForm({
   existing_address: false,

From 14ed09dec365c75eeba53660b38dd31c39e055b4 Mon Sep 17 00:00:00 2001
From: djaiss <djaiss@users.noreply.github.com>
Date: Tue, 7 Feb 2023 02:02:27 +0000
Subject: [PATCH 08/12] chore: javascript linting with eslint and prettier

---
 .../Vault/Reports/Address/Cities/Index.vue    | 25 +++++++++++++------
 .../Vault/Reports/Address/Countries/Index.vue | 25 +++++++++++++------
 .../js/Pages/Vault/Reports/Address/Index.vue  | 16 ++++++++----
 resources/js/Shared/Modules/Addresses.vue     | 11 +++-----
 4 files changed, 51 insertions(+), 26 deletions(-)

diff --git a/resources/js/Pages/Vault/Reports/Address/Cities/Index.vue b/resources/js/Pages/Vault/Reports/Address/Cities/Index.vue
index 940c5cdcb..ce68d7786 100644
--- a/resources/js/Pages/Vault/Reports/Address/Cities/Index.vue
+++ b/resources/js/Pages/Vault/Reports/Address/Cities/Index.vue
@@ -19,7 +19,9 @@ defineProps({
               {{ $t('app.breadcrumb_location') }}
             </li>
             <li class="mr-2 inline">
-              <inertia-link :href="layoutData.vault.url.reports" class="text-blue-500 hover:underline">Reports</inertia-link>
+              <inertia-link :href="layoutData.vault.url.reports" class="text-blue-500 hover:underline"
+                >Reports</inertia-link
+              >
             </li>
             <li class="relative mr-2 inline">
               <svg
@@ -31,7 +33,11 @@ defineProps({
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline"><inertia-link :href="data.url.addresses" class="text-blue-500 hover:underline">List of addresses</inertia-link></li>
+            <li class="mr-2 inline">
+              <inertia-link :href="data.url.addresses" class="text-blue-500 hover:underline"
+                >List of addresses</inertia-link
+              >
+            </li>
             <li class="relative mr-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -53,12 +59,14 @@ defineProps({
         <div class="special-grid grid grid-cols-1 gap-6 sm:grid-cols-3">
           <!-- left -->
           <div>
-            <h2 class="font-bold mb-3">{{ data.city }}</h2>
+            <h2 class="mb-3 font-bold">{{ data.city }}</h2>
 
-            <div v-if="data.wikipedia.description" class="border rounded p-2 border-gray-200 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
+            <div
+              v-if="data.wikipedia.description"
+              class="rounded border border-gray-200 p-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
               <p class="mb-3">{{ data.wikipedia.description }}</p>
 
-              <img :src="data.wikipedia.thumbnail" :alt="'Image of ' + data.city" class="rounded mb-2">
+              <img :src="data.wikipedia.thumbnail" :alt="'Image of ' + data.city" class="mb-2 rounded" />
 
               <p class="text-xs"><a :href="data.wikipedia.url" target="_blank">Information from Wikipedia</a></p>
             </div>
@@ -67,10 +75,13 @@ defineProps({
           <!-- right -->
           <div>
             <ul class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
-              <li v-for="address in data.addresses" :key="address.id" class="px-3 pt-3 pb-2 item-list border-b border-gray-200 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
+              <li
+                v-for="address in data.addresses"
+                :key="address.id"
+                class="item-list border-b border-gray-200 px-3 pt-3 pb-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
                 <span class="mb-1 block">{{ address.address }}</span>
                 <ul class="list">
-                  <li v-for="contact in address.contacts" :key="contact.id" class="inline mr-3">
+                  <li v-for="contact in address.contacts" :key="contact.id" class="mr-3 inline">
                     <contact-card :contact="contact" :avatarClasses="'h-5 w-5 rounded-full mr-2'" :displayName="true" />
                   </li>
                 </ul>
diff --git a/resources/js/Pages/Vault/Reports/Address/Countries/Index.vue b/resources/js/Pages/Vault/Reports/Address/Countries/Index.vue
index d5f215b7e..d4c7682a8 100644
--- a/resources/js/Pages/Vault/Reports/Address/Countries/Index.vue
+++ b/resources/js/Pages/Vault/Reports/Address/Countries/Index.vue
@@ -19,7 +19,9 @@ defineProps({
               {{ $t('app.breadcrumb_location') }}
             </li>
             <li class="mr-2 inline">
-              <inertia-link :href="layoutData.vault.url.reports" class="text-blue-500 hover:underline">Reports</inertia-link>
+              <inertia-link :href="layoutData.vault.url.reports" class="text-blue-500 hover:underline"
+                >Reports</inertia-link
+              >
             </li>
             <li class="relative mr-2 inline">
               <svg
@@ -31,7 +33,11 @@ defineProps({
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline"><inertia-link :href="data.url.addresses" class="text-blue-500 hover:underline">List of addresses</inertia-link></li>
+            <li class="mr-2 inline">
+              <inertia-link :href="data.url.addresses" class="text-blue-500 hover:underline"
+                >List of addresses</inertia-link
+              >
+            </li>
             <li class="relative mr-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -53,12 +59,14 @@ defineProps({
         <div class="special-grid grid grid-cols-1 gap-6 sm:grid-cols-3">
           <!-- left -->
           <div>
-            <h2 class="font-bold mb-3">{{ data.country }}</h2>
+            <h2 class="mb-3 font-bold">{{ data.country }}</h2>
 
-            <div v-if="data.wikipedia.description" class="border rounded p-2 border-gray-200 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
+            <div
+              v-if="data.wikipedia.description"
+              class="rounded border border-gray-200 p-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
               <p class="mb-3">{{ data.wikipedia.description }}</p>
 
-              <img :src="data.wikipedia.thumbnail" :alt="'Image of ' + data.country" class="rounded mb-2">
+              <img :src="data.wikipedia.thumbnail" :alt="'Image of ' + data.country" class="mb-2 rounded" />
 
               <p class="text-xs"><a :href="data.wikipedia.url" target="_blank">Information from Wikipedia</a></p>
             </div>
@@ -67,10 +75,13 @@ defineProps({
           <!-- right -->
           <div>
             <ul class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
-              <li v-for="address in data.addresses" :key="address.id" class="px-3 pt-3 pb-2 item-list border-b border-gray-200 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
+              <li
+                v-for="address in data.addresses"
+                :key="address.id"
+                class="item-list border-b border-gray-200 px-3 pt-3 pb-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
                 <span class="mb-1 block">{{ address.address }}</span>
                 <ul class="list">
-                  <li v-for="contact in address.contacts" :key="contact.id" class="inline mr-3">
+                  <li v-for="contact in address.contacts" :key="contact.id" class="mr-3 inline">
                     <contact-card :contact="contact" :avatarClasses="'h-5 w-5 rounded-full mr-2'" :displayName="true" />
                   </li>
                 </ul>
diff --git a/resources/js/Pages/Vault/Reports/Address/Index.vue b/resources/js/Pages/Vault/Reports/Address/Index.vue
index d047f8978..f31a7f8c9 100644
--- a/resources/js/Pages/Vault/Reports/Address/Index.vue
+++ b/resources/js/Pages/Vault/Reports/Address/Index.vue
@@ -19,7 +19,9 @@ defineProps({
               {{ $t('app.breadcrumb_location') }}
             </li>
             <li class="mr-2 inline">
-              <inertia-link :href="layoutData.vault.url.reports" class="text-blue-500 hover:underline">Reports</inertia-link>
+              <inertia-link :href="layoutData.vault.url.reports" class="text-blue-500 hover:underline"
+                >Reports</inertia-link
+              >
             </li>
             <li class="relative mr-2 inline">
               <svg
@@ -43,9 +45,11 @@ defineProps({
           <!-- left -->
           <div>
             <ul>
-              <li class="font-semibold mb-2"><span class="mr-1">🌍</span> All the countries</li>
+              <li class="mb-2 font-semibold"><span class="mr-1">🌍</span> All the countries</li>
               <li v-for="country in data.countries" :key="country.id">
-                <Link :href="country.url.index" class="text-blue-500 hover:underline">{{ country.name }}</Link> ({{ country.contacts }})
+                <Link :href="country.url.index" class="text-blue-500 hover:underline">{{ country.name }}</Link> ({{
+                  country.contacts
+                }})
               </li>
             </ul>
           </div>
@@ -53,9 +57,11 @@ defineProps({
           <!-- right -->
           <div class="p-3 sm:px-3 sm:py-0">
             <ul>
-              <li class="font-semibold mb-2"><span class="mr-1">🏙️</span> All the cities</li>
+              <li class="mb-2 font-semibold"><span class="mr-1">🏙️</span> All the cities</li>
               <li v-for="city in data.cities" :key="city.id">
-                <Link :href="city.url.index" class="text-blue-500 hover:underline">{{ city.name }}</Link> ({{ city.contacts }})
+                <Link :href="city.url.index" class="text-blue-500 hover:underline">{{ city.name }}</Link> ({{
+                  city.contacts
+                }})
               </li>
             </ul>
           </div>
diff --git a/resources/js/Shared/Modules/Addresses.vue b/resources/js/Shared/Modules/Addresses.vue
index a69c33d90..76c121389 100644
--- a/resources/js/Shared/Modules/Addresses.vue
+++ b/resources/js/Shared/Modules/Addresses.vue
@@ -135,7 +135,6 @@ const destroy = (address) => {
       });
   }
 };
-
 </script>
 
 <template>
@@ -176,9 +175,8 @@ const destroy = (address) => {
         v-if="createAddressModalShown"
         class="bg-form mb-6 rounded-lg border border-gray-200 dark:border-gray-700 dark:bg-gray-900"
         @submit.prevent="submit()">
-
         <!-- radio button: choose existing or create new address -->
-        <div class="p-5 mb-2 border-b border-gray-200 dark:border-gray-700">
+        <div class="mb-2 border-b border-gray-200 p-5 dark:border-gray-700">
           <div class="mb-2 flex items-center">
             <input
               id="chooseExisting"
@@ -211,13 +209,12 @@ const destroy = (address) => {
         </div>
 
         <!-- existing addresses -->
-        <div v-if="choiceChooseExisting" class="overflow-auto h-40 p-3 border-b border-gray-200 dark:border-gray-700">
-          <ul
-            class="rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
+        <div v-if="choiceChooseExisting" class="h-40 overflow-auto border-b border-gray-200 p-3 dark:border-gray-700">
+          <ul class="rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
             <li
               v-for="address in props.data.addresses_in_vault"
               :key="address.id"
-              class="item-list px-3 py-2 border-b border-gray-200 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
+              class="item-list border-b border-gray-200 px-3 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
               <!-- detail of the address type -->
               <div class="flex items-center">
                 <input

From 48db3b045e365e6be044370580906a4a42b97fa1 Mon Sep 17 00:00:00 2001
From: Regis Freyd <djaiss@users.noreply.github.com>
Date: Thu, 9 Feb 2023 07:35:50 -0500
Subject: [PATCH 09/12] fixes

---
 .../js/Pages/Vault/Reports/Address/Index.vue  | 30 ++++++++++++++++---
 resources/js/Shared/Modules/Addresses.vue     |  4 +--
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/resources/js/Pages/Vault/Reports/Address/Index.vue b/resources/js/Pages/Vault/Reports/Address/Index.vue
index f31a7f8c9..447e90e4c 100644
--- a/resources/js/Pages/Vault/Reports/Address/Index.vue
+++ b/resources/js/Pages/Vault/Reports/Address/Index.vue
@@ -44,26 +44,48 @@ defineProps({
         <div class="special-grid grid grid-cols-1 gap-6 sm:grid-cols-3">
           <!-- left -->
           <div>
-            <ul>
-              <li class="mb-2 font-semibold"><span class="mr-1">🌍</span> All the countries</li>
+            <p class="mb-2 font-semibold"><span class="mr-1">🌍</span> All the countries</p>
+
+            <!-- list of countries -->
+            <ul v-if="data.countries.length > 0">
               <li v-for="country in data.countries" :key="country.id">
                 <Link :href="country.url.index" class="text-blue-500 hover:underline">{{ country.name }}</Link> ({{
                   country.contacts
                 }})
               </li>
             </ul>
+
+            <!-- blank state -->
+            <div
+              v-if="data.countries.length == 0"
+              class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
+              <p class="p-5 text-center">
+                No countries have been added yet in any contact's addresses.
+              </p>
+            </div>
           </div>
 
           <!-- right -->
           <div class="p-3 sm:px-3 sm:py-0">
-            <ul>
-              <li class="mb-2 font-semibold"><span class="mr-1">🏙️</span> All the cities</li>
+            <p class="mb-2 font-semibold"><span class="mr-1">🏙️</span> All the cities</p>
+
+            <!-- list of cities -->
+            <ul v-if="data.cities.length > 0">
               <li v-for="city in data.cities" :key="city.id">
                 <Link :href="city.url.index" class="text-blue-500 hover:underline">{{ city.name }}</Link> ({{
                   city.contacts
                 }})
               </li>
             </ul>
+
+            <!-- blank state -->
+            <div
+              v-if="data.countries.length == 0"
+              class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
+              <p class="p-5 text-center">
+                No cities have been added yet in any contact's addresses.
+              </p>
+            </div>
           </div>
         </div>
       </div>
diff --git a/resources/js/Shared/Modules/Addresses.vue b/resources/js/Shared/Modules/Addresses.vue
index 76c121389..3fe547ea1 100644
--- a/resources/js/Shared/Modules/Addresses.vue
+++ b/resources/js/Shared/Modules/Addresses.vue
@@ -176,7 +176,7 @@ const destroy = (address) => {
         class="bg-form mb-6 rounded-lg border border-gray-200 dark:border-gray-700 dark:bg-gray-900"
         @submit.prevent="submit()">
         <!-- radio button: choose existing or create new address -->
-        <div class="mb-2 border-b border-gray-200 p-5 dark:border-gray-700">
+        <div v-if="props.data.addresses_in_vault.length > 0" class="mb-2 border-b border-gray-200 p-5 dark:border-gray-700">
           <div class="mb-2 flex items-center">
             <input
               id="chooseExisting"
@@ -209,7 +209,7 @@ const destroy = (address) => {
         </div>
 
         <!-- existing addresses -->
-        <div v-if="choiceChooseExisting" class="h-40 overflow-auto border-b border-gray-200 p-3 dark:border-gray-700">
+        <div v-if="choiceChooseExisting && props.data.addresses_in_vault.length > 0" class="h-40 overflow-auto border-b border-gray-200 p-3 dark:border-gray-700">
           <ul class="rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
             <li
               v-for="address in props.data.addresses_in_vault"

From dd62b42623f21656d7329926148494c8a3a95da3 Mon Sep 17 00:00:00 2001
From: Mazarin <djaiss@users.noreply.github.com>
Date: Thu, 9 Feb 2023 07:36:09 -0500
Subject: [PATCH 10/12] Update app/Helpers/WikipediaHelper.php

Co-authored-by: Alexis Saettler <alexis@saettler.org>
---
 app/Helpers/WikipediaHelper.php | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/Helpers/WikipediaHelper.php b/app/Helpers/WikipediaHelper.php
index 195270cad..808c96038 100644
--- a/app/Helpers/WikipediaHelper.php
+++ b/app/Helpers/WikipediaHelper.php
@@ -27,8 +27,7 @@ public static function getInformation(string $topic): array
 
         $url = 'https://en.wikipedia.org/w/api.php?'.$query;
 
-        $response = Http::get($url);
-        $response->throw();
+        $response = Http::get($url)->throw();
 
         if ($response->json('query.pages.*.missing')[0] === true) {
             return [

From a2a668a880a96173a4c3659bdeb7ae32d8927c86 Mon Sep 17 00:00:00 2001
From: Regis Freyd <djaiss@users.noreply.github.com>
Date: Thu, 9 Feb 2023 07:52:51 -0500
Subject: [PATCH 11/12] fix

---
 resources/js/Shared/Modules/Addresses.vue | 84 +++++++++++++++++------
 1 file changed, 63 insertions(+), 21 deletions(-)

diff --git a/resources/js/Shared/Modules/Addresses.vue b/resources/js/Shared/Modules/Addresses.vue
index 3fe547ea1..4dc20c733 100644
--- a/resources/js/Shared/Modules/Addresses.vue
+++ b/resources/js/Shared/Modules/Addresses.vue
@@ -4,6 +4,9 @@ import PrettySpan from '@/Shared/Form/PrettySpan.vue';
 import TextInput from '@/Shared/Form/TextInput.vue';
 import Errors from '@/Shared/Form/Errors.vue';
 import Dropdown from '@/Shared/Form/Dropdown.vue';
+import JetConfirmationModal from '@/Components/Jetstream/ConfirmationModal.vue';
+import JetDangerButton from '@/Components/Jetstream/DangerButton.vue';
+import JetSecondaryButton from '@/Components/Jetstream/SecondaryButton.vue';
 import { onMounted, ref } from 'vue';
 import { useForm } from '@inertiajs/inertia-vue3';
 
@@ -19,6 +22,9 @@ const localActiveAddresses = ref([]);
 const localInactiveAddresses = ref([]);
 const editedAddressId = ref(0);
 const choiceChooseExisting = ref(true);
+const deleteAddressModalShown = ref(false);
+const processAddressDeletion = ref(false);
+const addressToDelete = ref(null);
 
 const form = useForm({
   existing_address: false,
@@ -38,7 +44,11 @@ const form = useForm({
 onMounted(() => {
   localActiveAddresses.value = props.data.active_addresses;
   localInactiveAddresses.value = props.data.inactive_addresses;
-  choiceChooseExisting.value = true;
+  if (props.data.active_addresses.length > 0) {
+    choiceChooseExisting.value = true;
+  } else {
+    choiceChooseExisting.value = false;
+  }
 });
 
 const showCreateAddressModal = () => {
@@ -71,6 +81,11 @@ const showEditAddressModal = (address) => {
   form.country = address.country;
 };
 
+const showDeleteAddressModal = (address) => {
+  addressToDelete.value = address;
+  deleteAddressModalShown.value = true;
+};
+
 const submit = () => {
   loadingState.value = 'loading';
   form.existing_address = choiceChooseExisting.value;
@@ -116,24 +131,26 @@ const update = (address) => {
     });
 };
 
-const destroy = (address) => {
-  if (confirm('Are you sure? This can not be undone.')) {
-    axios
-      .delete(address.url.destroy)
-      .then(() => {
-        if (address.is_past_address) {
-          const id = localInactiveAddresses.value.findIndex((x) => x.id === address.id);
-          localInactiveAddresses.value.splice(id, 1);
-        } else {
-          const id2 = localActiveAddresses.value.findIndex((x) => x.id === address.id);
-          localActiveAddresses.value.splice(id2, 1);
-        }
-      })
-      .catch((error) => {
-        loadingState.value = null;
-        form.errors = error.response.data;
-      });
-  }
+const destroy = () => {
+  processAddressDeletion.value = true;
+
+  axios
+    .delete(addressToDelete.value.url.destroy)
+    .then(() => {
+      processAddressDeletion.value = false;
+      if (addressToDelete.value.is_past_address) {
+        const id = localInactiveAddresses.value.findIndex((x) => x.id === addressToDelete.value.id);
+        localInactiveAddresses.value.splice(id, 1);
+      } else {
+        const id2 = localActiveAddresses.value.findIndex((x) => x.id === addressToDelete.value.id);
+        localActiveAddresses.value.splice(id2, 1);
+      }
+      deleteAddressModalShown.value = false;
+    })
+    .catch((error) => {
+      loadingState.value = null;
+      form.errors = error.response.data;
+    });
 };
 </script>
 
@@ -235,7 +252,7 @@ const destroy = (address) => {
         </div>
 
         <!-- create new address -->
-        <div v-if="!choiceChooseExisting" class="border-b border-gray-200 dark:border-gray-700">
+        <div v-if="!choiceChooseExisting || props.data.addresses_in_vault.length == 0" class="border-b border-gray-200 dark:border-gray-700">
           <div v-if="form.errors.length > 0" class="p-5">
             <errors :errors="form.errors" />
           </div>
@@ -383,7 +400,7 @@ const destroy = (address) => {
               <li class="inline cursor-pointer text-blue-500 hover:underline" @click="showEditAddressModal(address)">
                 {{ $t('app.edit') }}
               </li>
-              <li class="ml-4 inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(address)">
+              <li class="ml-4 inline cursor-pointer text-red-500 hover:text-red-900" @click="showDeleteAddressModal(address)">
                 {{ $t('app.delete') }}
               </li>
             </ul>
@@ -683,6 +700,31 @@ const destroy = (address) => {
         </div>
       </div>
     </div>
+
+    <!-- delete modal -->
+    <JetConfirmationModal :show="deleteAddressModalShown" @close="deleteAddressModalShown = false">
+      <template #title>
+        {{ $t('Delete the address') }}
+      </template>
+
+      <template #content>
+        {{ $t('Are you sure? The address will be deleted immediately.') }}
+      </template>
+
+      <template #footer>
+        <JetSecondaryButton @click="deleteAddressModalShown = false">
+          {{ $t('Cancel') }}
+        </JetSecondaryButton>
+
+        <JetDangerButton
+          class="ml-3"
+          :class="{ 'opacity-25': processAddressDeletion }"
+          :disabled="processAddressDeletion"
+          @click="destroy()">
+          {{ $t('Delete') }}
+        </JetDangerButton>
+      </template>
+    </JetConfirmationModal>
   </div>
 </template>
 

From 8645becd5a3670732b4f101385f33f4291886b5e Mon Sep 17 00:00:00 2001
From: Regis Freyd <djaiss@users.noreply.github.com>
Date: Thu, 9 Feb 2023 07:56:23 -0500
Subject: [PATCH 12/12] fixes

---
 .../js/Pages/Vault/Reports/Address/Index.vue     |  8 ++------
 resources/js/Shared/Modules/Addresses.vue        | 16 ++++++++++++----
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/resources/js/Pages/Vault/Reports/Address/Index.vue b/resources/js/Pages/Vault/Reports/Address/Index.vue
index 447e90e4c..15c8a4a1f 100644
--- a/resources/js/Pages/Vault/Reports/Address/Index.vue
+++ b/resources/js/Pages/Vault/Reports/Address/Index.vue
@@ -59,9 +59,7 @@ defineProps({
             <div
               v-if="data.countries.length == 0"
               class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
-              <p class="p-5 text-center">
-                No countries have been added yet in any contact's addresses.
-              </p>
+              <p class="p-5 text-center">No countries have been added yet in any contact's addresses.</p>
             </div>
           </div>
 
@@ -82,9 +80,7 @@ defineProps({
             <div
               v-if="data.countries.length == 0"
               class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
-              <p class="p-5 text-center">
-                No cities have been added yet in any contact's addresses.
-              </p>
+              <p class="p-5 text-center">No cities have been added yet in any contact's addresses.</p>
             </div>
           </div>
         </div>
diff --git a/resources/js/Shared/Modules/Addresses.vue b/resources/js/Shared/Modules/Addresses.vue
index 4dc20c733..aff2ee456 100644
--- a/resources/js/Shared/Modules/Addresses.vue
+++ b/resources/js/Shared/Modules/Addresses.vue
@@ -193,7 +193,9 @@ const destroy = () => {
         class="bg-form mb-6 rounded-lg border border-gray-200 dark:border-gray-700 dark:bg-gray-900"
         @submit.prevent="submit()">
         <!-- radio button: choose existing or create new address -->
-        <div v-if="props.data.addresses_in_vault.length > 0" class="mb-2 border-b border-gray-200 p-5 dark:border-gray-700">
+        <div
+          v-if="props.data.addresses_in_vault.length > 0"
+          class="mb-2 border-b border-gray-200 p-5 dark:border-gray-700">
           <div class="mb-2 flex items-center">
             <input
               id="chooseExisting"
@@ -226,7 +228,9 @@ const destroy = () => {
         </div>
 
         <!-- existing addresses -->
-        <div v-if="choiceChooseExisting && props.data.addresses_in_vault.length > 0" class="h-40 overflow-auto border-b border-gray-200 p-3 dark:border-gray-700">
+        <div
+          v-if="choiceChooseExisting && props.data.addresses_in_vault.length > 0"
+          class="h-40 overflow-auto border-b border-gray-200 p-3 dark:border-gray-700">
           <ul class="rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
             <li
               v-for="address in props.data.addresses_in_vault"
@@ -252,7 +256,9 @@ const destroy = () => {
         </div>
 
         <!-- create new address -->
-        <div v-if="!choiceChooseExisting || props.data.addresses_in_vault.length == 0" class="border-b border-gray-200 dark:border-gray-700">
+        <div
+          v-if="!choiceChooseExisting || props.data.addresses_in_vault.length == 0"
+          class="border-b border-gray-200 dark:border-gray-700">
           <div v-if="form.errors.length > 0" class="p-5">
             <errors :errors="form.errors" />
           </div>
@@ -400,7 +406,9 @@ const destroy = () => {
               <li class="inline cursor-pointer text-blue-500 hover:underline" @click="showEditAddressModal(address)">
                 {{ $t('app.edit') }}
               </li>
-              <li class="ml-4 inline cursor-pointer text-red-500 hover:text-red-900" @click="showDeleteAddressModal(address)">
+              <li
+                class="ml-4 inline cursor-pointer text-red-500 hover:text-red-900"
+                @click="showDeleteAddressModal(address)">
                 {{ $t('app.delete') }}
               </li>
             </ul>