fun/Kol-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add accent color to invoice settings and update related views; enhance event creation with brand contract option

Browse Source
This commit is contained in:
I-Fun
2026-04-02 07:24:43 +07:00
parent 86176c99c7
commit 5748b163b6
15 changed files with 302 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
resources/views/schedule/edit.blade.php
View File

@@ -131,17 +131,20 @@
</div>
{{-- Color --}}
<div>
<div x-data="{ color: '{{ old('color', $event->color ?? '#FFB7C5') }}' }">
<label class="block text-sm font-semibold text-gray-700 mb-2">Color</label>
<div class="flex gap-2 flex-wrap">
@foreach(['#FFB7C5','#B5EAD7','#FDFD96','#E8D5F5','#FFD5B8','#AEC6CF'] as $hex)
<label class="cursor-pointer">
<input type="radio" name="color" value="{{ $hex }}" class="sr-only peer"
{{ old('color', $event->color) === $hex ? 'checked' : '' }}>
<span class="w-8 h-8 rounded-full block ring-2 ring-transparent peer-checked:ring-gray-500 peer-checked:ring-offset-1 transition-all"
style="background:{{ $hex }};"></span>
</label>
@endforeach
<input type="hidden" name="color" :value="color">
<div class="flex items-center gap-3">
<input type="color" x-model="color"
class="w-10 h-10 rounded-xl cursor-pointer border-2 border-pink-100 p-0.5 shrink-0">
<div class="flex gap-2 flex-wrap">
@foreach(['#FFB7C5','#B5EAD7','#FDFD96','#E8D5F5','#FFD5B8','#AEC6CF'] as $hex)
<button type="button"
class="w-8 h-8 rounded-full ring-2 ring-transparent hover:ring-gray-400 transition-all"
style="background:{{ $hex }}"
@click="color = '{{ $hex }}'"></button>
@endforeach
</div>
</div>
</div>
@@ -159,6 +162,35 @@
placeholder="Additional notes…">{{ old('notes', $event->notes) }}</textarea>
</div>
{{-- Active Contract checkbox --}}
<div x-data="{ createContract: false }">
<div class="flex items-center gap-2">
<input type="checkbox" name="create_brand_contract" value="1" id="edit_create_contract"
class="w-4 h-4 accent-pink-400" x-model="createContract">
<label for="edit_create_contract" class="text-sm text-gray-600 cursor-pointer">
📄 Also create a Brand Contract for this event
</label>
</div>
<div x-show="createContract" x-transition class="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-3 bg-pink-50 rounded-2xl p-4">
<div class="sm:col-span-2">
<label class="block text-xs font-semibold text-gray-600 mb-1">Contract Title</label>
<input type="text" name="contract_title" class="input-soft text-sm"
placeholder="e.g. Exclusive Posting Contract — BrandX"
value="{{ old('contract_title', $event->title) }}">
</div>
<div>
<label class="block text-xs font-semibold text-gray-600 mb-1">Contract Start</label>
<input type="date" name="contract_start_date" class="input-soft text-sm"
value="{{ old('contract_start_date', $event->start_time->format('Y-m-d')) }}">
</div>
<div>
<label class="block text-xs font-semibold text-gray-600 mb-1">Contract End</label>
<input type="date" name="contract_end_date" class="input-soft text-sm"
value="{{ old('contract_end_date', $event->end_time?->format('Y-m-d') ?? '') }}">
</div>
</div>
</div>
<div class="flex flex-col sm:flex-row gap-3 pt-1">
<button type="submit" class="btn-sakura flex-1 py-3">💾 Save Changes</button>
<a href="{{ route('schedule.index') }}"

74
resources/views/schedule/index.blade.php
View File

@@ -85,16 +85,20 @@
<input type="time" id="end_time_input" class="input-soft mt-1" value="18:00">
</div>
<div>
<div x-data="{ color: '#FFB7C5' }">
<label class="text-xs font-semibold text-gray-600">Color</label>
<div class="flex gap-2 mt-1 flex-wrap">
@foreach(['#FFB7C5','#B5EAD7','#FDFD96','#E8D5F5','#FFD5B8','#AEC6CF'] as $hex)
<label class="cursor-pointer">
<input type="radio" name="color" value="{{ $hex }}" class="sr-only peer" {{ $loop->first ? 'checked' : '' }}>
<span class="w-7 h-7 rounded-full block ring-2 ring-transparent peer-checked:ring-gray-500 peer-checked:ring-offset-1 transition-all"
style="background:{{ $hex }};"></span>
</label>
@endforeach
<input type="hidden" name="color" :value="color">
<div class="flex items-center gap-3 mt-1">
<input type="color" x-model="color"
class="w-9 h-9 rounded-xl cursor-pointer border-2 border-pink-100 p-0.5 shrink-0">
<div class="flex gap-2 flex-wrap">
@foreach(['#FFB7C5','#B5EAD7','#FDFD96','#E8D5F5','#FFD5B8','#AEC6CF'] as $hex)
<button type="button"
class="w-7 h-7 rounded-full ring-2 ring-transparent hover:ring-gray-400 transition-all"
style="background:{{ $hex }}"
@click="color = '{{ $hex }}'"></button>
@endforeach
</div>
</div>
</div>
<div class="flex items-center gap-2 mt-1">
@@ -105,6 +109,33 @@
<label class="text-xs font-semibold text-gray-600">Notes</label>
<textarea name="notes" rows="2" class="input-soft mt-1 resize-none text-sm"></textarea>
</div>
{{-- Active Contract checkbox --}}
<div class="sm:col-span-2" x-data="{ createContract: false }">
<div class="flex items-center gap-2">
<input type="checkbox" name="create_brand_contract" value="1" id="new_create_contract"
class="w-4 h-4 accent-pink-400" x-model="createContract">
<label for="new_create_contract" class="text-xs text-gray-600 cursor-pointer">
📄 Also create a Brand Contract for this event
</label>
</div>
<div x-show="createContract" x-transition class="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-3 bg-pink-50 rounded-2xl p-3">
<div class="sm:col-span-2">
<label class="text-xs font-semibold text-gray-600">Contract Title</label>
<input type="text" name="contract_title" class="input-soft mt-1 text-xs"
placeholder="e.g. Exclusive Posting Contract — BrandX">
</div>
<div>
<label class="text-xs font-semibold text-gray-600">Contract Start</label>
<input type="date" name="contract_start_date" class="input-soft mt-1 text-xs">
</div>
<div>
<label class="text-xs font-semibold text-gray-600">Contract End</label>
<input type="date" name="contract_end_date" class="input-soft mt-1 text-xs">
</div>
</div>
</div>
<div class="sm:col-span-2">
<button type="submit" class="btn-sakura w-full"
:class="{ 'opacity-50 cursor-not-allowed': contractWarning }">
@@ -121,7 +152,8 @@
@if($upcomingList->isNotEmpty())
<div class="flex gap-2 overflow-x-auto pb-2 mb-4 -mx-4 px-4 lg:mx-0 lg:px-0">
@foreach($upcomingList->take(6) as $event)
<div class="shrink-0 flex items-center gap-2 bg-white rounded-2xl border border-pink-100 px-3 py-2 shadow-sm">
<div class="shrink-0 flex items-center gap-2 bg-white rounded-2xl border border-pink-100 px-3 py-2 shadow-sm cursor-pointer hover:border-pink-300 transition-colors"
onclick="openAlertEventModal({{ json_encode(['id' => $event->id, 'title' => $event->title, 'type' => $event->event_type, 'status' => $event->status->value, 'client' => $event->client?->name, 'start' => $event->start_time->toIso8601String(), 'end' => $event->end_time?->toIso8601String()]) }})">
<div class="w-1.5 h-8 rounded-full shrink-0" style="background:{{ $event->color }}"></div>
<div>
<div class="text-xs font-semibold text-gray-700 whitespace-nowrap">{{ $event->title }}</div>
@@ -255,6 +287,28 @@ document.addEventListener('DOMContentLoaded', function () {
// Note: datetime hidden fields are populated in contractCheck's submitIfClear()
// since @submit.prevent is used on the form (form.submit() bypasses native submit event)
});
function openAlertEventModal(e) {
document.getElementById('modal-title').textContent = e.title;
const startStr = e.start ? new Date(e.start).toLocaleString() : '—';
const endStr = e.end ? new Date(e.end).toLocaleString() : null;
document.getElementById('modal-body').innerHTML = `
<div class="flex gap-2"><span class="text-gray-400 w-16 shrink-0">Type</span><span>${e.type}</span></div>
<div class="flex gap-2"><span class="text-gray-400 w-16 shrink-0">Status</span><span>${e.status}</span></div>
${e.client ? `<div class="flex gap-2"><span class="text-gray-400 w-16 shrink-0">Client</span><span>${e.client}</span></div>` : ''}
<div class="flex gap-2"><span class="text-gray-400 w-16 shrink-0">Start</span><span>${startStr}</span></div>
${endStr ? `<div class="flex gap-2"><span class="text-gray-400 w-16 shrink-0">End</span><span>${endStr}</span></div>` : ''}
`;
document.getElementById('modal-actions').innerHTML = `
<a href="/schedule/${e.id}/edit" class="btn-sakura text-sm flex-1 text-center py-2">Edit</a>
<form method="POST" action="/schedule/${e.id}" onsubmit="return confirm('Delete?')" class="flex-1">
<input type="hidden" name="_method" value="DELETE">
<input type="hidden" name="_token" value="${document.querySelector('meta[name=csrf-token]').content}">
<button class="w-full py-2 rounded-full border border-red-200 text-red-400 text-sm hover:bg-red-50">Delete</button>
</form>
`;
document.getElementById('event-modal').classList.remove('hidden');
}
</script>
{{-- Share scripts disabled --}}