feat(broker dashboard): add the markup of broker dashboard

resources/views/components/dashboard/card.blade.php

@@ -0,0 +1,3 @@
+<div {{$attributes->merge(['class' => 'p-6 border border-gray-200 rounded-xl'])}}>
+    {{$slot}}
+</div>

resources/views/components/dashboard/listing-card.blade.php

@@ -0,0 +1,15 @@
+@props(['image' => '', 'title' => '', 'category' => '', 'impressions' => 0, 'likes' => 0, 'clicks' => 0, 'status' => ''])
+<x-ui.image-card :image="$image">
+    <div class="bg-white pt-8 px-4 space-y-4">
+        <div class="flex justify-between items-baseline">
+            <p class="font-bold text-lg">{{$title}}</p>
+            @if($status == 'Active')
+                <x-ui.badge :title="$status"/>
+            @elseif($status == 'Pending')
+                <x-ui.badge :title="$status" variant="ghost"/>
+            @endif
+        </div>
+        <p class="text-accent-600">{{$category}}</p>
+        <x-dashboard.listing-stats :impression="$impressions" :likes="$likes" :clicks="$clicks"/>
+    </div>
+</x-ui.image-card>

resources/views/components/dashboard/listing-stats.blade.php

@@ -0,0 +1,17 @@
+@props(['impression' => 0, 'likes' => 0, 'clicks' => 0])
+<div class="flex items-center justify-between">
+    <div class=" text-accent-600 flex space-x-2">
+        <x-heroicon-o-eye class="w-4"/>
+        <p class="text-sm">{{$impression}}</p>
+    </div>
+
+    <div class=" text-accent-600 flex space-x-2">
+        <x-heroicon-o-heart class="w-4"/>
+        <p class="text-sm">{{$likes}}</p>
+    </div>
+
+    <div class=" text-accent-600 flex space-x-2">
+        <x-heroicon-o-cursor-arrow-rays class="w-4"/>
+        <p class="text-sm">{{$clicks}}</p>
+    </div>
+</div>

resources/views/components/dashboard/listing.blade.php

@@ -0,0 +1,36 @@
+<div class="wrapper">
+<x-dashboard.card class="bg-white">
+    <p class="font-bold mb-6">My Listings</p>
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <x-dashboard.listing-card
+            :image="asset('storage/images/pexels-irrabagon-35425432.jpg')"
+            title="Luxury Apartment Downtown"
+            category="Real Estate"
+            status="Active"
+            impressions="1245"
+            likes="89"
+            class="156"
+        />
+
+        <x-dashboard.listing-card
+            :image="asset('storage/images/vitaly-gariev-NODOn-Mrams-unsplash.jpg')"
+            title="Best Italian Resturant"
+            category="Real Estate"
+            status="Active"
+            impressions="1245"
+            likes="89"
+            class="156"
+        />
+
+        <x-dashboard.listing-card
+            :image="asset('storage/images/vijay-kumar-pZcEo5TlxJc-unsplash.jpg')"
+            title="Luxury Apartment Downtown"
+            category="Real Estate"
+            status="Pending"
+            impressions="1245"
+            likes="89"
+            class="156"
+        />
+    </div>
+</x-dashboard.card>
+</div>

resources/views/components/dashboard/navbar.blade.php

@@ -0,0 +1,65 @@
+<nav class="flex justify-between items-center wrapper py-6 shadow">
+    <div class="logo flex space-x-2 items-center">
+        <x-logo/>
+        <div class="">
+            <a href="" class="font-bold text-2xl">Broker Dashboard</a>
+            <p class="text-sm text-accent-600">Manage your deals and listings</p>
+        </div>
+    </div>
+
+    <!-- desktop menu -->
+
+    <div class="nav-ui buttons space-x-4 font-medium hidden md:flex ">
+        <a href="" class="ui-btn flex border space-x-3 border-gray-200 items-center">
+            <x-heroicon-o-user class="w-6"/>
+            <p>Profile</p>
+        </a>
+        <a href="" class="ui-btn ui-btn-neutral flex space-x-3 items-center">
+            <x-heroicon-o-plus class="w-6"/>
+            <p>Create Deal</p>
+        </a>
+        <form method="post" action="{{route('logout')}}">
+            @csrf
+            @method('delete')
+            <x-ui.button>
+                <x-heroicon-o-arrow-right-start-on-rectangle class="w-6"/>
+            </x-ui.button>
+        </form>
+    </div>
+
+    <!-- mobile menu btn-->
+    <x-ui.button class="md:hidden" id="openBtn">
+        <x-heroicon-o-bars-3 class="w-8"/>
+    </x-ui.button>
+
+</nav>
+
+<!-- mobile menu btn-->
+<div id='mobileMenu' class="hidden absolute top-0 h-[101vh] overflow-y-hidden w-[101vw] bg-gray-200 text-xl z-1 p-10">
+    <div class="flex justify-between mb-8">
+        <x-logo/>
+        <x-ui.button id="closeBtn">
+            <x-heroicon-o-x-mark class="w-8 ml-auto"/>
+        </x-ui.button>
+    </div>
+    <div class="nav-links mb-10">
+        <ul class="flex flex-col space-y-8 text-accent-600">
+            <a href="" class="ui-btn flex border space-x-3 border-gray-200 items-center">
+                <x-heroicon-o-user class="w-6"/>
+                <p>Profile</p>
+            </a>
+            <a href="" class="ui-btn ui-btn-neutral flex border space-x-3 items-center">
+                <x-heroicon-o-plus class="w-6"/>
+                <p>Create Deal</p>
+            </a>
+            <form method="post" action="{{route('logout')}}">
+                @csrf
+                @method('delete')
+                <x-ui.button class="flex space-x-3">
+                    <x-heroicon-o-arrow-right-start-on-rectangle class="w-6"/>
+                    <p>Logout</p>
+                </x-ui.button>
+            </form>
+        </ul>
+    </div>
+</div>

resources/views/components/dashboard/stats-card.blade.php

@@ -0,0 +1,12 @@
+@props(['title' => '', 'score' => ''])
+<x-dashboard.card>
+    <article class="flex justify-between">
+        <div class="">
+            <h3 class="mb-2 text-sm text-accent-600">{{$title}}</h3>
+            <p class="text-4xl font-bold">{{$score}}</p>
+        </div>
+        <div class="">
+            {{$slot}}
+        </div>
+    </article>
+</x-dashboard.card>

resources/views/components/dashboard/stats.blade.php

@@ -0,0 +1,23 @@
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 wrapper gap-8">
+    <x-dashboard.stats-card title="My Listings" score="24">
+        <x-icon-square variant="blue">
+            <x-heroicon-o-document-text class="w-8" />
+        </x-icon-square>
+    </x-dashboard.stats-card>
+
+    <x-dashboard.stats-card title="Total Views" score="12,483">
+        <x-icon-square variant="purple">
+            <x-heroicon-o-eye class="w-8" />
+        </x-icon-square>
+    </x-dashboard.stats-card>
+    <x-dashboard.stats-card title="Total Likes" score="1,847">
+        <x-icon-square variant="pink">
+            <x-heroicon-o-heart class="w-8" />
+        </x-icon-square>
+    </x-dashboard.stats-card>
+    <x-dashboard.stats-card title="Total Clicks" score="3,246">
+        <x-icon-square variant="green">
+            <x-heroicon-o-cursor-arrow-rays class="w-8" />
+        </x-icon-square>
+    </x-dashboard.stats-card>
+</div>

resources/views/components/icon-square.blade.php

@@ -0,0 +1,12 @@
+@props(['variant' => ''])
+@php
+    $variants = [
+        'blue' => "bg-blue-100 text-blue-700",
+        'purple' => "bg-purple-100 text-purple-700",
+        'pink' => "bg-pink-100 text-pink-700",
+        'green' => "bg-green-100 text-green-700",
+    ]
+@endphp
+<div class="p-4 {{$variants[$variant]}} w-fit rounded-xl">
+    {{$slot}}
+</div>

resources/views/components/ui/badge.blade.php

@@ -0,0 +1,10 @@
+@props(['title' => '', 'variant' => 'neutral'])
+@php
+    $variants = [
+        'neutral' => 'bg-black text-white',
+        'ghost' => 'bg-gray-200 text-gray-800'
+    ];
+@endphp
+<span class="text-xs {{$variants[$variant]}} px-3 py-1 rounded-lg">
+    <p class="font-bold">{{$title}}</p>
+</span>

resources/views/components/ui/image-card.blade.php

@@ -0,0 +1,9 @@
+@props(['image' => '', 'alt' => ''])
+<div class="border border-gray-200 rounded-xl overflow-clip">
+    <div class="grid grid-rows-2">
+        <div class="rounded-t-xl h-40">
+            <img src="{{$image}}" alt="" class="object-cover">
+        </div>
+        {{$slot}}
+    </div>
+</div>

resources/views/dashboards/broker.blade.php

@@ -1,3 +1,8 @@
 <x-layout title="Broker Dashboard">
-
+    <section class="flex flex-col space-y-8 bg-[#F9FAFB]">
+        <x-dashboard.navbar/>
+        <x-dashboard.stats/>
+        <x-dashboard.listing />
+    </section>
+    @vite('resources/js/nav-menu.js')
 </x-layout>