RomhackPlaza/resources/views/queue/item.blade.php

<div class="queue-item
    {{ $entry->state === 'rejected' ? 'queue-item--rejected' : 'queue-item--pending' }}
"
@if($entry->state === 'rejected')
    style="--reject-progress: {{ min(100, (now()->diffInDays($entry->rejected_at) / 7) * 100) }}%"
@endif
>
    <div class="queue-item-header">
        <div class="queue-item-info">
            <h3 class="queue-item-title">{{ $entry->complete_title ?? $entry->title }}</h3>
            @if($entry->state === 'rejected')
                <span class="badge badge--danger">
                    <i data-lucide="x-circle" size="12"></i>
                    Rejected
                    @php
                        $daysLeft = intval(7 - now()->diffInDays($entry->rejected_at));
                    @endphp
                    @if($daysLeft > 0)
                        - deleted in {{ $daysLeft }} days
                    @endif
                </span>
            @endif
            <div class="queue-item-meta">
                Submitted by <x-xf-username-link :user-id="$entry->user_id" />
                on {{ $entry->created_at->format('Y-m-d') }}
                @if($entry->queue_type === 'entry' )
                    <span class="badge {{ $entry->type }}">{{ \App\View\Components\EntryCard::ENTRY_TYPES_BADGE[$entry->type] ?? $entry->type }}</span>
                @else
                    <span class="badge news">News</span>
                @endif
            </div>
        </div>

        @can('manageButtonsInQueue',$entry)
            <div class="queue-item-actions-header">
                @if( $entry->queue_type === 'entry' )
                    <a href="{{ route('entries.show', ['section' => $entry->type, 'entry' => $entry ]) }}" class="btn" target="_blank">
                        <i data-lucide="external-link" size="14"></i>
                        View Entry
                    </a>
                    <a href="{{ route('submit.edit', ['section' => $entry->type, 'entry' =>$entry ] ) }}" class="btn" target="_blank">
                        <i data-lucide="pen" size="14"></i>
                        Edit
                    </a>
                @else
                    <a href="{{ route('news.show', ['news' => $entry ]) }}" class="btn" target="_blank">
                        <i data-lucide="external-link" size="14"></i>
                        View Entry
                    </a>
                    <a href="{{ route('news.edit', ['news' => $entry ] ) }}" class="btn" target="_blank">
                        <i data-lucide="pen" size="14"></i>
                        Edit
                    </a>
                @endif
            </div>
        @endcan
    </div>

    <div class="timeline-container">
        <div class="timeline">


            <div class="timeline-step timeline-step--validated">
                <div class="timeline-dot">
                    <i data-lucide="check" size="16"></i>
                </div>
                <span class="timeline-label">Submitted</span>
            </div>

            <div class="timeline-step {{ $entry->state === 'pending' ? 'timeline-step--active' : 'timeline-step--validated' }}">
                <div class="timeline-dot">
                    @if($entry->state === 'pending')
                        <i data-lucide="search" size="16"></i>
                    @else
                        <i data-lucide="check" size="16"></i>
                    @endif
                </div>
                <span class="timeline-label">Under review</span>
            </div>

            @if($entry->state === 'rejected')
                <div class="timeline-step timeline-step--rejected">
                    <div class="timeline-dot">
                        <i data-lucide="x" size="16"></i>
                    </div>
                    <span class="timeline-label">Rejected</span>
                </div>
            @else
                <div class="timeline-step {{ $entry->state === 'published' ? 'timeline-step--validated' : '' }}">
                    <div class="timeline-dot">
                        @if($entry->state === 'published')
                            <i data-lucide="check" size="16"></i>
                        @endif
                    </div>
                    <span class="timeline-label">Approved</span>
                </div>
            @endif

        </div>
    </div>

    @if($entry->state === 'rejected' && $entry->staff_comment)
        <div class="queue-reject-reason">
            <i data-lucide="alert-circle" size="14"></i>
            <div>
                <strong>Rejection reason :</strong>
                {{ $entry->staff_comment }}
            </div>
        </div>
    @endif

    @can('approve',$entry)
        @if($entry->state === 'pending')
            <div class="queue-mod-zone">
                <form action="{{ $entry->queue_type === 'entry' ? route('queue.comment', $entry ) : route('queue.news.comment', $entry ) }}" method="POST">
                    @csrf
                    @method('PATCH')
                    <div class="form-group">
                        <x-form-field-title name="Comment" />
                        <textarea class="form-input" name="comment" rows="3">{{ $entry->staff_comment }}</textarea>
                    </div>
                    <div class="queue-mod-actions">
                        <button type="submit" class="btn">
                            <i data-lucide="save" size="14"></i>
                            Save comment
                        </button>
                    </div>
                </form>

                <div class="queue-mod-separator"></div>

                <form action="{{ $entry->queue_type === 'entry' ? route('queue.approve', $entry) : route('queue.news.approve', $entry) }}" method="POST" style="display:inline">
                    @csrf
                    @method('PATCH')
                    <button type="submit" class="btn success" onclick="return confirm('Approve this entry?')">
                        <i data-lucide="check-circle" size="14"></i>
                        Approve
                    </button>
                </form>

                <div x-data="{open: false}">
                    <button type="button" class="btn danger" @click="open = !open">
                        <i data-lucide="x-circle" size="14"></i>
                        Reject
                    </button>

                    <div x-show="open" x-cloak class="queue-reject-form">
                        <form action="{{ $entry->queue_type === 'entry' ? route('queue.reject', $entry) : route('queue.news.reject', $entry) }}" method="POST">
                            @csrf
                            @method('PATCH')
                            <div class="form-group">
                                <x-form-field-title name="Rejection reason" required="true" />
                                <textarea class="form-input" name="reason" rows="3" required></textarea>
                            </div>
                            <div class="queue-mod-actions">
                                <button type="button" class="btn" @click="open = false">Cancel</button>
                                <button type="submit" class="btn btn--danger">
                                    <i data-lucide="x-circle" size="14"></i>
                                    Confirm rejection
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        @endif
    @endcan

</div>