initial commit
This commit is contained in:
I-Fun
122
resources/css/app.css
Normal file
122
resources/css/app.css
Normal file
@@ -0,0 +1,122 @@
|
||||
@import 'tailwindcss';
|
||||
@plugin "daisyui";
|
||||
|
||||
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
||||
@source '../../storage/framework/views/*.php';
|
||||
@source '../**/*.blade.php';
|
||||
@source '../**/*.js';
|
||||
|
||||
@theme {
|
||||
--font-sans: 'Nunito', ui-sans-serif, system-ui, sans-serif;
|
||||
|
||||
--color-sakura: #FFB7C5;
|
||||
--color-sakura-light: #FFD6E0;
|
||||
--color-sakura-dark: #FF8FAD;
|
||||
--color-cream: #FFF8F0;
|
||||
--color-pastel-yellow: #FDFD96;
|
||||
--color-lavender: #E8D5F5;
|
||||
--color-mint: #B5EAD7;
|
||||
--color-peach: #FFD5B8;
|
||||
}
|
||||
|
||||
/* ── Base ─────────────────────────────────────────────────── */
|
||||
body {
|
||||
background-color: #FFF8F0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #FFB7C5 #FFF8F0;
|
||||
}
|
||||
|
||||
/* ── Sidebar transition ───────────────────────────────────── */
|
||||
aside {
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
/* ── Cat Card ─────────────────────────────────────────────── */
|
||||
.cat-card {
|
||||
@apply rounded-3xl shadow-sm bg-white border border-pink-100;
|
||||
}
|
||||
|
||||
/* ── Bubbly Button ────────────────────────────────────────── */
|
||||
.btn-sakura {
|
||||
@apply rounded-full text-white font-semibold shadow-sm px-5 py-2
|
||||
transition-all duration-150 inline-block cursor-pointer
|
||||
text-center;
|
||||
background-color: #FFB7C5;
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.btn-sakura:hover {
|
||||
background-color: #FF8FAD;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 14px rgba(255, 143, 173, 0.4);
|
||||
}
|
||||
.btn-sakura:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
/* ── Soft Input ───────────────────────────────────────────── */
|
||||
.input-soft {
|
||||
@apply rounded-2xl border border-pink-200 px-4 py-2
|
||||
focus:border-pink-400 focus:outline-none focus:ring-2 focus:ring-pink-200
|
||||
w-full bg-white text-sm;
|
||||
}
|
||||
|
||||
/* ── Kanban Column ────────────────────────────────────────── */
|
||||
.kanban-col {
|
||||
@apply rounded-3xl p-4 min-h-48 flex-1;
|
||||
min-width: 240px;
|
||||
}
|
||||
|
||||
/* ── Nav Items ────────────────────────────────────────────── */
|
||||
.nav-item {
|
||||
@apply flex items-center gap-3 px-4 py-3 rounded-2xl text-gray-600
|
||||
hover:bg-pink-50 hover:text-pink-600 transition-all duration-150 font-medium;
|
||||
text-decoration: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.nav-item.active {
|
||||
@apply bg-pink-100 text-pink-600;
|
||||
}
|
||||
|
||||
/* ── Stat Pill ────────────────────────────────────────────── */
|
||||
.stat-pill {
|
||||
@apply rounded-3xl shadow-sm bg-white border border-pink-100 p-4 flex flex-col gap-1;
|
||||
}
|
||||
|
||||
/* ── Badge Sakura ─────────────────────────────────────────── */
|
||||
.badge-sakura {
|
||||
@apply rounded-full text-xs font-bold px-2 py-0.5 text-white;
|
||||
background-color: #FFB7C5;
|
||||
}
|
||||
|
||||
/* ── Badge variants ───────────────────────────────────────── */
|
||||
.badge { @apply rounded-full text-xs font-semibold px-2.5 py-0.5 inline-block; }
|
||||
.badge-ghost { @apply bg-gray-100 text-gray-500; }
|
||||
.badge-info { @apply bg-blue-100 text-blue-600; }
|
||||
.badge-success { @apply bg-green-100 text-green-600; }
|
||||
.badge-error { @apply bg-red-100 text-red-600; }
|
||||
.badge-warning { @apply bg-amber-100 text-amber-600; }
|
||||
.badge-neutral { @apply bg-gray-100 text-gray-500; }
|
||||
|
||||
/* ── Table ────────────────────────────────────────────────── */
|
||||
.table { @apply w-full border-collapse text-sm; }
|
||||
.table th { @apply text-left py-3 px-4 text-xs font-bold text-gray-500 uppercase tracking-wide; }
|
||||
.table td { @apply py-3 px-4 text-gray-700; }
|
||||
|
||||
/* ── Animations ───────────────────────────────────────────── */
|
||||
@keyframes paw-bounce {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-6px); }
|
||||
}
|
||||
.paw-bounce { animation: paw-bounce 0.4s ease-in-out; }
|
||||
|
||||
/* ── Mobile touch targets ─────────────────────────────────── */
|
||||
@media (max-width: 1023px) {
|
||||
.nav-item { @apply py-3.5; }
|
||||
button, a { min-height: 36px; }
|
||||
}
|
||||
57
resources/js/app.js
Normal file
57
resources/js/app.js
Normal file
@@ -0,0 +1,57 @@
|
||||
import './bootstrap';
|
||||
import Alpine from 'alpinejs';
|
||||
import sort from '@alpinejs/sort';
|
||||
|
||||
Alpine.plugin(sort);
|
||||
window.Alpine = Alpine;
|
||||
Alpine.start();
|
||||
|
||||
// Meow sound toggle (stored in localStorage)
|
||||
window.KolManager = {
|
||||
meowEnabled: localStorage.getItem('meow') !== 'false',
|
||||
|
||||
toggleMeow() {
|
||||
this.meowEnabled = !this.meowEnabled;
|
||||
localStorage.setItem('meow', this.meowEnabled);
|
||||
},
|
||||
|
||||
playMeow() {
|
||||
if (!this.meowEnabled) return;
|
||||
const ctx = new (window.AudioContext || window.webkitAudioContext)();
|
||||
const o = ctx.createOscillator();
|
||||
const g = ctx.createGain();
|
||||
o.connect(g);
|
||||
g.connect(ctx.destination);
|
||||
o.type = 'sine';
|
||||
o.frequency.setValueAtTime(880, ctx.currentTime);
|
||||
o.frequency.exponentialRampToValueAtTime(1200, ctx.currentTime + 0.05);
|
||||
o.frequency.exponentialRampToValueAtTime(900, ctx.currentTime + 0.15);
|
||||
g.gain.setValueAtTime(0.3, ctx.currentTime);
|
||||
g.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.3);
|
||||
o.start(ctx.currentTime);
|
||||
o.stop(ctx.currentTime + 0.3);
|
||||
},
|
||||
|
||||
notify(msg) {
|
||||
this.playMeow();
|
||||
const el = document.createElement('div');
|
||||
el.className = 'fixed top-4 right-4 z-50 cat-card px-5 py-3 flex items-center gap-2 shadow-lg border border-pink-200 animate-bounce';
|
||||
el.innerHTML = `<span class="text-xl">🐱</span><span class="text-sm font-medium text-pink-700">${msg}</span>`;
|
||||
document.body.appendChild(el);
|
||||
setTimeout(() => el.remove(), 3500);
|
||||
},
|
||||
};
|
||||
|
||||
// Flash message auto-dismiss
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const flash = document.getElementById('flash-message');
|
||||
if (flash) {
|
||||
window.KolManager.playMeow();
|
||||
setTimeout(() => {
|
||||
flash.style.opacity = '0';
|
||||
flash.style.transform = 'translateY(-10px)';
|
||||
flash.style.transition = 'all 0.4s ease';
|
||||
setTimeout(() => flash.remove(), 400);
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
4
resources/js/bootstrap.js
vendored
Normal file
4
resources/js/bootstrap.js
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
import axios from 'axios';
|
||||
window.axios = axios;
|
||||
|
||||
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
|
||||
105
resources/views/clients/create.blade.php
Normal file
105
resources/views/clients/create.blade.php
Normal file
@@ -0,0 +1,105 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Add Client')
|
||||
@section('page-title', 'Add New Client 🐾')
|
||||
@section('page-subtitle', 'Fill in the contact details below')
|
||||
|
||||
@section('content')
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<div class="cat-card p-4 lg:p-8">
|
||||
<form action="{{ route('clients.store') }}" method="POST" class="space-y-5">
|
||||
@csrf
|
||||
|
||||
{{-- Basic Info --}}
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1 uppercase tracking-wide">Basic Info</label>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Name <span class="text-pink-400">*</span></label>
|
||||
<input type="text" name="name" value="{{ old('name') }}" class="input-soft" placeholder="Brand / Contact name" required>
|
||||
@error('name') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Email</label>
|
||||
<input type="email" name="email" value="{{ old('email') }}" class="input-soft" placeholder="hello@brand.com">
|
||||
@error('email') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Phone</label>
|
||||
<input type="text" name="phone" value="{{ old('phone') }}" class="input-soft" placeholder="+62 812 xxxx">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Company</label>
|
||||
<input type="text" name="company" value="{{ old('company') }}" class="input-soft" placeholder="Brand / Company name">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Status</label>
|
||||
<select name="status" class="input-soft">
|
||||
@foreach($statuses as $s)
|
||||
<option value="{{ $s->value }}" {{ old('status', 'prospect') === $s->value ? 'selected' : '' }}>
|
||||
{{ $s->label() }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Social Handles --}}
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">📱 Social Handles</label>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-500 mb-1">📸 Instagram</label>
|
||||
<input type="text" name="ig_handle" value="{{ old('ig_handle') }}" class="input-soft" placeholder="@handle">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-500 mb-1">🎵 TikTok</label>
|
||||
<input type="text" name="tiktok_handle" value="{{ old('tiktok_handle') }}" class="input-soft" placeholder="@handle">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-500 mb-1">▶️ YouTube</label>
|
||||
<input type="text" name="youtube_handle" value="{{ old('youtube_handle') }}" class="input-soft" placeholder="Channel name">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Shipping Address --}}
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">📍 Shipping / PR Address</label>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="col-span-2">
|
||||
<input type="text" name="address_line1" value="{{ old('address_line1') }}" class="input-soft" placeholder="Street address">
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<input type="text" name="address_line2" value="{{ old('address_line2') }}" class="input-soft" placeholder="Apartment, suite, etc.">
|
||||
</div>
|
||||
<div>
|
||||
<input type="text" name="city" value="{{ old('city') }}" class="input-soft" placeholder="City">
|
||||
</div>
|
||||
<div>
|
||||
<input type="text" name="state" value="{{ old('state') }}" class="input-soft" placeholder="Province">
|
||||
</div>
|
||||
<div>
|
||||
<input type="text" name="postal_code" value="{{ old('postal_code') }}" class="input-soft" placeholder="Postal code">
|
||||
</div>
|
||||
<div>
|
||||
<input type="text" name="country" value="{{ old('country', 'Indonesia') }}" class="input-soft" placeholder="Country">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Notes --}}
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Notes</label>
|
||||
<textarea name="notes" rows="3" class="input-soft resize-none" placeholder="Any extra notes...">{{ old('notes') }}</textarea>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-3 pt-1">
|
||||
<button type="submit" class="btn-sakura flex-1 py-3">🐱 Save Client</button>
|
||||
<a href="{{ route('clients.index') }}" class="flex-1 py-3 text-center rounded-full border border-pink-200 text-gray-600 hover:bg-pink-50 font-semibold text-sm">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
108
resources/views/clients/edit.blade.php
Normal file
108
resources/views/clients/edit.blade.php
Normal file
@@ -0,0 +1,108 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Edit ' . $client->name)
|
||||
@section('page-title', 'Edit Client 🐾')
|
||||
@section('page-subtitle', $client->name)
|
||||
|
||||
@section('content')
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<div class="cat-card p-4 lg:p-8">
|
||||
<form action="{{ route('clients.update', $client) }}" method="POST" class="space-y-5">
|
||||
@csrf @method('PUT')
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Name <span class="text-pink-400">*</span></label>
|
||||
<input type="text" name="name" value="{{ old('name', $client->name) }}" class="input-soft" required>
|
||||
@error('name') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Email</label>
|
||||
<input type="email" name="email" value="{{ old('email', $client->email) }}" class="input-soft">
|
||||
@error('email') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Phone</label>
|
||||
<input type="text" name="phone" value="{{ old('phone', $client->phone) }}" class="input-soft">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Company</label>
|
||||
<input type="text" name="company" value="{{ old('company', $client->company) }}" class="input-soft">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Status</label>
|
||||
<select name="status" class="input-soft">
|
||||
@foreach($statuses as $s)
|
||||
<option value="{{ $s->value }}" {{ old('status', $client->status->value) === $s->value ? 'selected' : '' }}>{{ $s->label() }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-sm font-bold text-gray-600 mb-3">📱 Social Handles</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-500 mb-1">📸 Instagram</label>
|
||||
<input type="text" name="ig_handle" value="{{ old('ig_handle', $client->ig_handle) }}"
|
||||
class="input-soft text-sm" placeholder="@handle">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-500 mb-1">🎵 TikTok</label>
|
||||
<input type="text" name="tiktok_handle" value="{{ old('tiktok_handle', $client->tiktok_handle) }}"
|
||||
class="input-soft text-sm" placeholder="@handle">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-500 mb-1">▶️ YouTube</label>
|
||||
<input type="text" name="youtube_handle" value="{{ old('youtube_handle', $client->youtube_handle) }}"
|
||||
class="input-soft text-sm">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-sm font-bold text-gray-600 mb-3">📍 Shipping Address</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div class="sm:col-span-2">
|
||||
<input type="text" name="address_line1" value="{{ old('address_line1', $client->address_line1) }}"
|
||||
class="input-soft" placeholder="Street address">
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<input type="text" name="address_line2" value="{{ old('address_line2', $client->address_line2) }}"
|
||||
class="input-soft" placeholder="Apt, suite...">
|
||||
</div>
|
||||
<div>
|
||||
<input type="text" name="city" value="{{ old('city', $client->city) }}"
|
||||
class="input-soft" placeholder="City">
|
||||
</div>
|
||||
<div>
|
||||
<input type="text" name="state" value="{{ old('state', $client->state) }}"
|
||||
class="input-soft" placeholder="Province">
|
||||
</div>
|
||||
<div>
|
||||
<input type="text" name="postal_code" value="{{ old('postal_code', $client->postal_code) }}"
|
||||
class="input-soft" placeholder="Postal code">
|
||||
</div>
|
||||
<div>
|
||||
<input type="text" name="country" value="{{ old('country', $client->country) }}"
|
||||
class="input-soft" placeholder="Country">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Notes</label>
|
||||
<textarea name="notes" rows="3" class="input-soft resize-none">{{ old('notes', $client->notes) }}</textarea>
|
||||
</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('clients.show', $client) }}"
|
||||
class="flex-1 py-3 text-center rounded-full border border-pink-200 text-gray-600 hover:bg-pink-50 font-semibold text-sm">
|
||||
Cancel
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
92
resources/views/clients/index.blade.php
Normal file
92
resources/views/clients/index.blade.php
Normal file
@@ -0,0 +1,92 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Clients')
|
||||
@section('page-title', 'Clients / CRM 👥')
|
||||
@section('page-subtitle', 'Manage your brand partners and contacts')
|
||||
|
||||
@section('content')
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-5">
|
||||
<div class="relative">
|
||||
<input type="text" placeholder="Search clients..." class="input-soft pl-9 text-sm"
|
||||
oninput="filterClients(this.value)" id="search-input">
|
||||
<span class="absolute left-3 top-2.5 text-gray-400 text-sm">🔍</span>
|
||||
</div>
|
||||
<a href="{{ route('clients.create') }}" class="btn-sakura text-sm text-center">＋ Add Client</a>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4" id="clients-grid">
|
||||
@forelse($clients as $client)
|
||||
<div class="cat-card p-4 flex flex-col gap-3 hover:shadow-md transition-shadow duration-200"
|
||||
data-name="{{ strtolower($client->name) }}">
|
||||
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-11 h-11 rounded-2xl flex items-center justify-center text-white font-bold text-base shadow-sm shrink-0"
|
||||
style="background: linear-gradient(135deg, #FFB7C5, #E8D5F5);">
|
||||
{{ $client->initials }}
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<h3 class="font-bold text-gray-800 text-sm truncate">{{ $client->name }}</h3>
|
||||
<span class="badge {{ $client->status->badgeClass() }} text-xs shrink-0">{{ $client->status->label() }}</span>
|
||||
</div>
|
||||
@if($client->company)
|
||||
<div class="text-xs text-gray-400 truncate">{{ $client->company }}</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
@if($client->ig_handle)
|
||||
<span class="text-xs bg-pink-50 text-pink-600 px-2 py-0.5 rounded-full">📸 {{ $client->ig_handle }}</span>
|
||||
@endif
|
||||
@if($client->tiktok_handle)
|
||||
<span class="text-xs bg-purple-50 text-purple-600 px-2 py-0.5 rounded-full">🎵 {{ $client->tiktok_handle }}</span>
|
||||
@endif
|
||||
@if($client->youtube_handle)
|
||||
<span class="text-xs bg-red-50 text-red-600 px-2 py-0.5 rounded-full">▶️ {{ $client->youtube_handle }}</span>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="flex gap-3 text-xs text-gray-500">
|
||||
<span>📅 {{ $client->events_count }}</span>
|
||||
<span>🧾 {{ $client->invoices_count }}</span>
|
||||
<span>🎬 {{ $client->content_briefs_count }}</span>
|
||||
</div>
|
||||
|
||||
@if($client->email || $client->city)
|
||||
<div class="text-xs text-gray-400 space-y-0.5">
|
||||
@if($client->email) <div class="truncate">✉️ {{ $client->email }}</div> @endif
|
||||
@if($client->city) <div>📍 {{ $client->city }}{{ $client->country ? ', '.$client->country : '' }}</div> @endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="flex gap-2 pt-2 border-t border-pink-50">
|
||||
<a href="{{ route('clients.show', $client) }}" class="btn-sakura text-xs py-1.5 flex-1 text-center">View</a>
|
||||
<a href="{{ route('clients.edit', $client) }}" class="flex-1 text-center text-xs py-1.5 px-3 rounded-full border border-pink-200 text-gray-600 hover:bg-pink-50">Edit</a>
|
||||
<form action="{{ route('clients.destroy', $client) }}" method="POST" onsubmit="return confirm('Remove this client?')">
|
||||
@csrf @method('DELETE')
|
||||
<button class="text-xs py-1.5 px-3 rounded-full border border-red-100 text-red-400 hover:bg-red-50">Del</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="col-span-full text-center py-16 text-gray-400">
|
||||
<span class="text-5xl block mb-3">🐱</span>
|
||||
<p class="text-base font-medium">No clients yet!</p>
|
||||
<a href="{{ route('clients.create') }}" class="btn-sakura mt-4 inline-block">Add your first client</a>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
{{ $clients->links() }}
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
function filterClients(query) {
|
||||
document.querySelectorAll('#clients-grid > div[data-name]').forEach(card => {
|
||||
card.style.display = card.dataset.name.includes(query.toLowerCase()) ? '' : 'none';
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
@endsection
|
||||
138
resources/views/clients/show.blade.php
Normal file
138
resources/views/clients/show.blade.php
Normal file
@@ -0,0 +1,138 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', $client->name)
|
||||
@section('page-title', $client->name)
|
||||
@section('page-subtitle', $client->company ?? $client->email ?? 'Client Profile')
|
||||
|
||||
@section('content')
|
||||
<div class="max-w-5xl mx-auto">
|
||||
|
||||
{{-- Profile Header --}}
|
||||
<div class="cat-card p-4 mb-4">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-14 h-14 rounded-3xl flex items-center justify-center text-white font-bold text-xl shadow shrink-0"
|
||||
style="background: linear-gradient(135deg, #FFB7C5, #E8D5F5);">
|
||||
{{ $client->initials }}
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h2 class="text-lg font-bold text-gray-800 leading-tight">{{ $client->name }}</h2>
|
||||
@if($client->company) <p class="text-sm text-gray-500">{{ $client->company }}</p> @endif
|
||||
<div class="flex gap-2 mt-2 flex-wrap">
|
||||
<span class="badge {{ $client->status->badgeClass() }}">{{ $client->status->label() }}</span>
|
||||
@if($client->ig_handle)
|
||||
<span class="text-xs bg-pink-50 text-pink-600 px-2 py-1 rounded-full">📸 {{ $client->ig_handle }}</span>
|
||||
@endif
|
||||
@if($client->tiktok_handle)
|
||||
<span class="text-xs bg-purple-50 text-purple-600 px-2 py-1 rounded-full">🎵 {{ $client->tiktok_handle }}</span>
|
||||
@endif
|
||||
@if($client->youtube_handle)
|
||||
<span class="text-xs bg-red-50 text-red-600 px-2 py-1 rounded-full">▶️ {{ $client->youtube_handle }}</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{-- Action buttons below on mobile, inline on larger screens --}}
|
||||
<div class="flex gap-2 mt-3">
|
||||
<a href="{{ route('clients.edit', $client) }}" class="btn-sakura text-sm px-4 py-2">Edit</a>
|
||||
<a href="{{ route('invoices.create') }}?client={{ $client->id }}"
|
||||
class="text-sm px-4 py-2 rounded-full border border-pink-200 text-gray-600 hover:bg-pink-50 font-semibold">
|
||||
🧾 New Invoice
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
|
||||
{{-- Contact Info --}}
|
||||
<div class="cat-card p-4">
|
||||
<h3 class="font-bold text-gray-700 mb-3 text-sm flex items-center gap-2">📋 Contact Info</h3>
|
||||
<div class="space-y-2 text-sm">
|
||||
@if($client->email)
|
||||
<div class="flex gap-2 items-start">
|
||||
<span class="text-gray-400 shrink-0">✉️</span>
|
||||
<a href="mailto:{{ $client->email }}" class="text-pink-500 hover:underline break-all">{{ $client->email }}</a>
|
||||
</div>
|
||||
@endif
|
||||
@if($client->phone)
|
||||
<div class="flex gap-2 items-start">
|
||||
<span class="text-gray-400 shrink-0">📞</span>
|
||||
<span>{{ $client->phone }}</span>
|
||||
</div>
|
||||
@endif
|
||||
@if($client->full_address)
|
||||
<div class="flex gap-2 items-start">
|
||||
<span class="text-gray-400 shrink-0">📍</span>
|
||||
<span class="text-gray-600">{{ $client->full_address }}</span>
|
||||
</div>
|
||||
@endif
|
||||
@if($client->notes)
|
||||
<div class="mt-3 pt-3 border-t border-pink-50">
|
||||
<p class="text-xs font-semibold text-gray-500 mb-1">Notes</p>
|
||||
<p class="text-gray-600 text-xs">{{ $client->notes }}</p>
|
||||
</div>
|
||||
@endif
|
||||
@if(!$client->email && !$client->phone && !$client->full_address && !$client->notes)
|
||||
<p class="text-xs text-gray-400">No contact info yet.</p>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Recent Events --}}
|
||||
<div class="cat-card p-4">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h3 class="font-bold text-gray-700 text-sm flex items-center gap-2">📅 Events</h3>
|
||||
<a href="{{ route('schedule.index') }}" class="text-xs text-pink-500">All →</a>
|
||||
</div>
|
||||
@forelse($client->events as $event)
|
||||
<div class="py-2 border-b border-pink-50 last:border-0 text-sm">
|
||||
<div class="font-medium text-gray-700 truncate">{{ $event->title }}</div>
|
||||
<div class="text-xs text-gray-400">{{ $event->start_time->format('d M Y, H:i') }}</div>
|
||||
</div>
|
||||
@empty
|
||||
<p class="text-xs text-gray-400">No events yet.</p>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
{{-- Recent Invoices --}}
|
||||
<div class="cat-card p-4">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h3 class="font-bold text-gray-700 text-sm flex items-center gap-2">🧾 Invoices</h3>
|
||||
<a href="{{ route('invoices.index') }}" class="text-xs text-pink-500">All →</a>
|
||||
</div>
|
||||
@forelse($client->invoices as $invoice)
|
||||
<div class="py-2 border-b border-pink-50 last:border-0 text-sm flex justify-between gap-2">
|
||||
<div class="min-w-0">
|
||||
<div class="font-medium text-gray-700 truncate">{{ $invoice->invoice_number }}</div>
|
||||
<div class="text-xs text-gray-400">Due {{ $invoice->due_date->format('d M Y') }}</div>
|
||||
</div>
|
||||
<div class="text-right shrink-0">
|
||||
<div class="font-bold text-gray-700 text-xs">{{ $invoice->formatted_total }}</div>
|
||||
<span class="badge {{ $invoice->status->badgeClass() }} badge-xs">{{ $invoice->status->label() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<p class="text-xs text-gray-400">No invoices yet.</p>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Content Briefs --}}
|
||||
@if($client->contentBriefs->isNotEmpty())
|
||||
<div class="cat-card p-4 mt-4">
|
||||
<h3 class="font-bold text-gray-700 mb-3 text-sm flex items-center gap-2">🎬 Content Briefs</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
@foreach($client->contentBriefs as $brief)
|
||||
<a href="{{ route('content.show', $brief) }}"
|
||||
class="bg-pink-50 rounded-2xl p-3 hover:bg-pink-100 transition-colors block">
|
||||
<div class="text-xs font-bold text-pink-600 flex items-center gap-1">
|
||||
{{ $brief->platform_icon }} {{ ucfirst($brief->platform) }}
|
||||
</div>
|
||||
<div class="font-semibold text-gray-700 text-sm truncate mt-1">{{ $brief->title }}</div>
|
||||
<div class="text-xs text-gray-400 mt-0.5">{{ $brief->status->label() }}</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endsection
|
||||
107
resources/views/content/create.blade.php
Normal file
107
resources/views/content/create.blade.php
Normal file
@@ -0,0 +1,107 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'New Content Brief')
|
||||
@section('page-title', 'New Content Brief 🎬')
|
||||
|
||||
@section('content')
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<div class="cat-card p-4 lg:p-8">
|
||||
<form action="{{ route('content.store') }}" method="POST" class="space-y-4">
|
||||
@csrf
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Title <span class="text-pink-400">*</span></label>
|
||||
<input type="text" name="title" value="{{ old('title') }}" class="input-soft" required
|
||||
placeholder="e.g. GRWM ft. Brand X Skincare">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Platform <span class="text-pink-400">*</span></label>
|
||||
<select name="platform" class="input-soft" required>
|
||||
<option value="instagram">📸 Instagram</option>
|
||||
<option value="tiktok">🎵 TikTok</option>
|
||||
<option value="youtube">▶️ YouTube</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Content Type</label>
|
||||
<input type="text" name="content_type" value="{{ old('content_type') }}" class="input-soft"
|
||||
placeholder="Reel, Short, GRWM, Story...">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Status</label>
|
||||
<select name="status" class="input-soft">
|
||||
@foreach($statuses as $s)
|
||||
<option value="{{ $s->value }}" {{ old('status', request('status', 'drafting')) === $s->value ? 'selected' : '' }}>
|
||||
{{ $s->icon() }} {{ $s->label() }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Client</label>
|
||||
<select name="client_id" class="input-soft">
|
||||
<option value="">— None —</option>
|
||||
@foreach($clients as $client)
|
||||
<option value="{{ $client->id }}">{{ $client->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Target Date</label>
|
||||
<input type="date" name="target_date" value="{{ old('target_date') }}" class="input-soft">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Storyline Maker --}}
|
||||
<div class="bg-pink-50 rounded-2xl p-4 space-y-3">
|
||||
<h3 class="font-bold text-gray-700 flex items-center gap-2 text-sm">✍️ Storyline Maker</h3>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-pink-600 mb-1">🎣 HOOK — Open with a bang!</label>
|
||||
<textarea name="hook" rows="2" class="input-soft text-sm resize-none bg-white"
|
||||
placeholder="e.g. 'POV: you finally found the moisturizer that doesn't break you out...'">{{ old('hook') }}</textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-pink-600 mb-1">📖 BODY — Deliver the story</label>
|
||||
<textarea name="body" rows="3" class="input-soft text-sm resize-none bg-white"
|
||||
placeholder="The main content — what happens, product demo, value...">{{ old('body') }}</textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-pink-600 mb-1">📣 CTA — Call to Action</label>
|
||||
<textarea name="cta" rows="2" class="input-soft text-sm resize-none bg-white"
|
||||
placeholder="e.g. 'Link in bio to shop! Use code KITTY for 15% off'">{{ old('cta') }}</textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-500 mb-1">📝 Full Script (optional)</label>
|
||||
<textarea name="script" rows="4" class="input-soft text-sm resize-none bg-white"
|
||||
placeholder="Complete spoken script, timestamps, shot list...">{{ old('script') }}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Caption</label>
|
||||
<textarea name="caption" rows="3" class="input-soft resize-none"
|
||||
placeholder="Post caption text...">{{ old('caption') }}</textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Hashtags</label>
|
||||
<input type="text" name="hashtags" value="{{ old('hashtags') }}" class="input-soft"
|
||||
placeholder="#skincare #grwm #fyp">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Notes</label>
|
||||
<textarea name="notes" rows="2" class="input-soft resize-none"
|
||||
placeholder="Any extra notes, brand requirements...">{{ old('notes') }}</textarea>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-3 pt-1">
|
||||
<button type="submit" class="btn-sakura flex-1 py-3">🎬 Create Brief</button>
|
||||
<a href="{{ route('content.index') }}"
|
||||
class="flex-1 py-3 text-center rounded-full border border-pink-200 text-gray-600 hover:bg-pink-50 font-semibold text-sm">
|
||||
Cancel
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
103
resources/views/content/edit.blade.php
Normal file
103
resources/views/content/edit.blade.php
Normal file
@@ -0,0 +1,103 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Edit Brief')
|
||||
@section('page-title', 'Edit Content Brief 🎬')
|
||||
|
||||
@section('content')
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<div class="cat-card p-4 lg:p-8">
|
||||
<form action="{{ route('content.update', $brief) }}" method="POST" class="space-y-4">
|
||||
@csrf @method('PUT')
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Title</label>
|
||||
<input type="text" name="title" value="{{ old('title', $brief->title) }}" class="input-soft" required>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Platform</label>
|
||||
<select name="platform" class="input-soft">
|
||||
@foreach(['instagram','tiktok','youtube'] as $p)
|
||||
<option value="{{ $p }}" {{ old('platform', $brief->platform) === $p ? 'selected' : '' }}>{{ ucfirst($p) }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Content Type</label>
|
||||
<input type="text" name="content_type" value="{{ old('content_type', $brief->content_type) }}" class="input-soft">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Status</label>
|
||||
<select name="status" class="input-soft">
|
||||
@foreach($statuses as $s)
|
||||
<option value="{{ $s->value }}" {{ old('status', $brief->status->value) === $s->value ? 'selected' : '' }}>{{ $s->icon() }} {{ $s->label() }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Client</label>
|
||||
<select name="client_id" class="input-soft">
|
||||
<option value="">— None —</option>
|
||||
@foreach($clients as $client)
|
||||
<option value="{{ $client->id }}" {{ old('client_id', $brief->client_id) == $client->id ? 'selected' : '' }}>{{ $client->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Target Date</label>
|
||||
<input type="date" name="target_date" value="{{ old('target_date', $brief->target_date?->toDateString()) }}" class="input-soft">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Posted Date</label>
|
||||
<input type="date" name="posted_date" value="{{ old('posted_date', $brief->posted_date?->toDateString()) }}" class="input-soft">
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Posted URL</label>
|
||||
<input type="url" name="posted_url" value="{{ old('posted_url', $brief->posted_url) }}" class="input-soft" placeholder="https://...">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-pink-50 rounded-2xl p-4 space-y-3">
|
||||
<h3 class="font-bold text-gray-700 text-sm">✍️ Storyline</h3>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-pink-600 mb-1 block">🎣 Hook</label>
|
||||
<textarea name="hook" rows="2" class="input-soft text-sm resize-none bg-white">{{ old('hook', $brief->hook) }}</textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-pink-600 mb-1 block">📖 Body</label>
|
||||
<textarea name="body" rows="3" class="input-soft text-sm resize-none bg-white">{{ old('body', $brief->body) }}</textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-pink-600 mb-1 block">📣 CTA</label>
|
||||
<textarea name="cta" rows="2" class="input-soft text-sm resize-none bg-white">{{ old('cta', $brief->cta) }}</textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 mb-1 block">📝 Script</label>
|
||||
<textarea name="script" rows="4" class="input-soft text-sm resize-none bg-white">{{ old('script', $brief->script) }}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Caption</label>
|
||||
<textarea name="caption" rows="3" class="input-soft resize-none">{{ old('caption', $brief->caption) }}</textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Hashtags</label>
|
||||
<input type="text" name="hashtags" value="{{ old('hashtags', $brief->hashtags) }}" class="input-soft">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Notes</label>
|
||||
<textarea name="notes" rows="2" class="input-soft resize-none">{{ old('notes', $brief->notes) }}</textarea>
|
||||
</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('content.show', $brief) }}"
|
||||
class="flex-1 py-3 text-center rounded-full border border-pink-200 text-gray-600 hover:bg-pink-50 font-semibold text-sm">
|
||||
Cancel
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
112
resources/views/content/index.blade.php
Normal file
112
resources/views/content/index.blade.php
Normal file
@@ -0,0 +1,112 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Content Board')
|
||||
@section('page-title', 'Content Board 🎬')
|
||||
@section('page-subtitle', 'Drag cards between columns to update status')
|
||||
|
||||
@section('content')
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-5">
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
@foreach(['instagram','tiktok','youtube'] as $p)
|
||||
<a href="{{ request()->fullUrlWithQuery(['platform' => $p]) }}"
|
||||
class="px-3 py-1.5 rounded-full text-xs font-semibold transition-colors
|
||||
{{ request('platform') === $p ? 'text-white' : 'bg-white text-gray-500 hover:bg-pink-50 border border-pink-100' }}"
|
||||
style="{{ request('platform') === $p ? 'background:#FFB7C5' : '' }}">
|
||||
{{ ['instagram'=>'📸','tiktok'=>'🎵','youtube'=>'▶️'][$p] }} {{ ucfirst($p) }}
|
||||
</a>
|
||||
@endforeach
|
||||
@if(request('platform'))
|
||||
<a href="{{ route('content.index') }}" class="px-3 py-1.5 rounded-full text-xs text-gray-400 hover:text-gray-600 border border-gray-200 bg-white">✕ Clear</a>
|
||||
@endif
|
||||
</div>
|
||||
<a href="{{ route('content.create') }}" class="btn-sakura text-sm shrink-0">＋ New Brief</a>
|
||||
</div>
|
||||
|
||||
{{--
|
||||
Mobile : grid grid-cols-1 → columns stack vertically, each full width
|
||||
Desktop : flex flex-nowrap → columns in a single horizontal row, each flex-1
|
||||
x-sort:group is on the INNER items div (not the column div) to avoid
|
||||
SortableJS mutating the outer layout container.
|
||||
--}}
|
||||
<div class="grid grid-cols-1 gap-4 lg:flex lg:flex-nowrap lg:gap-4"
|
||||
x-data="kanban()">
|
||||
@foreach($columns as $col)
|
||||
@php $status = $col['status']; @endphp
|
||||
|
||||
{{-- Column shell — layout only, NOT the sort target --}}
|
||||
<div class="{{ $status->colorClass() }} flex flex-col w-full lg:flex-1 lg:min-w-36 rounded-2xl p-3"
|
||||
data-status="{{ $status->value }}">
|
||||
|
||||
{{-- Column header --}}
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-base">{{ $status->icon() }}</span>
|
||||
<span class="font-bold text-gray-700 text-sm">{{ $status->label() }}</span>
|
||||
</div>
|
||||
<span class="text-xs bg-white rounded-full px-2 py-0.5 font-bold text-gray-500 shadow-sm">{{ count($col['items']) }}</span>
|
||||
</div>
|
||||
|
||||
{{-- Sortable items container --}}
|
||||
<div class="flex flex-col gap-2 flex-1 min-h-12"
|
||||
x-sort:group="kanban"
|
||||
@sort="moved($event, '{{ $status->value }}')"
|
||||
data-col-status="{{ $status->value }}">
|
||||
|
||||
@foreach($col['items'] as $brief)
|
||||
<div class="bg-white rounded-2xl p-3 shadow-sm border border-pink-50 select-none
|
||||
cursor-grab active:cursor-grabbing hover:shadow-md transition-shadow"
|
||||
x-sort:item="{{ $brief->id }}"
|
||||
data-id="{{ $brief->id }}">
|
||||
<div class="flex items-start gap-2 mb-1.5">
|
||||
<span class="text-sm shrink-0">{{ $brief->platform_icon }}</span>
|
||||
<a href="{{ route('content.show', $brief) }}"
|
||||
class="font-semibold text-gray-800 text-xs leading-tight hover:text-pink-500 line-clamp-2 flex-1">
|
||||
{{ $brief->title }}
|
||||
</a>
|
||||
</div>
|
||||
@if($brief->client)
|
||||
<div class="text-xs text-gray-400 mb-1">👥 {{ $brief->client->name }}</div>
|
||||
@endif
|
||||
@if($brief->target_date)
|
||||
<div class="text-xs {{ $brief->target_date->isPast() && $brief->status->value !== 'posted' ? 'text-red-400 font-bold' : 'text-gray-400' }}">
|
||||
📅 {{ $brief->target_date->format('d M') }}
|
||||
</div>
|
||||
@endif
|
||||
<div class="flex justify-end mt-1.5">
|
||||
<a href="{{ route('content.edit', $brief) }}" class="text-xs text-gray-400 hover:text-pink-500">Edit</a>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
{{-- Add button --}}
|
||||
<a href="{{ route('content.create') }}?status={{ $status->value }}"
|
||||
class="mt-3 text-xs text-gray-400 hover:text-pink-500 text-center py-2
|
||||
border-2 border-dashed border-pink-100 rounded-2xl hover:border-pink-300 transition-colors block">
|
||||
＋ Add
|
||||
</a>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
function kanban() {
|
||||
return {
|
||||
moved(event, targetStatus) {
|
||||
const id = event.item?.dataset?.id;
|
||||
if (!id) return;
|
||||
fetch(`/content/${id}/status`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
||||
},
|
||||
body: JSON.stringify({ status: targetStatus }),
|
||||
}).then(r => { if (r.ok) window.KolManager.notify('Status updated! 🎬'); });
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
@endsection
|
||||
93
resources/views/content/show.blade.php
Normal file
93
resources/views/content/show.blade.php
Normal file
@@ -0,0 +1,93 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', $brief->title)
|
||||
@section('page-title', $brief->title)
|
||||
@section('page-subtitle', $brief->platform_icon . ' ' . ucfirst($brief->platform) . ' · ' . $brief->status->label())
|
||||
|
||||
@section('content')
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="flex gap-3 mb-5">
|
||||
<a href="{{ route('content.edit', $brief) }}" class="btn-sakura">Edit</a>
|
||||
<form action="{{ route('content.destroy', $brief) }}" method="POST" onsubmit="return confirm('Delete this brief?')">
|
||||
@csrf @method('DELETE')
|
||||
<button class="btn btn-ghost rounded-full text-error">Delete</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
|
||||
{{-- Main Brief --}}
|
||||
<div class="lg:col-span-2 space-y-4">
|
||||
{{-- Storyline --}}
|
||||
@foreach([['🎣', 'Hook', $brief->hook], ['📖', 'Body', $brief->body], ['📣', 'CTA', $brief->cta], ['📝', 'Script', $brief->script]] as [$icon, $label, $value])
|
||||
@if($value)
|
||||
<div class="cat-card p-5">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-lg">{{ $icon }}</span>
|
||||
<h3 class="font-bold text-gray-700">{{ $label }}</h3>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 whitespace-pre-wrap leading-relaxed">{{ $value }}</p>
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
@if($brief->caption)
|
||||
<div class="cat-card p-5">
|
||||
<h3 class="font-bold text-gray-700 mb-2">Caption</h3>
|
||||
<p class="text-sm text-gray-600 whitespace-pre-wrap">{{ $brief->caption }}</p>
|
||||
@if($brief->hashtags)
|
||||
<div class="mt-2 text-xs text-pink-500">{{ $brief->hashtags }}</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- Sidebar --}}
|
||||
<div class="space-y-4">
|
||||
<div class="cat-card p-5 space-y-3 text-sm">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">Platform</span>
|
||||
<span class="font-medium">{{ $brief->platform_icon }} {{ ucfirst($brief->platform) }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">Type</span>
|
||||
<span class="font-medium">{{ $brief->content_type ?? '—' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-gray-500">Status</span>
|
||||
<span class="badge {{ $brief->status->badgeClass() }}">{{ $brief->status->label() }}</span>
|
||||
</div>
|
||||
@if($brief->client)
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">Client</span>
|
||||
<a href="{{ route('clients.show', $brief->client) }}" class="font-medium text-pink-500 hover:underline">{{ $brief->client->name }}</a>
|
||||
</div>
|
||||
@endif
|
||||
@if($brief->target_date)
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">Target</span>
|
||||
<span class="font-medium">{{ $brief->target_date->format('d M Y') }}</span>
|
||||
</div>
|
||||
@endif
|
||||
@if($brief->posted_date)
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">Posted</span>
|
||||
<span class="font-medium text-green-600">{{ $brief->posted_date->format('d M Y') }}</span>
|
||||
</div>
|
||||
@endif
|
||||
@if($brief->posted_url)
|
||||
<div>
|
||||
<a href="{{ $brief->posted_url }}" target="_blank" class="btn-sakura text-xs px-4 py-1.5 w-full text-center block">🔗 View Post</a>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@if($brief->notes)
|
||||
<div class="cat-card p-5">
|
||||
<h4 class="font-bold text-gray-600 text-xs uppercase mb-2">Notes</h4>
|
||||
<p class="text-sm text-gray-500">{{ $brief->notes }}</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
139
resources/views/dashboard.blade.php
Normal file
139
resources/views/dashboard.blade.php
Normal file
@@ -0,0 +1,139 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Dashboard')
|
||||
@section('page-title', 'Dashboard 🐾')
|
||||
@section('page-subtitle', today()->format('l, d F Y'))
|
||||
|
||||
@section('content')
|
||||
|
||||
{{-- ── Today's Schedule (TOP) ───────────────────────────────── --}}
|
||||
<div class="cat-card p-4 lg:p-6 mb-4">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-sm lg:text-base font-bold text-gray-700 flex items-center gap-2">
|
||||
<span>📅</span> Today's Schedule
|
||||
</h2>
|
||||
<a href="{{ route('schedule.index') }}" class="text-xs text-pink-500 hover:underline font-medium">View all →</a>
|
||||
</div>
|
||||
|
||||
@forelse($todayActivities as $activity)
|
||||
<div class="flex items-start gap-3 py-3 border-b border-pink-50 last:border-0">
|
||||
<div class="w-1 h-10 rounded-full shrink-0 mt-0.5" style="background-color: {{ $activity['color'] }};"></div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
@if($activity['priority'])<span class="text-amber-400 text-xs">⭐</span>@endif
|
||||
<span class="text-base shrink-0">{{ $activity['icon'] }}</span>
|
||||
<span class="font-semibold text-gray-800 text-sm truncate">{{ $activity['title'] }}</span>
|
||||
<span class="text-xs px-2 py-0.5 rounded-full bg-pink-50 text-pink-600 shrink-0 capitalize">{{ $activity['label'] }}</span>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500 mt-0.5">{{ $activity['subtitle'] }}</div>
|
||||
</div>
|
||||
<span class="badge {{ $activity['badge_class'] }} shrink-0 text-xs">{{ $activity['badge'] }}</span>
|
||||
</div>
|
||||
@empty
|
||||
<div class="text-center py-6 text-gray-400">
|
||||
<span class="text-4xl block mb-1">😸</span>
|
||||
<p class="text-sm">No activities today — enjoy your day!</p>
|
||||
<div class="flex gap-2 justify-center mt-3">
|
||||
<a href="{{ route('schedule.index') }}" class="text-xs text-pink-500 hover:underline">Add event</a>
|
||||
<span class="text-xs text-gray-300">·</span>
|
||||
<a href="{{ route('invoices.create') }}" class="text-xs text-pink-500 hover:underline">Create invoice</a>
|
||||
<span class="text-xs text-gray-300">·</span>
|
||||
<a href="{{ route('content.create') }}" class="text-xs text-pink-500 hover:underline">New brief</a>
|
||||
</div>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
{{-- ── Stat Pills (BELOW schedule) ─────────────────────────── --}}
|
||||
<div class="grid grid-cols-2 gap-3 mb-4">
|
||||
<div class="stat-pill">
|
||||
<div class="text-2xl lg:text-3xl font-extrabold text-pink-500">{{ $stats['total_clients'] }}</div>
|
||||
<div class="text-xs lg:text-sm font-semibold text-gray-600">Total Clients</div>
|
||||
<div class="text-xs text-gray-400">{{ $stats['active_clients'] }} active</div>
|
||||
</div>
|
||||
<div class="stat-pill">
|
||||
<div class="text-2xl lg:text-3xl font-extrabold text-purple-500">{{ $stats['upcoming_events'] }}</div>
|
||||
<div class="text-xs lg:text-sm font-semibold text-gray-600">Upcoming Events</div>
|
||||
<div class="text-xs text-gray-400">Next 3 months</div>
|
||||
</div>
|
||||
<div class="stat-pill">
|
||||
<div class="text-2xl lg:text-3xl font-extrabold text-amber-500">{{ $stats['pending_invoices'] }}</div>
|
||||
<div class="text-xs lg:text-sm font-semibold text-gray-600">Pending Invoices</div>
|
||||
<div class="text-xs text-gray-400">Awaiting payment</div>
|
||||
</div>
|
||||
<div class="stat-pill">
|
||||
<div class="text-lg lg:text-2xl font-extrabold text-emerald-500 leading-tight">
|
||||
Rp {{ number_format($stats['total_revenue'], 0, ',', '.') }}
|
||||
</div>
|
||||
<div class="text-xs lg:text-sm font-semibold text-gray-600">Revenue (Paid)</div>
|
||||
<div class="text-xs text-gray-400">All time</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- ── Bottom Row ───────────────────────────────────────────── --}}
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
|
||||
{{-- Social Stats --}}
|
||||
<div class="cat-card p-4 lg:p-5">
|
||||
<h2 class="text-sm font-bold text-gray-700 flex items-center gap-2 mb-3">
|
||||
<span>📱</span> Social Snapshot
|
||||
</h2>
|
||||
@forelse($socialStats as $stat)
|
||||
<div class="flex items-center justify-between py-2 border-b border-pink-50 last:border-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xl">{{ $stat->platform_icon }}</span>
|
||||
<div>
|
||||
<div class="text-xs font-semibold text-gray-700">{{ ucfirst($stat->platform) }}</div>
|
||||
<div class="text-xs text-gray-400">{{ $stat->handle ?? 'Not set' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="font-bold text-gray-800 text-sm">{{ $stat->formatted_followers }}</div>
|
||||
<div class="text-xs text-gray-400">{{ $stat->engagement_rate }}% eng.</div>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<p class="text-xs text-gray-400 text-center py-3">
|
||||
No stats yet.
|
||||
<a href="{{ route('social-hub.index') }}" class="text-pink-500 hover:underline">Add stats →</a>
|
||||
</p>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
{{-- Recent Invoices --}}
|
||||
<div class="cat-card p-4 lg:p-5">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h2 class="text-sm font-bold text-gray-700 flex items-center gap-2"><span>🧾</span> Recent Invoices</h2>
|
||||
<a href="{{ route('invoices.index') }}" class="text-xs text-pink-500 hover:underline">All →</a>
|
||||
</div>
|
||||
@forelse($latestInvoices as $invoice)
|
||||
<div class="flex items-center justify-between py-2 border-b border-pink-50 last:border-0">
|
||||
<div class="min-w-0">
|
||||
<div class="text-xs font-semibold text-gray-700 truncate">{{ $invoice->invoice_number }}</div>
|
||||
<div class="text-xs text-gray-400 truncate">{{ $invoice->client?->name ?? 'No client' }}</div>
|
||||
</div>
|
||||
<div class="text-right shrink-0 ml-2">
|
||||
<div class="text-xs font-bold text-gray-700">{{ $invoice->formatted_total }}</div>
|
||||
<span class="badge {{ $invoice->status->badgeClass() }} text-xs">{{ $invoice->status->label() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<p class="text-xs text-gray-400 text-center py-3">No invoices yet.</p>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
{{-- Content Progress --}}
|
||||
<div class="cat-card p-4 lg:p-5">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h2 class="text-sm font-bold text-gray-700 flex items-center gap-2"><span>🎬</span> Content Pipeline</h2>
|
||||
<a href="{{ route('content.index') }}" class="text-xs text-pink-500 hover:underline">Board →</a>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 py-3">
|
||||
<span class="text-3xl font-extrabold text-purple-500">{{ $stats['content_in_progress'] }}</span>
|
||||
<span class="text-sm text-gray-600">pieces currently in progress</span>
|
||||
</div>
|
||||
<a href="{{ route('content.create') }}" class="btn-sakura text-xs w-full text-center mt-2">＋ New Brief</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
148
resources/views/files/index.blade.php
Normal file
148
resources/views/files/index.blade.php
Normal file
@@ -0,0 +1,148 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Files')
|
||||
@section('page-title', 'File Manager 📁')
|
||||
@section('page-subtitle', 'Brand assets, logos, and media files')
|
||||
|
||||
@section('content')
|
||||
|
||||
{{-- ── Upload Form (collapsible on mobile) ─────────────────── --}}
|
||||
<div class="cat-card p-4 mb-4" x-data="{ open: false }">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-sm font-bold text-gray-700 flex items-center gap-2">📤 Upload File</h3>
|
||||
<button class="btn-sakura text-xs px-4 py-1.5" @click="open = !open"
|
||||
x-text="open ? '✕ Close' : '＋ Upload'"></button>
|
||||
</div>
|
||||
|
||||
<form x-show="open" x-transition
|
||||
action="{{ route('files.store') }}" method="POST" enctype="multipart/form-data"
|
||||
class="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
@csrf
|
||||
<div class="sm:col-span-3">
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">
|
||||
File <span class="text-pink-400">*</span>
|
||||
<span class="text-gray-400 font-normal ml-1">Max 50 MB</span>
|
||||
</label>
|
||||
<input type="file" name="file" required
|
||||
class="w-full text-sm text-gray-600
|
||||
file:mr-3 file:py-2 file:px-4
|
||||
file:rounded-full file:border-0
|
||||
file:text-xs file:font-semibold
|
||||
file:bg-pink-50 file:text-pink-600
|
||||
hover:file:bg-pink-100
|
||||
cursor-pointer">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Folder</label>
|
||||
<input type="text" name="folder" value="general" class="input-soft text-sm"
|
||||
list="folder-list" placeholder="brand-assets, logos...">
|
||||
<datalist id="folder-list">
|
||||
@foreach($folders as $f)
|
||||
<option value="{{ $f }}">
|
||||
@endforeach
|
||||
<option value="brand-assets">
|
||||
<option value="logos">
|
||||
<option value="videos">
|
||||
<option value="photos">
|
||||
<option value="documents">
|
||||
</datalist>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Client (optional)</label>
|
||||
<select name="client_id" class="input-soft text-sm">
|
||||
<option value="">— None —</option>
|
||||
@foreach($clients as $client)
|
||||
<option value="{{ $client->id }}">{{ $client->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="sm:flex sm:items-end">
|
||||
<button type="submit" class="btn-sakura w-full py-2.5">📤 Upload</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{{-- ── Folder Filter Chips ──────────────────────────────────── --}}
|
||||
<div class="flex gap-2 overflow-x-auto pb-2 mb-4 -mx-4 px-4 lg:mx-0 lg:px-0">
|
||||
<a href="{{ route('files.index') }}"
|
||||
class="shrink-0 px-3 py-1.5 rounded-full text-xs font-semibold transition-colors
|
||||
{{ !request('folder') || request('folder') === 'all'
|
||||
? 'text-white' : 'bg-white text-gray-500 border border-pink-100 hover:bg-pink-50' }}"
|
||||
style="{{ !request('folder') || request('folder') === 'all' ? 'background:#FFB7C5' : '' }}">
|
||||
All
|
||||
</a>
|
||||
@foreach($folders as $f)
|
||||
<a href="{{ request()->fullUrlWithQuery(['folder' => $f]) }}"
|
||||
class="shrink-0 px-3 py-1.5 rounded-full text-xs font-semibold capitalize transition-colors
|
||||
{{ request('folder') === $f
|
||||
? 'text-white' : 'bg-white text-gray-500 border border-pink-100 hover:bg-pink-50' }}"
|
||||
style="{{ request('folder') === $f ? 'background:#FFB7C5' : '' }}">
|
||||
{{ $f }}
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
{{-- ── File Grid ────────────────────────────────────────────── --}}
|
||||
@forelse($files as $file)
|
||||
@if($loop->first)
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
|
||||
@endif
|
||||
|
||||
<div class="cat-card p-3 flex flex-col gap-2">
|
||||
{{-- Preview / Icon --}}
|
||||
@if($file->is_image)
|
||||
<div class="w-full aspect-square rounded-2xl overflow-hidden bg-pink-50">
|
||||
<img src="{{ $file->url }}" alt="{{ $file->name }}"
|
||||
class="w-full h-full object-cover">
|
||||
</div>
|
||||
@else
|
||||
<div class="w-full aspect-square rounded-2xl bg-pink-50 flex items-center justify-center text-4xl">
|
||||
{{ $file->icon }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Info --}}
|
||||
<div class="min-w-0">
|
||||
<p class="text-xs font-semibold text-gray-700 truncate" title="{{ $file->original_name }}">
|
||||
{{ $file->name ?: $file->original_name }}
|
||||
</p>
|
||||
<p class="text-xs text-gray-400">{{ $file->human_size }}</p>
|
||||
@if($file->client)
|
||||
<p class="text-xs text-pink-500 truncate">👥 {{ $file->client->name }}</p>
|
||||
@endif
|
||||
<span class="text-xs bg-pink-50 text-pink-600 px-2 py-0.5 rounded-full capitalize inline-block mt-0.5">
|
||||
{{ $file->folder }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{{-- Actions --}}
|
||||
<div class="flex gap-1.5 mt-auto">
|
||||
<a href="{{ $file->url }}" target="_blank"
|
||||
class="flex-1 text-center text-xs py-1.5 rounded-full border border-pink-200 text-pink-600 hover:bg-pink-50 font-medium">
|
||||
View
|
||||
</a>
|
||||
<form action="{{ route('files.destroy', $file) }}" method="POST"
|
||||
onsubmit="return confirm('Delete this file?')">
|
||||
@csrf @method('DELETE')
|
||||
<button class="text-xs py-1.5 px-3 rounded-full border border-red-100 text-red-400 hover:bg-red-50">
|
||||
✕
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($loop->last)
|
||||
</div>
|
||||
@endif
|
||||
@empty
|
||||
<div class="text-center py-16 text-gray-400">
|
||||
<span class="text-5xl block mb-3">📁</span>
|
||||
<p class="text-sm">No files yet.</p>
|
||||
<button onclick="document.querySelector('[\\@click=\\'open = !open\\']').click()"
|
||||
class="btn-sakura mt-4 inline-block text-sm">Upload your first file</button>
|
||||
</div>
|
||||
@endforelse
|
||||
|
||||
<div class="mt-4">{{ $files->links() }}</div>
|
||||
|
||||
@endsection
|
||||
170
resources/views/invoices/create.blade.php
Normal file
170
resources/views/invoices/create.blade.php
Normal file
@@ -0,0 +1,170 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'New Invoice')
|
||||
@section('page-title', 'Create Invoice 🧾')
|
||||
@section('page-subtitle', 'Fill in the invoice details')
|
||||
|
||||
@section('content')
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="cat-card p-4 lg:p-8" x-data="invoiceForm()">
|
||||
<form action="{{ route('invoices.store') }}" method="POST">
|
||||
@csrf
|
||||
|
||||
{{-- Header fields --}}
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-5">
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Invoice Title <span class="text-pink-400">*</span></label>
|
||||
<input type="text" name="title" value="{{ old('title') }}" class="input-soft" required
|
||||
placeholder="e.g. Instagram Collaboration - Brand X">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Client</label>
|
||||
<select name="client_id" class="input-soft">
|
||||
<option value="">— No client —</option>
|
||||
@foreach($clients as $client)
|
||||
<option value="{{ $client->id }}" {{ request('client') == $client->id ? 'selected' : '' }}>
|
||||
{{ $client->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Currency</label>
|
||||
<select name="currency" class="input-soft">
|
||||
<option value="IDR" selected>IDR (Rupiah)</option>
|
||||
<option value="USD">USD (Dollar)</option>
|
||||
<option value="SGD">SGD</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Issue Date</label>
|
||||
<input type="date" name="issue_date" value="{{ old('issue_date', today()->toDateString()) }}"
|
||||
class="input-soft" required>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Due Date</label>
|
||||
<input type="date" name="due_date"
|
||||
value="{{ old('due_date', today()->addDays(14)->toDateString()) }}"
|
||||
class="input-soft" required>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Tax Rate (%)</label>
|
||||
<input type="number" name="tax_rate" x-model="taxRate" @input="recalc()"
|
||||
value="{{ old('tax_rate', 11) }}" class="input-soft" step="0.01">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Line Items --}}
|
||||
<div class="mb-5">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h3 class="text-sm font-bold text-gray-700">Line Items</h3>
|
||||
<button type="button" @click="addItem()" class="btn-sakura text-xs py-1.5 px-4">＋ Add Item</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<template x-for="(item, index) in items" :key="index">
|
||||
<div class="bg-pink-50 rounded-2xl p-3">
|
||||
{{-- Description full width --}}
|
||||
<input type="text" :name="`items[${index}][description]`"
|
||||
x-model="item.description"
|
||||
class="input-soft text-sm mb-2 bg-white"
|
||||
placeholder="Service description" required>
|
||||
{{-- Qty / Price / Total in a row --}}
|
||||
<div class="flex gap-2 items-center">
|
||||
<div class="w-16 shrink-0">
|
||||
<label class="text-xs text-gray-400 block mb-0.5">Qty</label>
|
||||
<input type="number" :name="`items[${index}][quantity]`"
|
||||
x-model.number="item.quantity" @input="recalc()"
|
||||
class="input-soft text-sm text-center bg-white px-2" min="1">
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="text-xs text-gray-400 block mb-0.5">Unit Price</label>
|
||||
<input type="number" :name="`items[${index}][unit_price]`"
|
||||
x-model.number="item.unit_price" @input="recalc()"
|
||||
class="input-soft text-sm bg-white" min="0" step="1000"
|
||||
placeholder="0">
|
||||
</div>
|
||||
<div class="w-24 shrink-0 text-right">
|
||||
<label class="text-xs text-gray-400 block mb-0.5">Total</label>
|
||||
<div class="text-sm font-bold text-gray-700 pt-2">
|
||||
Rp <span x-text="formatNum(item.quantity * item.unit_price)"></span>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" @click="removeItem(index)"
|
||||
class="text-red-400 hover:text-red-600 text-lg shrink-0 pt-4">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Totals --}}
|
||||
<div class="bg-pink-50 rounded-2xl p-4 mb-5">
|
||||
<div class="flex justify-between text-sm py-1">
|
||||
<span class="text-gray-500">Subtotal</span>
|
||||
<span class="font-semibold">Rp <span x-text="formatNum(subtotal)"></span></span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm py-1">
|
||||
<span class="text-gray-500">Tax (<span x-text="taxRate"></span>%)</span>
|
||||
<span class="font-semibold">Rp <span x-text="formatNum(taxAmount)"></span></span>
|
||||
</div>
|
||||
<div class="flex justify-between text-base font-bold py-2 mt-1 border-t border-pink-200">
|
||||
<span class="text-gray-700">Total</span>
|
||||
<span class="text-pink-600">Rp <span x-text="formatNum(total)"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Bank Info --}}
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-5">
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Bank Name</label>
|
||||
<input type="text" name="bank_name" value="{{ old('bank_name') }}"
|
||||
class="input-soft text-sm" placeholder="BCA, Mandiri...">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Account Number</label>
|
||||
<input type="text" name="bank_account" value="{{ old('bank_account') }}"
|
||||
class="input-soft text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Account Holder</label>
|
||||
<input type="text" name="bank_holder" value="{{ old('bank_holder') }}"
|
||||
class="input-soft text-sm">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-5">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Notes</label>
|
||||
<textarea name="notes" rows="2" class="input-soft resize-none"
|
||||
placeholder="Payment terms, etc.">{{ old('notes') }}</textarea>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-3">
|
||||
<button type="submit" class="btn-sakura flex-1 py-3">🧾 Create Invoice</button>
|
||||
<a href="{{ route('invoices.index') }}"
|
||||
class="flex-1 py-3 text-center rounded-full border border-pink-200 text-gray-600 hover:bg-pink-50 font-semibold text-sm">
|
||||
Cancel
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
function invoiceForm() {
|
||||
return {
|
||||
items: [{ description: '', quantity: 1, unit_price: 0 }],
|
||||
taxRate: 11,
|
||||
get subtotal() { return this.items.reduce((s, i) => s + (i.quantity * i.unit_price), 0); },
|
||||
get taxAmount() { return Math.round(this.subtotal * this.taxRate / 100); },
|
||||
get total() { return this.subtotal + this.taxAmount; },
|
||||
addItem() { this.items.push({ description: '', quantity: 1, unit_price: 0 }); },
|
||||
removeItem(i) { if (this.items.length > 1) this.items.splice(i, 1); },
|
||||
recalc() {},
|
||||
formatNum(n) { return Number(n).toLocaleString('id-ID'); },
|
||||
};
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
@endsection
|
||||
164
resources/views/invoices/edit.blade.php
Normal file
164
resources/views/invoices/edit.blade.php
Normal file
@@ -0,0 +1,164 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Edit Invoice')
|
||||
@section('page-title', 'Edit Invoice 🧾')
|
||||
@section('page-subtitle', $invoice->invoice_number)
|
||||
|
||||
@section('content')
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="cat-card p-4 lg:p-8" x-data="invoiceEditForm()">
|
||||
<form action="{{ route('invoices.update', $invoice) }}" method="POST">
|
||||
@csrf @method('PUT')
|
||||
|
||||
{{-- Header fields --}}
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-5">
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Invoice Title</label>
|
||||
<input type="text" name="title" value="{{ old('title', $invoice->title) }}" class="input-soft" required>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Client</label>
|
||||
<select name="client_id" class="input-soft">
|
||||
<option value="">— No client —</option>
|
||||
@foreach($clients as $client)
|
||||
<option value="{{ $client->id }}" {{ old('client_id', $invoice->client_id) == $client->id ? 'selected' : '' }}>{{ $client->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Status</label>
|
||||
<select name="status" class="input-soft">
|
||||
@foreach($statuses as $s)
|
||||
<option value="{{ $s->value }}" {{ old('status', $invoice->status->value) === $s->value ? 'selected' : '' }}>{{ $s->label() }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Issue Date</label>
|
||||
<input type="date" name="issue_date" value="{{ old('issue_date', $invoice->issue_date->toDateString()) }}" class="input-soft">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Due Date</label>
|
||||
<input type="date" name="due_date" value="{{ old('due_date', $invoice->due_date->toDateString()) }}" class="input-soft">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Paid Date</label>
|
||||
<input type="date" name="paid_date" value="{{ old('paid_date', $invoice->paid_date?->toDateString()) }}" class="input-soft">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Tax Rate (%)</label>
|
||||
<input type="number" name="tax_rate" x-model="taxRate" @input="recalc()"
|
||||
value="{{ old('tax_rate', $invoice->tax_rate) }}" class="input-soft" step="0.01">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Line Items --}}
|
||||
<div class="mb-5">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h3 class="text-sm font-bold text-gray-700">Line Items</h3>
|
||||
<button type="button" @click="addItem()" class="btn-sakura text-xs py-1.5 px-4">＋ Add Item</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<template x-for="(item, index) in items" :key="index">
|
||||
<div class="bg-pink-50 rounded-2xl p-3">
|
||||
<input type="text" :name="`items[${index}][description]`"
|
||||
x-model="item.description"
|
||||
class="input-soft text-sm mb-2 bg-white"
|
||||
placeholder="Service description" required>
|
||||
<div class="flex gap-2 items-center">
|
||||
<div class="w-16 shrink-0">
|
||||
<label class="text-xs text-gray-400 block mb-0.5">Qty</label>
|
||||
<input type="number" :name="`items[${index}][quantity]`"
|
||||
x-model.number="item.quantity" @input="recalc()"
|
||||
class="input-soft text-sm text-center bg-white px-2" min="1">
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="text-xs text-gray-400 block mb-0.5">Unit Price</label>
|
||||
<input type="number" :name="`items[${index}][unit_price]`"
|
||||
x-model.number="item.unit_price" @input="recalc()"
|
||||
class="input-soft text-sm bg-white" min="0" step="1000">
|
||||
</div>
|
||||
<div class="w-24 shrink-0 text-right">
|
||||
<label class="text-xs text-gray-400 block mb-0.5">Total</label>
|
||||
<div class="text-sm font-bold text-gray-700 pt-2">
|
||||
Rp <span x-text="formatNum(item.quantity * item.unit_price)"></span>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" @click="removeItem(index)"
|
||||
class="text-red-400 hover:text-red-600 text-lg shrink-0 pt-4">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Totals --}}
|
||||
<div class="bg-pink-50 rounded-2xl p-4 mb-5">
|
||||
<div class="flex justify-between text-sm py-1">
|
||||
<span class="text-gray-500">Subtotal</span>
|
||||
<span class="font-semibold">Rp <span x-text="formatNum(subtotal)"></span></span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm py-1">
|
||||
<span class="text-gray-500">Tax (<span x-text="taxRate"></span>%)</span>
|
||||
<span class="font-semibold">Rp <span x-text="formatNum(taxAmount)"></span></span>
|
||||
</div>
|
||||
<div class="flex justify-between text-base font-bold py-2 mt-1 border-t border-pink-200">
|
||||
<span class="text-gray-700">Total</span>
|
||||
<span class="text-pink-600">Rp <span x-text="formatNum(total)"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Bank Info --}}
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-5">
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Bank Name</label>
|
||||
<input type="text" name="bank_name" value="{{ old('bank_name', $invoice->bank_name) }}"
|
||||
class="input-soft text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Account Number</label>
|
||||
<input type="text" name="bank_account" value="{{ old('bank_account', $invoice->bank_account) }}"
|
||||
class="input-soft text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Account Holder</label>
|
||||
<input type="text" name="bank_holder" value="{{ old('bank_holder', $invoice->bank_holder) }}"
|
||||
class="input-soft text-sm">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-5">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Notes</label>
|
||||
<textarea name="notes" rows="2" class="input-soft resize-none">{{ old('notes', $invoice->notes) }}</textarea>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-3">
|
||||
<button type="submit" class="btn-sakura flex-1 py-3">💾 Save Changes</button>
|
||||
<a href="{{ route('invoices.show', $invoice) }}"
|
||||
class="flex-1 py-3 text-center rounded-full border border-pink-200 text-gray-600 hover:bg-pink-50 font-semibold text-sm">
|
||||
Cancel
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
function invoiceEditForm() {
|
||||
return {
|
||||
items: @json($invoice->items->map(fn($i) => ['description' => $i->description, 'quantity' => $i->quantity, 'unit_price' => (float)$i->unit_price])),
|
||||
taxRate: {{ $invoice->tax_rate }},
|
||||
get subtotal() { return this.items.reduce((s, i) => s + (i.quantity * i.unit_price), 0); },
|
||||
get taxAmount() { return Math.round(this.subtotal * this.taxRate / 100); },
|
||||
get total() { return this.subtotal + this.taxAmount; },
|
||||
addItem() { this.items.push({ description: '', quantity: 1, unit_price: 0 }); },
|
||||
removeItem(i) { if (this.items.length > 1) this.items.splice(i, 1); },
|
||||
recalc() {},
|
||||
formatNum(n) { return Number(n).toLocaleString('id-ID'); },
|
||||
};
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
@endsection
|
||||
103
resources/views/invoices/index.blade.php
Normal file
103
resources/views/invoices/index.blade.php
Normal file
@@ -0,0 +1,103 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Invoices')
|
||||
@section('page-title', 'Invoices 🧾')
|
||||
@section('page-subtitle', 'Manage your brand deal payments')
|
||||
|
||||
@section('content')
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-5">
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
@foreach(['all','draft','sent','paid','overdue'] as $s)
|
||||
<a href="{{ request()->fullUrlWithQuery(['status' => $s]) }}"
|
||||
class="px-3 py-1.5 rounded-full text-xs font-semibold transition-colors
|
||||
{{ request('status', 'all') === $s
|
||||
? 'text-white'
|
||||
: 'bg-white text-gray-500 hover:bg-pink-50 border border-pink-100' }}"
|
||||
style="{{ request('status', 'all') === $s ? 'background:#FFB7C5' : '' }}">
|
||||
{{ ucfirst($s) }}
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
<a href="{{ route('invoices.create') }}" class="btn-sakura text-sm shrink-0">＋ New Invoice</a>
|
||||
</div>
|
||||
|
||||
{{-- Mobile card list --}}
|
||||
<div class="flex flex-col gap-3 sm:hidden">
|
||||
@forelse($invoices as $invoice)
|
||||
<div class="cat-card p-4">
|
||||
<div class="flex items-start justify-between gap-2 mb-2">
|
||||
<div>
|
||||
<div class="font-mono text-sm font-bold text-gray-700">{{ $invoice->invoice_number }}</div>
|
||||
<div class="text-xs text-gray-400">{{ $invoice->client?->name ?? '—' }}</div>
|
||||
</div>
|
||||
<span class="badge {{ $invoice->status->badgeClass() }} shrink-0">{{ $invoice->status->label() }}</span>
|
||||
</div>
|
||||
<div class="text-sm text-gray-700 font-semibold mb-1">{{ $invoice->title }}</div>
|
||||
<div class="flex items-center justify-between text-xs text-gray-500">
|
||||
<span>Due {{ $invoice->due_date->format('d M Y') }}</span>
|
||||
<span class="font-bold text-gray-800">{{ $invoice->formatted_total }}</span>
|
||||
</div>
|
||||
<div class="flex gap-2 mt-3 pt-3 border-t border-pink-50">
|
||||
<a href="{{ route('invoices.show', $invoice) }}" class="flex-1 text-center text-xs py-1.5 px-3 rounded-full border border-pink-200 text-pink-600 hover:bg-pink-50">View</a>
|
||||
<a href="{{ route('invoices.pdf', $invoice) }}" target="_blank" class="flex-1 text-center text-xs py-1.5 px-3 rounded-full border border-pink-200 text-pink-600 hover:bg-pink-50">PDF</a>
|
||||
<a href="{{ route('invoices.edit', $invoice) }}" class="flex-1 text-center text-xs py-1.5 px-3 rounded-full border border-pink-200 text-gray-600 hover:bg-pink-50">Edit</a>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="text-center py-16 text-gray-400">
|
||||
<span class="text-5xl block mb-2">🧾</span>
|
||||
<p>No invoices yet. <a href="{{ route('invoices.create') }}" class="text-pink-500 hover:underline">Create one!</a></p>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
{{-- Desktop table --}}
|
||||
<div class="cat-card overflow-hidden hidden sm:block">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table w-full">
|
||||
<thead class="bg-pink-50">
|
||||
<tr>
|
||||
<th class="px-5 py-4">Invoice #</th>
|
||||
<th class="px-5 py-4">Client</th>
|
||||
<th class="px-5 py-4">Title</th>
|
||||
<th class="px-5 py-4">Total</th>
|
||||
<th class="px-5 py-4">Due Date</th>
|
||||
<th class="px-5 py-4">Status</th>
|
||||
<th class="px-5 py-4">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($invoices as $invoice)
|
||||
<tr class="border-b border-pink-50 hover:bg-pink-50/50 transition-colors">
|
||||
<td class="px-5 py-4 font-mono text-sm font-semibold text-gray-700">{{ $invoice->invoice_number }}</td>
|
||||
<td class="px-5 py-4 text-sm text-gray-600">{{ $invoice->client?->name ?? '—' }}</td>
|
||||
<td class="px-5 py-4 text-sm text-gray-700 max-w-xs truncate">{{ $invoice->title }}</td>
|
||||
<td class="px-5 py-4 font-bold text-gray-800 text-sm">{{ $invoice->formatted_total }}</td>
|
||||
<td class="px-5 py-4 text-sm text-gray-500">
|
||||
{{ $invoice->due_date->format('d M Y') }}
|
||||
@if($invoice->due_date->isPast() && $invoice->status->value !== 'paid')
|
||||
<span class="text-red-400 text-xs block">Overdue!</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="px-5 py-4"><span class="badge {{ $invoice->status->badgeClass() }}">{{ $invoice->status->label() }}</span></td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<a href="{{ route('invoices.show', $invoice) }}" class="text-xs text-pink-500 hover:underline">View</a>
|
||||
<a href="{{ route('invoices.pdf', $invoice) }}" class="text-xs text-pink-500 hover:underline" target="_blank">PDF</a>
|
||||
<a href="{{ route('invoices.edit', $invoice) }}" class="text-xs text-gray-500 hover:underline">Edit</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr><td colspan="7" class="text-center py-16 text-gray-400">
|
||||
<span class="text-4xl block mb-2">🧾</span>
|
||||
No invoices yet.
|
||||
</td></tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">{{ $invoices->links() }}</div>
|
||||
@endsection
|
||||
119
resources/views/invoices/pdf.blade.php
Normal file
119
resources/views/invoices/pdf.blade.php
Normal file
@@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: 'Helvetica', Arial, sans-serif; color: #374151; font-size: 13px; padding: 40px; }
|
||||
.header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; }
|
||||
.logo { font-size: 22px; font-weight: 900; color: #FFB7C5; }
|
||||
.logo-sub { font-size: 11px; color: #9CA3AF; margin-top: 2px; }
|
||||
.inv-number { font-size: 22px; font-weight: 700; color: #1F2937; text-align: right; }
|
||||
.badge { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; background: #FDE68A; color: #92400E; }
|
||||
.section-title { font-size: 10px; font-weight: 700; color: #9CA3AF; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
|
||||
.billing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 32px; }
|
||||
.billing-name { font-weight: 700; font-size: 15px; color: #111827; }
|
||||
.billing-detail { font-size: 12px; color: #6B7280; margin-top: 2px; }
|
||||
.detail-table { width: 100%; font-size: 12px; }
|
||||
.detail-table td { padding: 3px 0; }
|
||||
.detail-table td:first-child { color: #9CA3AF; }
|
||||
.detail-table td:last-child { font-weight: 600; text-align: right; }
|
||||
table.items { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
|
||||
table.items thead { background: #FFF0F5; }
|
||||
table.items th { padding: 10px 12px; text-align: left; font-size: 10px; font-weight: 700; color: #9CA3AF; text-transform: uppercase; }
|
||||
table.items th:last-child, table.items td:last-child { text-align: right; }
|
||||
table.items th:nth-child(2), table.items td:nth-child(2) { text-align: center; }
|
||||
table.items td { padding: 10px 12px; border-bottom: 1px solid #FDE8F0; font-size: 12px; }
|
||||
.totals { display: flex; justify-content: flex-end; margin-bottom: 24px; }
|
||||
.totals-box { width: 260px; }
|
||||
.totals-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12px; }
|
||||
.totals-row.total { border-top: 2px solid #FFB7C5; margin-top: 6px; padding-top: 8px; font-size: 15px; font-weight: 800; color: #FFB7C5; }
|
||||
.bank-box { background: #FFF5F7; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
|
||||
.bank-title { font-weight: 700; font-size: 12px; color: #374151; margin-bottom: 4px; }
|
||||
.bank-detail { font-size: 12px; color: #6B7280; }
|
||||
.notes { font-size: 11px; color: #9CA3AF; font-style: italic; }
|
||||
.footer { margin-top: 40px; text-align: center; font-size: 11px; color: #D1D5DB; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<div>
|
||||
<div class="logo">🐱 KOL Manager</div>
|
||||
<div class="logo-sub">Personal Talent Assistant</div>
|
||||
</div>
|
||||
<div style="text-align:right">
|
||||
<div class="inv-number">{{ $invoice->invoice_number }}</div>
|
||||
<div style="margin-top:4px"><span class="badge">{{ $invoice->status->label() }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="billing-grid">
|
||||
<div>
|
||||
<div class="section-title">Bill To</div>
|
||||
@if($invoice->client)
|
||||
<div class="billing-name">{{ $invoice->client->name }}</div>
|
||||
@if($invoice->client->company) <div class="billing-detail">{{ $invoice->client->company }}</div> @endif
|
||||
@if($invoice->client->email) <div class="billing-detail">{{ $invoice->client->email }}</div> @endif
|
||||
@if($invoice->client->full_address) <div class="billing-detail">{{ $invoice->client->full_address }}</div> @endif
|
||||
@else
|
||||
<div class="billing-detail">—</div>
|
||||
@endif
|
||||
</div>
|
||||
<div style="text-align:right">
|
||||
<div class="section-title">Invoice Details</div>
|
||||
<table class="detail-table">
|
||||
<tr><td>Issue Date</td><td>{{ $invoice->issue_date->format('d M Y') }}</td></tr>
|
||||
<tr><td>Due Date</td><td>{{ $invoice->due_date->format('d M Y') }}</td></tr>
|
||||
@if($invoice->paid_date)
|
||||
<tr><td>Paid Date</td><td>{{ $invoice->paid_date->format('d M Y') }}</td></tr>
|
||||
@endif
|
||||
<tr><td>Currency</td><td>{{ $invoice->currency }}</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="items">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Description</th>
|
||||
<th>Qty</th>
|
||||
<th style="text-align:right">Unit Price</th>
|
||||
<th>Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($invoice->items as $item)
|
||||
<tr>
|
||||
<td>{{ $item->description }}</td>
|
||||
<td style="text-align:center">{{ $item->quantity }}</td>
|
||||
<td style="text-align:right">Rp {{ number_format($item->unit_price, 0, ',', '.') }}</td>
|
||||
<td style="text-align:right; font-weight:600">Rp {{ number_format($item->total, 0, ',', '.') }}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="totals">
|
||||
<div class="totals-box">
|
||||
<div class="totals-row"><span>Subtotal</span><span>Rp {{ number_format($invoice->subtotal, 0, ',', '.') }}</span></div>
|
||||
<div class="totals-row"><span>Tax ({{ $invoice->tax_rate }}%)</span><span>Rp {{ number_format($invoice->tax_amount, 0, ',', '.') }}</span></div>
|
||||
<div class="totals-row total"><span>Total</span><span>{{ $invoice->formatted_total }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($invoice->bank_name)
|
||||
<div class="bank-box">
|
||||
<div class="bank-title">💳 Payment Information</div>
|
||||
<div class="bank-detail">{{ $invoice->bank_name }} · {{ $invoice->bank_account }} · a/n {{ $invoice->bank_holder }}</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if($invoice->notes)
|
||||
<div class="notes">{{ $invoice->notes }}</div>
|
||||
@endif
|
||||
|
||||
<div class="footer">Generated by KOL Manager · Thank you for the collaboration! 🐱</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
104
resources/views/invoices/show.blade.php
Normal file
104
resources/views/invoices/show.blade.php
Normal file
@@ -0,0 +1,104 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', $invoice->invoice_number)
|
||||
@section('page-title', 'Invoice ' . $invoice->invoice_number)
|
||||
@section('page-subtitle', $invoice->title)
|
||||
|
||||
@section('content')
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="flex gap-3 mb-6">
|
||||
<a href="{{ route('invoices.edit', $invoice) }}" class="btn-sakura">Edit</a>
|
||||
<a href="{{ route('invoices.pdf', $invoice) }}" target="_blank" class="btn btn-outline rounded-full text-pink-500 border-pink-300">📥 Download PDF</a>
|
||||
<form action="{{ route('invoices.destroy', $invoice) }}" method="POST" onsubmit="return confirm('Delete this invoice?')">
|
||||
@csrf @method('DELETE')
|
||||
<button class="btn btn-ghost rounded-full text-error">Delete</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="cat-card p-8">
|
||||
{{-- Invoice Header --}}
|
||||
<div class="flex justify-between items-start mb-8">
|
||||
<div>
|
||||
<div class="text-2xl font-extrabold text-pink-500 flex items-center gap-2">🐱 KOL Manager</div>
|
||||
<div class="text-sm text-gray-400 mt-1">Personal Talent Assistant</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-2xl font-bold text-gray-800">{{ $invoice->invoice_number }}</div>
|
||||
<span class="badge {{ $invoice->status->badgeClass() }} mt-1">{{ $invoice->status->label() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Billing Info --}}
|
||||
<div class="grid grid-cols-2 gap-8 mb-8">
|
||||
<div>
|
||||
<h4 class="text-xs font-bold text-gray-400 uppercase mb-2">Bill To</h4>
|
||||
@if($invoice->client)
|
||||
<div class="font-semibold text-gray-800">{{ $invoice->client->name }}</div>
|
||||
@if($invoice->client->company) <div class="text-sm text-gray-500">{{ $invoice->client->company }}</div> @endif
|
||||
@if($invoice->client->email) <div class="text-sm text-gray-500">{{ $invoice->client->email }}</div> @endif
|
||||
@if($invoice->client->full_address) <div class="text-sm text-gray-400">{{ $invoice->client->full_address }}</div> @endif
|
||||
@else
|
||||
<div class="text-gray-500 text-sm">No client</div>
|
||||
@endif
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-xs font-bold text-gray-400 uppercase mb-2">Invoice Details</div>
|
||||
<div class="text-sm space-y-1">
|
||||
<div><span class="text-gray-400">Issue:</span> {{ $invoice->issue_date->format('d M Y') }}</div>
|
||||
<div><span class="text-gray-400">Due:</span> <span class="{{ $invoice->due_date->isPast() && $invoice->status->value !== 'paid' ? 'text-red-500 font-bold' : '' }}">{{ $invoice->due_date->format('d M Y') }}</span></div>
|
||||
@if($invoice->paid_date) <div><span class="text-gray-400">Paid:</span> {{ $invoice->paid_date->format('d M Y') }}</div> @endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Line Items --}}
|
||||
<table class="w-full mb-6">
|
||||
<thead class="bg-pink-50">
|
||||
<tr class="text-xs text-gray-500 uppercase">
|
||||
<th class="text-left py-3 px-4 rounded-l-2xl">Description</th>
|
||||
<th class="text-center py-3 px-4">Qty</th>
|
||||
<th class="text-right py-3 px-4">Unit Price</th>
|
||||
<th class="text-right py-3 px-4 rounded-r-2xl">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($invoice->items as $item)
|
||||
<tr class="border-b border-pink-50">
|
||||
<td class="py-3 px-4 text-sm text-gray-700">{{ $item->description }}</td>
|
||||
<td class="py-3 px-4 text-sm text-center text-gray-600">{{ $item->quantity }}</td>
|
||||
<td class="py-3 px-4 text-sm text-right text-gray-600">Rp {{ number_format($item->unit_price, 0, ',', '.') }}</td>
|
||||
<td class="py-3 px-4 text-sm text-right font-semibold text-gray-800">Rp {{ number_format($item->total, 0, ',', '.') }}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{{-- Totals --}}
|
||||
<div class="flex justify-end mb-8">
|
||||
<div class="w-64 space-y-2 text-sm">
|
||||
<div class="flex justify-between text-gray-500">
|
||||
<span>Subtotal</span><span class="font-medium">Rp {{ number_format($invoice->subtotal, 0, ',', '.') }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-gray-500">
|
||||
<span>Tax ({{ $invoice->tax_rate }}%)</span><span class="font-medium">Rp {{ number_format($invoice->tax_amount, 0, ',', '.') }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-base font-bold text-pink-600 pt-2 border-t border-pink-200">
|
||||
<span>Total</span><span>{{ $invoice->formatted_total }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Bank Info --}}
|
||||
@if($invoice->bank_name)
|
||||
<div class="bg-pink-50 rounded-2xl p-4 text-sm">
|
||||
<div class="font-semibold text-gray-700 mb-2">💳 Payment Info</div>
|
||||
<div class="text-gray-600">{{ $invoice->bank_name }} · {{ $invoice->bank_account }} · {{ $invoice->bank_holder }}</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if($invoice->notes)
|
||||
<div class="mt-4 text-sm text-gray-500 italic">{{ $invoice->notes }}</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
191
resources/views/layouts/app.blade.php
Normal file
191
resources/views/layouts/app.blade.php
Normal file
@@ -0,0 +1,191 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<title>{{ config('app.name') }} — @yield('title', 'Dashboard')</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||
</head>
|
||||
<body class="bg-cream font-sans antialiased" x-data="{ sidebarOpen: false }">
|
||||
|
||||
{{-- ── Backdrop (mobile only) ─────────────────────────────────── --}}
|
||||
<div
|
||||
x-show="sidebarOpen"
|
||||
x-transition:enter="transition-opacity duration-300"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition-opacity duration-300"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="sidebarOpen = false"
|
||||
class="fixed inset-0 z-30 bg-black/40 lg:hidden"
|
||||
style="display:none"
|
||||
></div>
|
||||
|
||||
{{-- ── Sidebar ─────────────────────────────────────────────────── --}}
|
||||
<aside
|
||||
:class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'"
|
||||
class="fixed inset-y-0 left-0 z-40 w-64 bg-white border-r border-pink-100 shadow-lg
|
||||
flex flex-col py-6 px-4
|
||||
transition-transform duration-300 ease-in-out
|
||||
lg:translate-x-0"
|
||||
>
|
||||
{{-- Logo / Close trigger --}}
|
||||
<div class="flex items-center justify-between gap-3 mb-8 px-2">
|
||||
<button
|
||||
@click="sidebarOpen = false"
|
||||
class="flex items-center gap-3 group focus:outline-none"
|
||||
aria-label="Close menu"
|
||||
>
|
||||
<span class="text-3xl transition-transform duration-200 group-hover:scale-110 group-active:scale-95 select-none">🐱</span>
|
||||
<div class="text-left">
|
||||
<div class="text-lg font-extrabold text-pink-500 leading-tight">KOL Manager</div>
|
||||
<div class="text-xs text-gray-400">Your Purr-fect Assistant</div>
|
||||
</div>
|
||||
</button>
|
||||
{{-- X button — mobile only --}}
|
||||
<button @click="sidebarOpen = false" class="lg:hidden text-gray-400 hover:text-pink-500 text-xl leading-none" aria-label="Close">✕</button>
|
||||
</div>
|
||||
|
||||
{{-- Nav --}}
|
||||
<nav class="flex flex-col gap-1 flex-1 overflow-y-auto">
|
||||
<a href="{{ route('dashboard') }}"
|
||||
@click="sidebarOpen = false"
|
||||
class="nav-item {{ request()->routeIs('dashboard') ? 'active' : '' }}">
|
||||
<span class="text-lg shrink-0">🏠</span> Dashboard
|
||||
</a>
|
||||
|
||||
<div class="text-xs font-bold text-gray-400 uppercase tracking-wider mt-4 mb-1 px-2">Manage</div>
|
||||
|
||||
<a href="{{ route('schedule.index') }}"
|
||||
@click="sidebarOpen = false"
|
||||
class="nav-item {{ request()->routeIs('schedule.*') ? 'active' : '' }}">
|
||||
<span class="text-lg shrink-0">📅</span>
|
||||
<span class="flex-1">Schedule</span>
|
||||
@if($alertCount > 0)
|
||||
<span class="badge-sakura shrink-0">{{ $alertCount }}</span>
|
||||
@endif
|
||||
</a>
|
||||
|
||||
<a href="{{ route('clients.index') }}"
|
||||
@click="sidebarOpen = false"
|
||||
class="nav-item {{ request()->routeIs('clients.*') ? 'active' : '' }}">
|
||||
<span class="text-lg shrink-0">👥</span> Clients / CRM
|
||||
</a>
|
||||
|
||||
<a href="{{ route('social-hub.index') }}"
|
||||
@click="sidebarOpen = false"
|
||||
class="nav-item {{ request()->routeIs('social-hub.*') ? 'active' : '' }}">
|
||||
<span class="text-lg shrink-0">📱</span> Social Hub
|
||||
</a>
|
||||
|
||||
<div class="text-xs font-bold text-gray-400 uppercase tracking-wider mt-4 mb-1 px-2">Finance</div>
|
||||
|
||||
<a href="{{ route('invoices.index') }}"
|
||||
@click="sidebarOpen = false"
|
||||
class="nav-item {{ request()->routeIs('invoices.*') ? 'active' : '' }}">
|
||||
<span class="text-lg shrink-0">🧾</span> Invoices
|
||||
</a>
|
||||
|
||||
<a href="{{ route('rate-cards.index') }}"
|
||||
@click="sidebarOpen = false"
|
||||
class="nav-item {{ request()->routeIs('rate-cards.*') ? 'active' : '' }}">
|
||||
<span class="text-lg shrink-0">💰</span> Rate Cards
|
||||
</a>
|
||||
|
||||
<div class="text-xs font-bold text-gray-400 uppercase tracking-wider mt-4 mb-1 px-2">Content</div>
|
||||
|
||||
<a href="{{ route('content.index') }}"
|
||||
@click="sidebarOpen = false"
|
||||
class="nav-item {{ request()->routeIs('content.*') ? 'active' : '' }}">
|
||||
<span class="text-lg shrink-0">🎬</span> Content Board
|
||||
</a>
|
||||
|
||||
<a href="{{ route('files.index') }}"
|
||||
@click="sidebarOpen = false"
|
||||
class="nav-item {{ request()->routeIs('files.*') ? 'active' : '' }}">
|
||||
<span class="text-lg shrink-0">📁</span> Files
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
{{-- Meow Toggle --}}
|
||||
<div class="mt-4 px-2 border-t border-pink-50 pt-4">
|
||||
<button onclick="window.KolManager.toggleMeow()"
|
||||
class="flex items-center gap-2 text-sm text-gray-500 hover:text-pink-500 transition-colors w-full">
|
||||
<span class="text-base">🔔</span>
|
||||
<span>Meow Sounds</span>
|
||||
</button>
|
||||
<div class="text-xs text-gray-400 mt-1">Toggle notification sounds</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{{-- ── Main wrapper ─────────────────────────────────────────────── --}}
|
||||
<div class="min-h-screen flex flex-col lg:ml-64">
|
||||
|
||||
<div class="flex-1 flex flex-col min-w-0">
|
||||
|
||||
{{-- ── Mobile / Desktop Topbar ─────────────────────────── --}}
|
||||
<header class="sticky top-0 z-20 bg-white border-b border-pink-100 px-4 lg:px-8 py-3 lg:py-4 flex items-center gap-3 shadow-sm">
|
||||
|
||||
{{-- Cat icon — hamburger for mobile --}}
|
||||
<button
|
||||
@click="sidebarOpen = true"
|
||||
class="lg:hidden text-2xl transition-transform duration-150 active:scale-90 focus:outline-none select-none"
|
||||
aria-label="Open menu"
|
||||
>🐱</button>
|
||||
|
||||
<div class="flex-1 min-w-0">
|
||||
<h1 class="text-base lg:text-xl font-bold text-gray-800 truncate">@yield('page-title', 'Dashboard')</h1>
|
||||
<p class="text-xs lg:text-sm text-gray-400 hidden sm:block">@yield('page-subtitle', today()->format('l, d F Y'))</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 shrink-0">
|
||||
@if($alertCount > 0)
|
||||
<a href="{{ route('schedule.index') }}"
|
||||
class="hidden sm:flex items-center gap-1.5 bg-pink-50 text-pink-600 text-xs px-3 py-1.5 rounded-full border border-pink-200">
|
||||
<span>🔔</span>
|
||||
<span class="font-semibold">{{ $alertCount }} alert{{ $alertCount > 1 ? 's' : '' }}</span>
|
||||
</a>
|
||||
{{-- Mobile: just the badge --}}
|
||||
<a href="{{ route('schedule.index') }}" class="sm:hidden badge-sakura flex items-center gap-1">
|
||||
🔔 {{ $alertCount }}
|
||||
</a>
|
||||
@endif
|
||||
<div class="w-8 h-8 lg:w-9 lg:h-9 rounded-full flex items-center justify-center text-white font-bold text-xs lg:text-sm shadow-sm"
|
||||
style="background: linear-gradient(135deg, #FFB7C5, #E8D5F5);">
|
||||
KOL
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{{-- ── Flash Messages ───────────────────────────────────── --}}
|
||||
@if(session('success'))
|
||||
<div id="flash-message"
|
||||
class="mx-4 lg:mx-8 mt-4 flex items-center gap-3 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-2xl shadow-sm">
|
||||
<span class="text-lg">✅</span>
|
||||
<span class="text-sm font-medium">{{ session('success') }}</span>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if(session('error'))
|
||||
<div id="flash-message"
|
||||
class="mx-4 lg:mx-8 mt-4 flex items-center gap-3 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-2xl shadow-sm">
|
||||
<span class="text-lg">❌</span>
|
||||
<span class="text-sm font-medium">{{ session('error') }}</span>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- ── Page Content ─────────────────────────────────────── --}}
|
||||
<main class="flex-1 p-4 lg:p-8 overflow-x-hidden">
|
||||
@yield('content')
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@stack('scripts')
|
||||
</body>
|
||||
</html>
|
||||
76
resources/views/rate-cards/create.blade.php
Normal file
76
resources/views/rate-cards/create.blade.php
Normal file
@@ -0,0 +1,76 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Add Rate Card')
|
||||
@section('page-title', 'Add Service 💰')
|
||||
|
||||
@section('content')
|
||||
<div class="max-w-lg mx-auto">
|
||||
<div class="cat-card p-4 lg:p-8">
|
||||
<form action="{{ route('rate-cards.store') }}" method="POST" class="space-y-4">
|
||||
@csrf
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Service Name <span class="text-pink-400">*</span></label>
|
||||
<input type="text" name="service_name" value="{{ old('service_name') }}" class="input-soft" required
|
||||
placeholder="e.g. Instagram Reel (Paid Partnership)">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Description</label>
|
||||
<textarea name="description" rows="2" class="input-soft resize-none"
|
||||
placeholder="Short description of what's included...">{{ old('description') }}</textarea>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Platform</label>
|
||||
<select name="platform" class="input-soft">
|
||||
<option value="general">⭐ General</option>
|
||||
<option value="instagram">📸 Instagram</option>
|
||||
<option value="tiktok">🎵 TikTok</option>
|
||||
<option value="youtube">▶️ YouTube</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Content Type</label>
|
||||
<input type="text" name="content_type" value="{{ old('content_type') }}" class="input-soft"
|
||||
placeholder="Reel, Story, Feed...">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Price <span class="text-pink-400">*</span></label>
|
||||
<input type="number" name="price" value="{{ old('price') }}" class="input-soft"
|
||||
min="0" step="100000" required placeholder="0">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Currency</label>
|
||||
<select name="currency" class="input-soft">
|
||||
<option value="IDR" selected>IDR</option>
|
||||
<option value="USD">USD</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Price Unit</label>
|
||||
<select name="price_unit" class="input-soft">
|
||||
<option value="per_content">Per Content</option>
|
||||
<option value="per_month">Per Month</option>
|
||||
<option value="per_campaign">Per Campaign</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Sort Order</label>
|
||||
<input type="number" name="sort_order" value="{{ old('sort_order', 0) }}" class="input-soft" min="0">
|
||||
</div>
|
||||
</div>
|
||||
<label class="flex items-center gap-3 cursor-pointer py-1">
|
||||
<input type="checkbox" name="is_negotiable" value="1" {{ old('is_negotiable') ? 'checked' : '' }}
|
||||
class="w-4 h-4 accent-yellow-400">
|
||||
<span class="text-sm text-gray-600">Price is negotiable</span>
|
||||
</label>
|
||||
<div class="flex flex-col sm:flex-row gap-3 pt-1">
|
||||
<button type="submit" class="btn-sakura flex-1 py-3">💰 Add Service</button>
|
||||
<a href="{{ route('rate-cards.index') }}"
|
||||
class="flex-1 py-3 text-center rounded-full border border-pink-200 text-gray-600 hover:bg-pink-50 font-semibold text-sm">
|
||||
Cancel
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
88
resources/views/rate-cards/edit.blade.php
Normal file
88
resources/views/rate-cards/edit.blade.php
Normal file
@@ -0,0 +1,88 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Edit Rate Card')
|
||||
@section('page-title', 'Edit Service 💰')
|
||||
|
||||
@section('content')
|
||||
<div class="max-w-lg mx-auto">
|
||||
<div class="cat-card p-4 lg:p-8">
|
||||
<form action="{{ route('rate-cards.update', $rateCard) }}" method="POST" class="space-y-4">
|
||||
@csrf @method('PUT')
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Service Name</label>
|
||||
<input type="text" name="service_name" value="{{ old('service_name', $rateCard->service_name) }}"
|
||||
class="input-soft" required>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Description</label>
|
||||
<textarea name="description" rows="2" class="input-soft resize-none">{{ old('description', $rateCard->description) }}</textarea>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Platform</label>
|
||||
<select name="platform" class="input-soft">
|
||||
@foreach(['general','instagram','tiktok','youtube'] as $p)
|
||||
<option value="{{ $p }}" {{ old('platform', $rateCard->platform) === $p ? 'selected' : '' }}>
|
||||
{{ ucfirst($p) }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Content Type</label>
|
||||
<input type="text" name="content_type" value="{{ old('content_type', $rateCard->content_type) }}"
|
||||
class="input-soft" placeholder="Reel, Story...">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Price</label>
|
||||
<input type="number" name="price" value="{{ old('price', $rateCard->price) }}"
|
||||
class="input-soft" min="0" step="100000">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Currency</label>
|
||||
<select name="currency" class="input-soft">
|
||||
<option value="IDR" {{ old('currency', $rateCard->currency) === 'IDR' ? 'selected' : '' }}>IDR</option>
|
||||
<option value="USD" {{ old('currency', $rateCard->currency) === 'USD' ? 'selected' : '' }}>USD</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Price Unit</label>
|
||||
<select name="price_unit" class="input-soft">
|
||||
@foreach(['per_content','per_month','per_campaign'] as $unit)
|
||||
<option value="{{ $unit }}" {{ old('price_unit', $rateCard->price_unit) === $unit ? 'selected' : '' }}>
|
||||
{{ str_replace('_', ' ', ucfirst($unit)) }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Sort Order</label>
|
||||
<input type="number" name="sort_order" value="{{ old('sort_order', $rateCard->sort_order) }}"
|
||||
class="input-soft" min="0">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 pt-1">
|
||||
<label class="flex items-center gap-3 cursor-pointer py-1">
|
||||
<input type="checkbox" name="is_negotiable" value="1"
|
||||
{{ old('is_negotiable', $rateCard->is_negotiable) ? 'checked' : '' }}
|
||||
class="w-4 h-4 accent-yellow-400">
|
||||
<span class="text-sm text-gray-600">Price is negotiable</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 cursor-pointer py-1">
|
||||
<input type="checkbox" name="is_active" value="1"
|
||||
{{ old('is_active', $rateCard->is_active) ? 'checked' : '' }}
|
||||
class="w-4 h-4 accent-green-400">
|
||||
<span class="text-sm text-gray-600">Active (show on public page)</span>
|
||||
</label>
|
||||
</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('rate-cards.index') }}"
|
||||
class="flex-1 py-3 text-center rounded-full border border-pink-200 text-gray-600 hover:bg-pink-50 font-semibold text-sm">
|
||||
Cancel
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
82
resources/views/rate-cards/index.blade.php
Normal file
82
resources/views/rate-cards/index.blade.php
Normal file
@@ -0,0 +1,82 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Rate Cards')
|
||||
@section('page-title', 'Rate Cards 💰')
|
||||
@section('page-subtitle', 'Manage your service pricing')
|
||||
|
||||
@section('content')
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-5">
|
||||
<a href="{{ route('rate-cards.public') }}" target="_blank"
|
||||
class="text-sm text-pink-500 hover:underline flex items-center gap-1">
|
||||
🔗 View Public Page →
|
||||
</a>
|
||||
<a href="{{ route('rate-cards.create') }}" class="btn-sakura text-sm shrink-0">＋ Add Service</a>
|
||||
</div>
|
||||
|
||||
@php
|
||||
$grouped = $rateCards->groupBy('platform');
|
||||
$platformOrder = ['general', 'instagram', 'tiktok', 'youtube'];
|
||||
@endphp
|
||||
|
||||
@foreach($platformOrder as $platform)
|
||||
@if($grouped->has($platform))
|
||||
<div class="mb-6">
|
||||
<h2 class="text-sm font-bold text-gray-700 mb-3 flex items-center gap-2">
|
||||
<span class="text-lg">{{ $grouped[$platform]->first()->platform_icon }}</span>
|
||||
{{ ucfirst($platform) }}
|
||||
<span class="text-xs text-gray-400 font-normal">({{ $grouped[$platform]->count() }})</span>
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3">
|
||||
@foreach($grouped[$platform] as $card)
|
||||
<div class="cat-card p-4 {{ !$card->is_active ? 'opacity-50' : '' }}">
|
||||
<div class="flex justify-between items-start gap-2 mb-2">
|
||||
<div class="min-w-0">
|
||||
<h3 class="font-bold text-gray-800 text-sm leading-tight">{{ $card->service_name }}</h3>
|
||||
@if($card->content_type)
|
||||
<span class="text-xs bg-pink-50 text-pink-600 px-2 py-0.5 rounded-full inline-block mt-1">{{ $card->content_type }}</span>
|
||||
@endif
|
||||
</div>
|
||||
<span class="text-xs px-2 py-1 rounded-full shrink-0
|
||||
{{ $card->is_active ? 'bg-green-100 text-green-600' : 'bg-gray-100 text-gray-400' }}">
|
||||
{{ $card->is_active ? 'Active' : 'Hidden' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@if($card->description)
|
||||
<p class="text-xs text-gray-500 mb-2 line-clamp-2">{{ $card->description }}</p>
|
||||
@endif
|
||||
|
||||
<div class="text-xl font-extrabold text-pink-500 mb-0.5">{{ $card->formatted_price }}</div>
|
||||
<div class="text-xs text-gray-400 mb-3">
|
||||
{{ str_replace('_', ' ', $card->price_unit) }}
|
||||
@if($card->is_negotiable) <span class="text-amber-500 ml-1">· Negotiable</span> @endif
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 pt-3 border-t border-pink-50">
|
||||
<a href="{{ route('rate-cards.edit', $card) }}"
|
||||
class="flex-1 text-center text-xs py-2 rounded-full border border-pink-200 text-gray-600 hover:bg-pink-50 font-medium">
|
||||
Edit
|
||||
</a>
|
||||
<form action="{{ route('rate-cards.destroy', $card) }}" method="POST"
|
||||
onsubmit="return confirm('Delete this entry?')">
|
||||
@csrf @method('DELETE')
|
||||
<button class="text-xs py-2 px-4 rounded-full border border-red-100 text-red-400 hover:bg-red-50">
|
||||
Delete
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
@if($rateCards->isEmpty())
|
||||
<div class="text-center py-20 text-gray-400">
|
||||
<span class="text-5xl block mb-3">💰</span>
|
||||
<p class="text-sm">No rate cards yet.</p>
|
||||
<a href="{{ route('rate-cards.create') }}" class="btn-sakura mt-4 inline-block">Add your first service!</a>
|
||||
</div>
|
||||
@endif
|
||||
@endsection
|
||||
72
resources/views/rate-cards/public.blade.php
Normal file
72
resources/views/rate-cards/public.blade.php
Normal file
@@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Rate Card — KOL Manager</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Nunito', sans-serif; background: #FFF8F0; color: #374151; padding: 40px 20px; }
|
||||
.container { max-width: 800px; margin: 0 auto; }
|
||||
.header { text-align: center; margin-bottom: 48px; }
|
||||
.logo { font-size: 48px; margin-bottom: 12px; }
|
||||
.title { font-size: 32px; font-weight: 900; color: #FFB7C5; }
|
||||
.subtitle { color: #9CA3AF; margin-top: 6px; font-size: 14px; }
|
||||
.platform-section { margin-bottom: 32px; }
|
||||
.platform-title { font-size: 18px; font-weight: 800; color: #374151; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
|
||||
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
|
||||
.card { background: white; border-radius: 24px; padding: 20px; border: 1px solid #FFE4EC; box-shadow: 0 2px 8px rgba(255,183,197,0.15); }
|
||||
.service { font-weight: 700; color: #1F2937; margin-bottom: 6px; }
|
||||
.type { display: inline-block; background: #FFF0F5; color: #FFB7C5; font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 20px; margin-bottom: 8px; }
|
||||
.desc { font-size: 12px; color: #9CA3AF; margin-bottom: 12px; line-height: 1.5; }
|
||||
.price { font-size: 22px; font-weight: 900; color: #FFB7C5; }
|
||||
.price-meta { font-size: 11px; color: #D1D5DB; margin-top: 2px; }
|
||||
.negotiable { font-size: 11px; color: #F59E0B; font-weight: 600; }
|
||||
.footer { text-align: center; margin-top: 60px; color: #D1D5DB; font-size: 12px; }
|
||||
@media print { body { background: white; } .card { break-inside: avoid; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="logo">🐱</div>
|
||||
<div class="title">Rate Card</div>
|
||||
<div class="subtitle">Services & Pricing · {{ now()->format('Y') }}</div>
|
||||
</div>
|
||||
|
||||
@forelse($rateCards as $platform => $cards)
|
||||
<div class="platform-section">
|
||||
<div class="platform-title">
|
||||
<span>{{ $cards->first()->platform_icon }}</span>
|
||||
{{ ucfirst($platform) }}
|
||||
</div>
|
||||
<div class="cards">
|
||||
@foreach($cards as $card)
|
||||
<div class="card">
|
||||
@if($card->content_type)
|
||||
<div class="type">{{ $card->content_type }}</div>
|
||||
@endif
|
||||
<div class="service">{{ $card->service_name }}</div>
|
||||
@if($card->description)
|
||||
<div class="desc">{{ $card->description }}</div>
|
||||
@endif
|
||||
<div class="price">{{ $card->formatted_price }}</div>
|
||||
<div class="price-meta">{{ str_replace('_', ' ', $card->price_unit) }}</div>
|
||||
@if($card->is_negotiable)
|
||||
<div class="negotiable">✦ Negotiable</div>
|
||||
@endif
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<p style="text-align:center; color:#9CA3AF; padding: 60px 0;">No rate cards published yet.</p>
|
||||
@endforelse
|
||||
|
||||
<div class="footer">
|
||||
Generated by KOL Manager · Prices may vary. Contact for custom packages. 🐾
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
252
resources/views/schedule/index.blade.php
Normal file
252
resources/views/schedule/index.blade.php
Normal file
@@ -0,0 +1,252 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Schedule')
|
||||
@section('page-title', 'Schedule & Calendar 📅')
|
||||
@section('page-subtitle', 'Tap a date or event to manage it')
|
||||
|
||||
@section('content')
|
||||
|
||||
{{-- ── Add Event Form (always accessible, collapsible) ─────── --}}
|
||||
<div class="cat-card p-4 mb-4" x-data="{ open: false }">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-sm font-bold text-gray-700 flex items-center gap-2">➕ New Event</h3>
|
||||
<button class="btn-sakura text-xs px-4 py-1.5" @click="open = !open"
|
||||
x-text="open ? '✕ Close' : '＋ Add Event'"></button>
|
||||
</div>
|
||||
|
||||
<form x-show="open" x-transition action="{{ route('schedule.store') }}" method="POST"
|
||||
class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-3"
|
||||
id="new-event-form">
|
||||
@csrf
|
||||
{{-- Hidden combined datetime fields --}}
|
||||
<input type="hidden" name="start_time" id="start_time_hidden">
|
||||
<input type="hidden" name="end_time" id="end_time_hidden">
|
||||
|
||||
<div class="sm:col-span-2">
|
||||
<label class="text-xs font-semibold text-gray-600">Title <span class="text-pink-400">*</span></label>
|
||||
<input type="text" name="title" class="input-soft mt-1" placeholder="Event title" required>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-600">Type</label>
|
||||
<select name="event_type" class="input-soft mt-1">
|
||||
<option value="task">📋 Task</option>
|
||||
<option value="meeting">🤝 Meeting</option>
|
||||
<option value="deadline">⏰ Deadline</option>
|
||||
<option value="posting">📸 Posting</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-600">Client</label>
|
||||
<select name="client_id" class="input-soft mt-1">
|
||||
<option value="">— None —</option>
|
||||
@foreach($clients as $client)
|
||||
<option value="{{ $client->id }}">{{ $client->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{{-- Start: date + time side by side --}}
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-600">Start Date <span class="text-pink-400">*</span></label>
|
||||
<input type="date" id="start_date" class="input-soft mt-1" required>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-600">Start Time</label>
|
||||
<input type="time" id="start_time_input" class="input-soft mt-1" value="09:00">
|
||||
</div>
|
||||
|
||||
{{-- End: date + time side by side --}}
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-600">End Date</label>
|
||||
<input type="date" id="end_date" class="input-soft mt-1">
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-600">End Time</label>
|
||||
<input type="time" id="end_time_input" class="input-soft mt-1" value="18:00">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<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
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-1">
|
||||
<input type="checkbox" name="is_priority" value="1" id="priority" class="w-4 h-4 accent-pink-400">
|
||||
<label for="priority" class="text-xs text-gray-600 cursor-pointer">⭐ Priority</label>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<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>
|
||||
<div class="sm:col-span-2">
|
||||
<button type="submit" class="btn-sakura w-full">🐾 Schedule It!</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{{-- ── Upcoming Alert Strip ─────────────────────────────────── --}}
|
||||
@php
|
||||
$upcomingList = $events->filter(fn($e) => $e->start_time->isFuture() && $e->start_time->diffInHours(now()) <= 24);
|
||||
@endphp
|
||||
@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="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>
|
||||
<div class="text-xs text-gray-400">{{ $event->start_time->format('H:i') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- ── Calendar ─────────────────────────────────────────────── --}}
|
||||
<div class="cat-card p-3 lg:p-5">
|
||||
<div id="calendar"></div>
|
||||
</div>
|
||||
|
||||
{{-- ── Event Detail Modal ───────────────────────────────────── --}}
|
||||
<div id="event-modal" class="fixed inset-0 z-50 flex items-end sm:items-center justify-center bg-black/40 hidden">
|
||||
<div class="cat-card p-5 w-full sm:max-w-md rounded-b-none sm:rounded-3xl shadow-xl mx-0 sm:mx-4">
|
||||
<div class="w-10 h-1 bg-gray-200 rounded-full mx-auto mb-4 sm:hidden"></div>
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h3 class="font-bold text-gray-800 text-base" id="modal-title">Event</h3>
|
||||
<button onclick="document.getElementById('event-modal').classList.add('hidden')"
|
||||
class="text-gray-400 hover:text-gray-600 text-xl leading-none">✕</button>
|
||||
</div>
|
||||
<div id="modal-body" class="text-sm text-gray-600 space-y-2 mb-4"></div>
|
||||
<div id="modal-actions" class="flex gap-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('scripts')
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js"></script>
|
||||
|
||||
<style>
|
||||
/* ── FullCalendar mobile overrides ── */
|
||||
.fc .fc-toolbar { flex-wrap: wrap; gap: 8px; }
|
||||
.fc .fc-toolbar-title { font-size: 1rem; font-weight: 700; }
|
||||
.fc .fc-button {
|
||||
background: #FFB7C5 !important;
|
||||
border-color: #FFB7C5 !important;
|
||||
border-radius: 999px !important;
|
||||
font-size: 0.75rem !important;
|
||||
padding: 4px 12px !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.fc .fc-button:hover { background: #FF8FAD !important; border-color: #FF8FAD !important; }
|
||||
.fc .fc-button-active { background: #FF8FAD !important; border-color: #FF8FAD !important; }
|
||||
.fc .fc-daygrid-event { border-radius: 8px !important; font-size: 0.7rem; }
|
||||
.fc .fc-list-event:hover td { background: #FFF0F5 !important; }
|
||||
.fc .fc-list-day-cushion { background: #FFF8F0 !important; }
|
||||
@media (max-width: 639px) {
|
||||
.fc .fc-toolbar { gap: 6px; }
|
||||
.fc .fc-toolbar-title { font-size: 0.9rem; }
|
||||
.fc .fc-button { padding: 3px 8px !important; font-size: 0.7rem !important; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const isMobile = window.innerWidth < 640;
|
||||
const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
|
||||
initialView: isMobile ? 'listWeek' : 'dayGridMonth',
|
||||
headerToolbar: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: isMobile ? 'listWeek,timeGridDay' : 'dayGridMonth,timeGridWeek,listWeek',
|
||||
},
|
||||
editable: !isMobile,
|
||||
selectable: true,
|
||||
events: @json($calendarEvents),
|
||||
height: 'auto',
|
||||
windowResize(view) {
|
||||
const mob = window.innerWidth < 640;
|
||||
if (mob && calendar.view.type !== 'listWeek' && calendar.view.type !== 'timeGridDay') {
|
||||
calendar.changeView('listWeek');
|
||||
}
|
||||
},
|
||||
|
||||
eventDrop(info) {
|
||||
fetch(`/schedule/${info.event.id}/dates`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
start_time: info.event.startStr,
|
||||
end_time: info.event.endStr || null,
|
||||
}),
|
||||
}).then(r => r.ok ? window.KolManager.notify('Event rescheduled! 🐾') : info.revert());
|
||||
},
|
||||
|
||||
select(info) {
|
||||
// Pre-fill date from calendar click
|
||||
const dateInput = document.getElementById('start_date');
|
||||
if (dateInput) dateInput.value = info.startStr.substring(0, 10);
|
||||
const endInput = document.getElementById('end_date');
|
||||
if (endInput && info.endStr) endInput.value = info.endStr.substring(0, 10);
|
||||
},
|
||||
|
||||
eventClick(info) {
|
||||
const e = info.event, p = e.extendedProps;
|
||||
document.getElementById('modal-title').textContent = e.title;
|
||||
document.getElementById('modal-body').innerHTML = `
|
||||
<div class="flex gap-2"><span class="text-gray-400 w-16 shrink-0">Type</span><span>${p.type}</span></div>
|
||||
<div class="flex gap-2"><span class="text-gray-400 w-16 shrink-0">Status</span><span>${p.status}</span></div>
|
||||
${p.client ? `<div class="flex gap-2"><span class="text-gray-400 w-16 shrink-0">Client</span><span>${p.client}</span></div>` : ''}
|
||||
<div class="flex gap-2"><span class="text-gray-400 w-16 shrink-0">Start</span><span>${e.start?.toLocaleString()}</span></div>
|
||||
${e.end ? `<div class="flex gap-2"><span class="text-gray-400 w-16 shrink-0">End</span><span>${e.end.toLocaleString()}</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');
|
||||
},
|
||||
});
|
||||
|
||||
calendar.render();
|
||||
|
||||
// Close modal on backdrop tap
|
||||
document.getElementById('event-modal').addEventListener('click', function(e) {
|
||||
if (e.target === this) this.classList.add('hidden');
|
||||
});
|
||||
|
||||
// Combine date + time inputs into hidden datetime fields before submit
|
||||
document.getElementById('new-event-form').addEventListener('submit', function(e) {
|
||||
const startDate = document.getElementById('start_date').value;
|
||||
const startTime = document.getElementById('start_time_input').value || '00:00';
|
||||
const endDate = document.getElementById('end_date').value;
|
||||
const endTime = document.getElementById('end_time_input').value || '00:00';
|
||||
|
||||
if (!startDate) {
|
||||
e.preventDefault();
|
||||
alert('Please select a start date.');
|
||||
return;
|
||||
}
|
||||
|
||||
document.getElementById('start_time_hidden').value = startDate + 'T' + startTime;
|
||||
if (endDate) {
|
||||
document.getElementById('end_time_hidden').value = endDate + 'T' + endTime;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@endsection
|
||||
142
resources/views/social-hub/index.blade.php
Normal file
142
resources/views/social-hub/index.blade.php
Normal file
@@ -0,0 +1,142 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Social Hub')
|
||||
@section('page-title', 'Social Media Hub 📱')
|
||||
@section('page-subtitle', 'Track your platform stats and posting frequency')
|
||||
|
||||
@section('content')
|
||||
{{-- Platform Cards --}}
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-8">
|
||||
@foreach($stats as $item)
|
||||
@php $stat = $item['latest']; $platform = $item['platform']; @endphp
|
||||
<div class="cat-card p-6">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<span class="text-3xl">{{ $stat?->platform_icon ?? '📱' }}</span>
|
||||
<div>
|
||||
<div class="font-bold text-gray-800 capitalize">{{ $platform }}</div>
|
||||
<div class="text-xs text-gray-400">{{ $stat?->handle ?? 'Not connected' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($stat)
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="bg-pink-50 rounded-2xl p-3 text-center">
|
||||
<div class="text-xl font-extrabold text-pink-500">{{ $stat->formatted_followers }}</div>
|
||||
<div class="text-xs text-gray-500">Followers</div>
|
||||
</div>
|
||||
<div class="bg-purple-50 rounded-2xl p-3 text-center">
|
||||
<div class="text-xl font-extrabold text-purple-500">{{ $stat->engagement_rate }}%</div>
|
||||
<div class="text-xs text-gray-500">Engagement</div>
|
||||
</div>
|
||||
<div class="bg-amber-50 rounded-2xl p-3 text-center">
|
||||
<div class="text-xl font-extrabold text-amber-500">{{ number_format($stat->avg_views) }}</div>
|
||||
<div class="text-xs text-gray-500">Avg Views</div>
|
||||
</div>
|
||||
<div class="bg-green-50 rounded-2xl p-3 text-center">
|
||||
<div class="text-xl font-extrabold text-green-500">{{ number_format($stat->avg_likes) }}</div>
|
||||
<div class="text-xs text-gray-500">Avg Likes</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-3 text-right">Updated {{ $stat->recorded_date->format('d M Y') }}</p>
|
||||
@else
|
||||
<div class="text-center py-6 text-gray-400">
|
||||
<p class="text-sm">No stats yet</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
{{-- Update Stats --}}
|
||||
<div class="cat-card p-6 mb-8" x-data="{ open: false, platform: 'instagram' }">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="font-bold text-gray-700 flex items-center gap-2">📊 Update Stats</h2>
|
||||
<button class="btn-sakura text-sm" @click="open = !open">
|
||||
<span x-text="open ? '✕ Close' : '＋ Add Stats'"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form x-show="open" x-transition action="{{ route('social-hub.store-stats') }}" method="POST"
|
||||
class="mt-5 grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
@csrf
|
||||
<div class="col-span-2 lg:col-span-1">
|
||||
<label class="text-xs font-semibold text-gray-600">Platform</label>
|
||||
<select name="platform" x-model="platform" class="input-soft mt-1">
|
||||
<option value="instagram">📸 Instagram</option>
|
||||
<option value="tiktok">🎵 TikTok</option>
|
||||
<option value="youtube">▶️ YouTube</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-600">Handle</label>
|
||||
<input type="text" name="handle" class="input-soft mt-1 text-sm" placeholder="@yourhandle">
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-600">Followers</label>
|
||||
<input type="number" name="followers" class="input-soft mt-1 text-sm" placeholder="0" min="0" required>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-600">Following</label>
|
||||
<input type="number" name="following" class="input-soft mt-1 text-sm" placeholder="0" min="0">
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-600">Posts Count</label>
|
||||
<input type="number" name="posts_count" class="input-soft mt-1 text-sm" placeholder="0" min="0">
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-600">Engagement Rate (%)</label>
|
||||
<input type="number" name="engagement_rate" class="input-soft mt-1 text-sm" placeholder="0.00" step="0.01">
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-600">Avg Views</label>
|
||||
<input type="number" name="avg_views" class="input-soft mt-1 text-sm" placeholder="0" min="0">
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-600">Avg Likes</label>
|
||||
<input type="number" name="avg_likes" class="input-soft mt-1 text-sm" placeholder="0" min="0">
|
||||
</div>
|
||||
<div class="col-span-2 lg:col-span-4">
|
||||
<button type="submit" class="btn-sakura text-sm px-6">📊 Save Stats</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{{-- Posting Frequency --}}
|
||||
<div class="cat-card p-6">
|
||||
<h2 class="font-bold text-gray-700 mb-4 flex items-center gap-2">📈 Posting Frequency</h2>
|
||||
@if($postingFrequency->isNotEmpty())
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr class="text-xs text-gray-500">
|
||||
<th>Platform</th>
|
||||
<th>Month</th>
|
||||
<th>Posts</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($postingFrequency as $row)
|
||||
<tr class="hover">
|
||||
<td class="capitalize">{{ $row->platform }}</td>
|
||||
<td>{{ $row->month }}</td>
|
||||
<td>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-24 h-2 rounded-full bg-pink-100">
|
||||
<div class="h-2 rounded-full bg-sakura" style="width: {{ min(100, $row->count * 10) }}%;"></div>
|
||||
</div>
|
||||
<span class="font-bold text-gray-700">{{ $row->count }}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@else
|
||||
<div class="text-center py-8 text-gray-400">
|
||||
<span class="text-4xl block mb-2">📱</span>
|
||||
<p class="text-sm">No posted content yet. Mark content as "Posted" to see frequency here.</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endsection
|
||||
225
resources/views/welcome.blade.php
Normal file
225
resources/views/welcome.blade.php
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user