From 28c0a34381253a12420a9972f34635e75f98468b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Do=C4=9Fukan=20=C3=96ks=C3=BCz?= <me@dogukan.dev>
Date: Mon, 9 Nov 2020 02:40:53 +0300
Subject: [PATCH] =?UTF-8?q?Dashboard=20basic=20ui=20tamamland=C4=B1.=20Mod?=
 =?UTF-8?q?eller=20eklendi?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client                                        |  1 -
 server/app/Http/Livewire/Document/Create.php  |  2 +-
 server/app/Http/Livewire/Document/Edit.php    | 13 +++++
 server/app/Http/Livewire/Folder/Create.php    | 41 +++++++++++++++
 .../app/Http/Livewire/Folder/ListContents.php | 13 +++++
 server/app/Http/Livewire/Folder/Show.php      | 27 ++++++++++
 server/app/Models/Document.php                |  5 ++
 server/app/Models/Folder.php                  | 23 +++++++++
 server/app/Models/User.php                    |  5 ++
 ...2020_11_08_162644_create_folders_table.php | 34 +++++++++++++
 ..._11_08_214254_create_folder_user_table.php | 34 +++++++++++++
 ...0_11_08_255555_create_documents_table.php} |  4 +-
 ..._08_255556_create_document_user_table.php} |  0
 server/database/seeders/DatabaseSeeder.php    |  1 +
 server/database/seeders/UserSeeder.php        | 24 +++++++++
 server/resources/views/layouts/app.blade.php  | 51 ++++++++++---------
 .../views/livewire/dashboard.blade.php        | 41 ++++++++++++++-
 .../views/livewire/document/create.blade.php  |  3 +-
 .../views/livewire/document/edit.blade.php    |  3 ++
 .../views/livewire/document/show.blade.php    | 42 +++++++++++----
 .../views/livewire/folder/create.blade.php    | 41 +++++++++++++++
 .../livewire/folder/list-contents.blade.php   |  3 ++
 .../views/livewire/folder/show.blade.php      | 26 ++++++++++
 23 files changed, 397 insertions(+), 40 deletions(-)
 delete mode 160000 client
 create mode 100644 server/app/Http/Livewire/Document/Edit.php
 create mode 100644 server/app/Http/Livewire/Folder/Create.php
 create mode 100644 server/app/Http/Livewire/Folder/ListContents.php
 create mode 100644 server/app/Http/Livewire/Folder/Show.php
 create mode 100644 server/app/Models/Folder.php
 create mode 100644 server/database/migrations/2020_11_08_162644_create_folders_table.php
 create mode 100644 server/database/migrations/2020_11_08_214254_create_folder_user_table.php
 rename server/database/migrations/{2020_11_08_002528_create_documents_table.php => 2020_11_08_255555_create_documents_table.php} (75%)
 rename server/database/migrations/{2020_11_08_002551_create_document_user_table.php => 2020_11_08_255556_create_document_user_table.php} (100%)
 create mode 100644 server/database/seeders/UserSeeder.php
 create mode 100644 server/resources/views/livewire/document/edit.blade.php
 create mode 100644 server/resources/views/livewire/folder/create.blade.php
 create mode 100644 server/resources/views/livewire/folder/list-contents.blade.php
 create mode 100644 server/resources/views/livewire/folder/show.blade.php

diff --git a/client b/client
deleted file mode 160000
index df30219..0000000
--- a/client
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit df30219e2cf87e62c8e2460500a9bea62e13ac4a
diff --git a/server/app/Http/Livewire/Document/Create.php b/server/app/Http/Livewire/Document/Create.php
index 7ab4afb..23f80d6 100644
--- a/server/app/Http/Livewire/Document/Create.php
+++ b/server/app/Http/Livewire/Document/Create.php
@@ -24,7 +24,7 @@ public function createNewDocument()
             ]);
 
             $document->user()->attach(auth()->user());
-        } catch (\Exception $e) {
+        } catch (\Throwable $e) {
             $this->emitTo('dashboard', 'flashMessage', "Oluşturma işlemi başarısız oldu!");
         }        
         $this->emitTo('dashboard', 'flashMessage', $this->name . " isimli doküman başarıyla eklendi!");
diff --git a/server/app/Http/Livewire/Document/Edit.php b/server/app/Http/Livewire/Document/Edit.php
new file mode 100644
index 0000000..fd48c15
--- /dev/null
+++ b/server/app/Http/Livewire/Document/Edit.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Http\Livewire\Document;
+
+use Livewire\Component;
+
+class Edit extends Component
+{
+    public function render()
+    {
+        return view('livewire.document.edit');
+    }
+}
diff --git a/server/app/Http/Livewire/Folder/Create.php b/server/app/Http/Livewire/Folder/Create.php
new file mode 100644
index 0000000..6134cd3
--- /dev/null
+++ b/server/app/Http/Livewire/Folder/Create.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace App\Http\Livewire\Folder;
+
+use Livewire\Component;
+use App\Models\Folder;
+
+class Create extends Component
+{
+    public $isCreatingFolder = false;
+    public $name = "";
+    public $message = "";
+
+    public function confirmCreatingFolder()
+    {
+        $this->isCreatingFolder = true;
+    }
+
+    public function createNewFolder()
+    {
+        try {
+            $folder = Folder::create([
+                'name' => $this->name
+            ]);
+
+            $folder->user()->attach(auth()->user());
+        } catch (\Throwable $e) {
+            $this->emitTo('dashboard', 'flashMessage', "Oluşturma işlemi başarısız oldu!");
+        }        
+        $this->emitTo('dashboard', 'flashMessage', $this->name . " isimli klasör başarıyla eklendi!");
+
+        $this->emitTo('folder.show', 'newFolderCreated');
+        $this->isCreatingFolder = false;
+        $this->name = "";
+    }
+
+    public function render()
+    {
+        return view('livewire.folder.create');
+    }
+}
\ No newline at end of file
diff --git a/server/app/Http/Livewire/Folder/ListContents.php b/server/app/Http/Livewire/Folder/ListContents.php
new file mode 100644
index 0000000..b2c549c
--- /dev/null
+++ b/server/app/Http/Livewire/Folder/ListContents.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Http\Livewire\Folder;
+
+use Livewire\Component;
+
+class ListContents extends Component
+{
+    public function render()
+    {
+        return view('livewire.folder.list-contents');
+    }
+}
diff --git a/server/app/Http/Livewire/Folder/Show.php b/server/app/Http/Livewire/Folder/Show.php
new file mode 100644
index 0000000..de5c8d9
--- /dev/null
+++ b/server/app/Http/Livewire/Folder/Show.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Http\Livewire\Folder;
+
+use Livewire\Component;
+
+class Show extends Component
+{
+    public $folders;
+
+    protected $listeners = ['newFolderCreated'];
+
+    public function newFolderCreated()
+    {
+        $this->folders = auth()->user()->folder()->orderBy('updated_at', 'DESC')->get();
+    }
+
+    public function mount()
+    {
+        $this->folders = auth()->user()->folder()->orderBy('updated_at', 'DESC')->get();
+    }
+
+    public function render()
+    {
+        return view('livewire.folder.show');
+    }
+}
diff --git a/server/app/Models/Document.php b/server/app/Models/Document.php
index c024b95..c6f00ee 100644
--- a/server/app/Models/Document.php
+++ b/server/app/Models/Document.php
@@ -17,4 +17,9 @@ public function user()
     {
         return $this->belongsToMany(User::class);
     }
+
+    public function folder()
+    {
+        return $this->belongsTo(Folder::class);
+    }
 }
diff --git a/server/app/Models/Folder.php b/server/app/Models/Folder.php
new file mode 100644
index 0000000..a83b42d
--- /dev/null
+++ b/server/app/Models/Folder.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Folder extends Model
+{
+    use HasFactory;
+
+    protected $fillable = ['name'];
+
+    public function user()
+    {
+        return $this->belongsToMany(User::class);
+    }
+
+    public function document()
+    {
+        return $this->hasMany(Document::class);
+    }
+}
diff --git a/server/app/Models/User.php b/server/app/Models/User.php
index 81f93df..57e5ca8 100644
--- a/server/app/Models/User.php
+++ b/server/app/Models/User.php
@@ -59,6 +59,11 @@ class User extends Authenticatable
         'profile_photo_url',
     ];
 
+    public function folder()
+    {
+        return $this->belongsToMany(Folder::class);
+    }
+
     public function document()
     {
         return $this->belongsToMany(Document::class);
diff --git a/server/database/migrations/2020_11_08_162644_create_folders_table.php b/server/database/migrations/2020_11_08_162644_create_folders_table.php
new file mode 100644
index 0000000..b35fd0e
--- /dev/null
+++ b/server/database/migrations/2020_11_08_162644_create_folders_table.php
@@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateFoldersTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('folders', function (Blueprint $table) {
+            $table->id();
+            $table->string('name');
+            $table->foreignId('parent_folder_id')->nullable();
+            $table->foreign('parent_folder_id')->references('id')->on('folders')->cascadeOnDelete();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('folders');
+    }
+}
diff --git a/server/database/migrations/2020_11_08_214254_create_folder_user_table.php b/server/database/migrations/2020_11_08_214254_create_folder_user_table.php
new file mode 100644
index 0000000..3b50e51
--- /dev/null
+++ b/server/database/migrations/2020_11_08_214254_create_folder_user_table.php
@@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateFolderUserTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('folder_user', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('folder_id');
+            $table->foreignId('user_id');
+            $table->foreign('folder_id')->on('folders')->references('id')->cascadeOnDelete();
+            $table->foreign('user_id')->on('users')->references('id')->cascadeOnDelete();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('folder_user');
+    }
+}
diff --git a/server/database/migrations/2020_11_08_002528_create_documents_table.php b/server/database/migrations/2020_11_08_255555_create_documents_table.php
similarity index 75%
rename from server/database/migrations/2020_11_08_002528_create_documents_table.php
rename to server/database/migrations/2020_11_08_255555_create_documents_table.php
index 97b9c5f..dff9e28 100644
--- a/server/database/migrations/2020_11_08_002528_create_documents_table.php
+++ b/server/database/migrations/2020_11_08_255555_create_documents_table.php
@@ -16,7 +16,9 @@ public function up()
         Schema::create('documents', function (Blueprint $table) {
             $table->id();
             $table->string('name');
-            $table->longText('content');
+            $table->longText('content')->nullable();
+            $table->foreignId('folder_id')->nullable();
+            $table->foreign('folder_id')->references('id')->on('folders')->cascadeOnDelete();
             $table->timestamps();
         });
     }
diff --git a/server/database/migrations/2020_11_08_002551_create_document_user_table.php b/server/database/migrations/2020_11_08_255556_create_document_user_table.php
similarity index 100%
rename from server/database/migrations/2020_11_08_002551_create_document_user_table.php
rename to server/database/migrations/2020_11_08_255556_create_document_user_table.php
diff --git a/server/database/seeders/DatabaseSeeder.php b/server/database/seeders/DatabaseSeeder.php
index 57b73b5..6b41bc5 100644
--- a/server/database/seeders/DatabaseSeeder.php
+++ b/server/database/seeders/DatabaseSeeder.php
@@ -13,6 +13,7 @@ class DatabaseSeeder extends Seeder
      */
     public function run()
     {
+        $this->call(UserSeeder::class);
         // \App\Models\User::factory(10)->create();
     }
 }
diff --git a/server/database/seeders/UserSeeder.php b/server/database/seeders/UserSeeder.php
new file mode 100644
index 0000000..5a2adb4
--- /dev/null
+++ b/server/database/seeders/UserSeeder.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace Database\Seeders;
+
+use Illuminate\Database\Seeder;
+use Illuminate\Support\Facades\Hash;
+use App\Models\User;
+
+class UserSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     *
+     * @return void
+     */
+    public function run()
+    {
+        User::create([
+            'name' => 'Doğukan Öksüz',
+            'email' => 'me@dogukan.dev',
+            'password' => Hash::make('divergent')
+        ]);
+    }
+}
diff --git a/server/resources/views/layouts/app.blade.php b/server/resources/views/layouts/app.blade.php
index 19b0fc3..a2a8a36 100644
--- a/server/resources/views/layouts/app.blade.php
+++ b/server/resources/views/layouts/app.blade.php
@@ -1,35 +1,38 @@
 <!DOCTYPE html>
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <meta name="csrf-token" content="{{ csrf_token() }}">
 
-        <title>{{ config('app.name', 'Laravel') }}</title>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
 
-        <!-- Google Font -->
-        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <title>{{ config('app.name', 'Laravel') }}</title>
 
-        <!-- Styles -->
-        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
+    <!-- Google Font -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 
-        @livewireStyles
+    <!-- Styles -->
+    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
 
-        <!-- Scripts -->
-        <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.js" defer></script>
-    </head>
-    <body class="font-sans antialiased">
-        <div class="min-h-screen bg-gray-100">
-            @livewire('navigation-dropdown')
+    @livewireStyles
 
-            <!-- Page Content -->
-            <main>
-                {{ $slot }}
-            </main>
-        </div>
+    <!-- Scripts -->
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.js" defer></script>
+</head>
 
-        @stack('modals')
+<body class="font-sans antialiased">
+    <div class="min-h-screen bg-gray-100">
+        @livewire('navigation-dropdown')
+
+        <!-- Page Content -->
+        <main>
+            {{ $slot }}
+        </main>
+    </div>
+
+    @stack('modals')
+
+    @livewireScripts
+</body>
 
-        @livewireScripts
-    </body>
 </html>
diff --git a/server/resources/views/livewire/dashboard.blade.php b/server/resources/views/livewire/dashboard.blade.php
index b0d8f64..6b72226 100644
--- a/server/resources/views/livewire/dashboard.blade.php
+++ b/server/resources/views/livewire/dashboard.blade.php
@@ -2,12 +2,49 @@
     <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
         <div>
             @if ($message)
-            <div class="alert alert-success">
-                {{ $message }}
+            <div class="mb-5 bg-teal-100 border-t-4 border-teal-500 rounded text-teal-900 px-4 py-3 shadow-md"
+                role="alert">
+                <div class="flex">
+                    <div class="py-1"><svg class="fill-current h-6 w-6 text-teal-500 mr-4"
+                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                            <path
+                                d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z" />
+                        </svg></div>
+                    <div>
+                        <p class="font-bold mt-1">{{ $message }}</p>
+                    </div>
+                </div>
             </div>
             @endif
         </div>
+        <div class="float-left">
+            <nav class="text-black font-bold my-3" aria-label="Breadcrumb">
+                <ol class="list-none p-0 inline-flex">
+                    <li class="flex items-center">
+                        <a href="{{ route('dashboard') }}">Pano</a>
+                        <!--<svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+                            <path
+                                d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z" />
+                            </svg>-->
+                    </li>
+                    <!--
+                    <li class="flex items-center">
+                        <a href="#">Second Level</a>
+                        <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+                            <path
+                                d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z" />
+                            </svg>
+                    </li>
+                    <li>
+                        <a href="#" class="text-gray-500" aria-current="page">Third Level</a>
+                    </li> -->
+                </ol>
+            </nav>
+        </div>
         <livewire:document.create />
+        <livewire:folder.create />
+
+        <livewire:folder.show />
         <livewire:document.show />
     </div>
 </div>
diff --git a/server/resources/views/livewire/document/create.blade.php b/server/resources/views/livewire/document/create.blade.php
index 12eac71..3d1ab26 100644
--- a/server/resources/views/livewire/document/create.blade.php
+++ b/server/resources/views/livewire/document/create.blade.php
@@ -1,5 +1,6 @@
-<div>
+<div class="mb-5 float-right ml-5">
     <x-jet-button wire:click="confirmCreating">
+        <svg class="w-6 h-6 mr-2 -ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
         Yeni Doküman Oluştur
     </x-jet-button>
 
diff --git a/server/resources/views/livewire/document/edit.blade.php b/server/resources/views/livewire/document/edit.blade.php
new file mode 100644
index 0000000..ad58cc8
--- /dev/null
+++ b/server/resources/views/livewire/document/edit.blade.php
@@ -0,0 +1,3 @@
+<div>
+    {{-- Stop trying to control. --}}
+</div>
diff --git a/server/resources/views/livewire/document/show.blade.php b/server/resources/views/livewire/document/show.blade.php
index a8e2a00..6210afd 100644
--- a/server/resources/views/livewire/document/show.blade.php
+++ b/server/resources/views/livewire/document/show.blade.php
@@ -1,13 +1,35 @@
-<div>
-    <div wire:loading>
-        Fetching Documents...
+<div class="float-left w-full mb-10">
+    <div class="grid grid-cols-2 lg:grid-cols-5 gap-4" wire:loading>
+        <button type="button"
+            class="inline-flex items-center px-4 py-2 border border-transparent text-center leading-6 font-medium rounded-md text-white bg-gray-800  focus:outline-none transition ease-in-out duration-150 cursor-not-allowed"
+            disabled="">
+            <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none"
+                viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+                </path>
+            </svg>
+            Dosyalar Yükleniyor
+        </button>
     </div>
-    <div wire:loading.remove>
-    @foreach ($documents as $document)
-        <a href="{{ route('showDocument', $document->id) }}"> 
-            {{ $document->name }}<br>
-            {{ $document->updated_at->isoFormat('LLL') }}<br>
-        </a><br>
-    @endforeach
+    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4" wire:loading.remove>
+        @foreach ($documents as $document)
+        <div class="float-left bg-white rounded shadow hover:bg-gray-100 transition duration-500">
+            <a href="{{ route('showDocument', $document->id) }}" class="block p-5">
+                <svg class="-ml-1 mr-3 h-6 w-6 float-left" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z">
+                    </path>
+                </svg>
+                <div class="flex flex-col">
+                    <div class="font-semibold w-full">{{ $document->name }}</div>
+                    <div class="font-weight:300 text-gray-600 text-sm w-full">{{ $document->updated_at->isoFormat('LLL') }}
+                    </div>
+                </div>
+            </a>
+        </div>
+        @endforeach
     </div>
 </div>
diff --git a/server/resources/views/livewire/folder/create.blade.php b/server/resources/views/livewire/folder/create.blade.php
new file mode 100644
index 0000000..c695458
--- /dev/null
+++ b/server/resources/views/livewire/folder/create.blade.php
@@ -0,0 +1,41 @@
+<div class="mb-5 float-right">
+    <x-jet-button wire:click="confirmCreatingFolder">
+        <svg class="w-6 h-6 mr-2 -ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"></path></svg>
+        Yeni Klasör Oluştur
+    </x-jet-button>
+
+    <x-jet-dialog-modal wire:model="isCreatingFolder">
+        <x-slot name="title">
+            Yeni Klasör Oluştur
+        </x-slot>
+
+        <x-slot name="content">
+            @if (!empty($message))
+            <div class="flex items-center bg-blue-500 text-white text-sm font-bold px-4 py-3 w-3/4" role="alert">
+                <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                    <path
+                        d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z" />
+                    </svg>
+                <p>{{ $message }}</p>
+            </div>
+            @endif
+            Oluşturmak istediğiniz klasörün ismini yazınız.
+
+
+            <div class="mt-4" x-data="{}">
+                <x-jet-input type="text" class="mt-1 block w-3/4" placeholder="{{ __('Name') }}" x-ref="name"
+                    wire:model.defer="name" />
+            </div>
+        </x-slot>
+
+        <x-slot name="footer">
+            <x-jet-secondary-button wire:click="$toggle('isCreating')" wire:loading.attr="disabled">
+                {{ __('Close') }}
+            </x-jet-secondary-button>
+
+            <x-jet-button class="ml-2" wire:click="createNewFolder" wire:loading.attr="disabled">
+                {{ __('Create') }}
+            </x-jet-button>
+        </x-slot>
+    </x-jet-dialog-modal>
+</div>
diff --git a/server/resources/views/livewire/folder/list-contents.blade.php b/server/resources/views/livewire/folder/list-contents.blade.php
new file mode 100644
index 0000000..a40248d
--- /dev/null
+++ b/server/resources/views/livewire/folder/list-contents.blade.php
@@ -0,0 +1,3 @@
+<div>
+    {{-- Knowing others is intelligence; knowing yourself is true wisdom. --}}
+</div>
diff --git a/server/resources/views/livewire/folder/show.blade.php b/server/resources/views/livewire/folder/show.blade.php
new file mode 100644
index 0000000..81c6625
--- /dev/null
+++ b/server/resources/views/livewire/folder/show.blade.php
@@ -0,0 +1,26 @@
+<div class="float-left w-full mb-10">
+    <div class="grid grid-cols-2 lg:grid-cols-5 gap-4" wire:loading>
+        <button type="button"
+            class="inline-flex items-center px-4 py-2 border border-transparent text-center leading-6 font-medium rounded-md text-white bg-gray-800  focus:outline-none transition ease-in-out duration-150 cursor-not-allowed"
+            disabled="">
+            <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none"
+                viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+                </path>
+            </svg>
+            Klasörler Yükleniyor
+        </button>
+    </div>
+    <div class="grid grid-cols-2 lg:grid-cols-5 gap-4" wire:loading.remove>
+        @foreach ($folders as $folder)
+        <div class="float-left bg-white rounded shadow hover:bg-gray-100 transition duration-500">
+            <a href="#" class="block p-5">
+                <svg class="-ml-1 mr-3 h-6 w-6 float-left" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>
+                <div class="font-semibold">{{ $folder->name }}</div>
+            </a>
+        </div>
+        @endforeach
+    </div>
+</div>