Create the projects part.

resources/views/projects/index.blade.php

@@ -0,0 +1,84 @@
+<x-app-layout>
+    <x-slot name="header">
+        <div class="flex flex-row w-full">
+            <h2 class="grow font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+                {{ __('project.Projects') }}
+            </h2>
+        </div>
+    </x-slot>
+
+    <div class="py-12">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
+            <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
+                <div class="max-w-xl">
+                    <section>
+                        <header>
+                            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+                                {{ __('project.Add new project') }}
+                            </h2>
+
+                            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+                                {{ __("project.Add new project by clicking add") }}
+                            </p>
+                        </header>
+                        <a class="mt-6 inline-block" href="{{ route('project.create') }}"><x-primary-button>{{ __('form.Add') }}</x-primary-button></a>
+                    </section>
+                </div>
+            </div>
+
+            <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
+                <div class="max-w" x-data="projectForm">
+                    <section>
+                        <header>
+                            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+                                {{ __('project.Existing projects') }}
+                            </h2>
+                        </header>
+
+                        <summary class="cursor-pointer flex flex-row w-full mt-4">
+                            <div class="w-1/6 font-bold border-b-2">{{ __('project.Project Number') }}</div>
+                            <div class="w-1/3 font-bold border-b-2">{{ __('customer.Customer') }}</div>
+                            <div class="w-1/3 font-bold border-b-2">{{ __('common.Name') }}</div>
+                            <div class="w-1/12 font-bold border-b-2 text-right">{{ __('project.Start date') }}</div>
+                            <div class="w-1/12 font-bold border-b-2 text-right">{{ __('project.End date') }}</div>
+                        </summary>
+
+                        <template x-for="project in projects">
+                            <details class="even:bg-gray-100 odd:bg-white">
+                                <summary class="cursor-pointer flex flex-row w-full" @click="window.location.href='/project/' + project.id;">
+                                    <div class="w-1/6" x-text="project.project_number"></div>
+                                    <div class="w-1/3" x-text="project.customer.name"></div>
+                                    <div class="w-1/3" x-text="project.name"></div>
+                                    <div class="w-1/12 text-right" x-text="project.start"></div>
+                                    <div class="w-1/12 text-right" x-text="project.end"></div>
+                                </summary>
+                            </details>
+                        </template>
+
+                    </section>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</x-app-layout>
+
+<script>
+    function projectForm() {
+        return {
+            projects: [],
+
+            init() {
+                this.getProjects();
+            },
+
+            getProjects() {
+                let vm = this;
+                axios.get('/project')
+                    .then(function(response) {
+                        vm.projects = response.data;
+                    })
+            }
+        }
+    }
+</script>