gas_station/supplier.blade.php at main · ErwinWapo/gas_station · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
@extends('layout')

@section('content')
<div class="p-6 bg-gray-100 min-h-screen font-[Poppins] text-gray-900">

    <!-- Header Section -->
    <div class="flex items-center justify-between mb-4">
        <h1 class="text-2xl font-semibold text-gray-800">Supplier Management</h1>
        <button
            class="bg-emerald-500 text-black px-4 py-2 rounded-xl hover:bg-emerald-600 transition shadow-md focus:outline-none focus:ring-2 focus:ring-emerald-400"
            onclick="document.getElementById('addSupplierModal').showModal()">
            + Add Supplier
        </button>
    </div>

    <!-- Table Container -->
    <div class="bg-white rounded-xl shadow-md overflow-hidden">
        <table class="min-w-full border border-gray-200 text-sm">
            <thead class="bg-emerald-600 text-white">
                <tr>
                    <th class="py-3 px-4 text-left font-medium">Supplier Name</th>
                    <th class="py-3 px-4 text-left font-medium">Contact</th>
                    <th class="py-3 px-4 text-left font-medium">Email</th>
                    <th class="py-3 px-4 text-left font-medium">Last Delivery</th>
                    <th class="py-3 px-4 text-left font-medium">Next Schedule</th>
                    <th class="py-3 px-4 text-center font-medium">Status</th>
                    <th class="py-3 px-4 text-center font-medium">Action</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 text-gray-700">
                <!-- Example Row -->
                <tr class="hover:bg-gray-50">
                    <td class="py-3 px-4">PetroSource Inc.</td>
                    <td class="py-3 px-4">+63 900 123 4567</td>
                    <td class="py-3 px-4">info@petrosource.com</td>
                    <td class="py-3 px-4">2025-10-30</td>
                    <td class="py-3 px-4">2025-11-15</td>
                    <td class="py-3 px-4 text-center">
                        <span class="px-2 py-1 text-xs bg-green-100 text-green-700 rounded-full">Active</span>
                    </td>
                    <td class="py-3 px-4 text-center">
                        <button class="text-blue-600 hover:text-blue-800 font-medium">Edit</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- Add Supplier Modal -->
    <dialog id="addSupplierModal" class="p-0 rounded-xl backdrop:bg-black/50">
    <form method="dialog" class="bg-black w-[90vw] max-w-lg p-6 rounded-xl shadow-xl relative">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">Add New Supplier</h2>

            <div class="grid grid-cols-1 gap-4">
                <div>
                    <label class="text-sm font-medium text-gray-700">Supplier Name</label>
                    <input type="text" class="w-full border border-gray-300 p-2 rounded-lg focus:ring-2 focus:ring-emerald-500 outline-none" placeholder="e.g. PetroSource Inc.">
                </div>
                <div>
                    <label class="text-sm font-medium text-gray-700">Contact Number</label>
                    <input type="text" class="w-full border border-gray-300 p-2 rounded-lg focus:ring-2 focus:ring-emerald-500 outline-none" placeholder="+63 900 123 4567">
                </div>
                <div>
                    <label class="text-sm font-medium text-gray-700">Email</label>
                    <input type="email" class="w-full border border-gray-300 p-2 rounded-lg focus:ring-2 focus:ring-emerald-500 outline-none" placeholder="supplier@email.com">
                </div>
                <div>
                    <label class="text-sm font-medium text-gray-700">Delivery Schedule</label>
                    <input type="date" class="w-full border border-gray-300 p-2 rounded-lg focus:ring-2 focus:ring-emerald-500 outline-none">
                </div>
            </div>

            <div class="mt-6 flex justify-end space-x-3">
                <button class="bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition">Cancel</button>
                <button class="bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition">Save</button>
            </div>
        </form>
    </dialog>
</div>
@endsection