Create tree form

resources/views/app/stat-tree/stat-trees/create.blade.php

@@ -1,34 +1,40 @@
 @extends ('layouts/template')
 @section('content')
 <div id="statTreeComponent" v-cloak>
-    <div class="row">
-        <div class="col-md-12">
-            <h5>Create Stat Tree</h5>
-        </div>
-    </div>
-    <form class="row" @submit.prevent="submit" method="POST">
-        <div class="col-md-4">
-            <div class="form-group">
-                <label>Name</label>
-                <input type="text" class="form-control" name="name" v-model="form.name" required />
-            </div>
-        </div>
-        <div class="col-md-4">
-            <div class="form-group">
-                <label>Model</label>
-                <input type="text" class="form-control" name="table" v-model="form.model" required />
+    <main role="main" class="stag-content px-0">
+        <div class="p-3 mcp-theme-1">
+            <div class="card">
+                <div class="card-header">
+                    <h6 class="font-weight-bold mb-0">Create Stat Tree</h6>
+                </div>
+                <div class="card-body">
+                    <form class="row" @submit.prevent="submit" method="POST">
+                        <div class="col-md-4">
+                            <div class="form-group">
+                                <label>Name</label>
+                                <input type="text" class="form-control" name="name" v-model="form.name" required />
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="form-group">
+                                <label>Model</label>
+                                <input type="text" class="form-control" name="table" v-model="form.model" required />
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="form-group">
+                                <label>Slug</label>
+                                <input type="text" class="form-control" name="slug" v-model="form.slug" required />
+                            </div>
+                        </div>
+                        <div class="col-12">
+                            <button type="submit" class="btn btn-sm btn-primary">Submit</button>
+                        </div>
+                    </form>
+                </div>
             </div>
         </div>
-        <div class="col-md-4">
-            <div class="form-group">
-                <label>Slug</label>
-                <input type="text" class="form-control" name="slug" v-model="form.slug" required />
-            </div>
-        </div>
-        <div class="col-12">
-            <button type="submit" class="btn btn-sm btn-primary">Submit</button>
-        </div>
-    </form>
+    </main>
 </div>
 
 <script type="text/javascript">

resources/views/app/stat-tree/stat-trees/list.blade.php

@@ -1,39 +1,53 @@
 @extends ('layouts/template')
 @section('content')
 
-<div class="row">
-    <div class="col-md-12">
-        <div class="d-flex align-items-center justify-content-between">
-            <h5>Stat Trees</h5>
-            <div>
-                <a href="{{ route('practice-management.statTrees.createPage') }}" class="btn btn-sm btn-primary">Create Tree</a>
+<main role="main" class="stag-content px-0">
+    <div class="p-3 mcp-theme-1">
+        <div class="row">
+            <div class="col-12">
+                <div class="card">
+                    <div class="card-header">
+                        <div class="d-flex align-items-center justify-content-between">
+                            <div>
+                                <h6 class="font-weight-bold mb-0"><i class="fas fa-network-wired"></i> Stat Trees</h6>
+                            </div>
+                            <div>
+                                <a href="{{ route('practice-management.statTrees.createPage') }}" class="btn btn-sm btn-primary text-white"><i class="fas fa-folder-plus"></i> Create Tree</a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card-body p-0">
+                        <div class="row">
+                            <div class="col-md-12">
+                                <div class="table-responsive">
+                                    <table class="table table-condensed p-0 m-0">
+                                        <thead class="bg-light">
+                                            <tr>
+                                                <th class="border-0">ID</th>
+                                                <th class="border-0">Name</th>
+                                                <th class="border-0">Model</th>
+                                                <th class="border-0">Slug</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            @foreach($statTrees as $statTree)
+                                            <tr>
+                                                <td><a href="{{ route('practice-management.statTrees.view.dashboard', $statTree) }}">{{ $statTree->id }}</a></td>
+                                                <td>{{ $statTree->name }}</td>
+                                                <td>{{ $statTree->model }}</td>
+                                                <td>{{ $statTree->slug }}</td>
+                                            </tr>
+                                            @endforeach
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
-    <div class="col-md-12">
-        <div class="table-responsive">
-            <table class="table">
-                <thead>
-                    <tr>
-                        <th>ID</th>
-                        <th>Name</th>
-                        <th>Model</th>
-                        <th>Slug</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    @foreach($statTrees as $statTree)
-                    <tr>
-                        <td><a href="{{ route('practice-management.statTrees.view.dashboard', $statTree) }}">{{ $statTree->id }}</a></td>
-                        <td>{{ $statTree->name }}</td>
-                        <td>{{ $statTree->model }}</td>
-                        <td>{{ $statTree->slug }}</td>
-                    </tr>
-                    @endforeach
-                </tbody>
-            </table>
-        </div>
-    </div>
-</div>
+</main>
 
 @endsection