607 lines
33 KiB
PHP
607 lines
33 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Dashboard Mahasiswa')
|
|
|
|
@php
|
|
use App\Models\PengajuanUkt;
|
|
@endphp
|
|
|
|
@section('content')
|
|
|
|
@if(session('success'))
|
|
<div class="alert alert-success alert-dismissible fade show">
|
|
{{ session('success') }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<!-- Welcome Alert -->
|
|
<div class="alert alert-info d-flex align-items-center">
|
|
<div>
|
|
<h5 class="mb-1"><strong>Selamat datang, {{ auth()->user()->name }}!</strong></h5>
|
|
</div>
|
|
</div>
|
|
|
|
@php
|
|
$showAnnouncementPenurunan = $showAnnouncementPenurunan ?? false;
|
|
$showAnnouncementPengangsuran = $showAnnouncementPengangsuran ?? false;
|
|
$showAnnouncement = $showAnnouncement ?? false;
|
|
$tanggal_pengumuman = $tanggal_pengumuman ?? null;
|
|
$formPenurunan = $formPenurunan ?? null;
|
|
$formPengangsuran = $formPengangsuran ?? null;
|
|
$rankingFile = $rankingFile ?? null;
|
|
$pengajuan = $pengajuan ?? collect();
|
|
$today = $today ?? now();
|
|
@endphp
|
|
|
|
|
|
<!-- Announcement Section -->
|
|
@php
|
|
use Illuminate\Support\Facades\Storage;
|
|
$rankingFileExists = $rankingFile && Storage::disk('public')->exists($rankingFile->path);
|
|
@endphp
|
|
|
|
@if($rankingFile && Storage::exists('public/' . $rankingFile->path) && ($showAnnouncement ?? false)) <div class="alert alert-info d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 announcement-card p-3 rounded-3 shadow-sm">
|
|
<div class="d-flex align-items-start gap-3">
|
|
<i class="fas fa-bullhorn fs-3 text-primary mt-1"></i>
|
|
<div>
|
|
<h5 class="mb-1 fw-bold text-dark"> Hasil Pengumuman UKT Tersedia</h5>
|
|
<p class="mb-0">Laporan Hasil Penyesuaian UKT (Penurunan dan Pengangsuran)</p>
|
|
<div class="file-info mt-2">
|
|
<i class="fas fa-info-circle"></i>
|
|
<small>Diunggah pada: {{ $rankingFile->created_at->translatedFormat('d F Y H:i') }}</small>
|
|
@if($tanggal_pengumuman)
|
|
<br><small>Tanggal Pengumuman: {{ $tanggal_pengumuman->translatedFormat('d F Y') }}</small>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex flex-column flex-md-row gap-2">
|
|
<a href="{{ route('mahasiswa.ranking.download', $rankingFile->id) }}"
|
|
class="btn btn-primary"
|
|
onclick="event.preventDefault(); window.open(this.href, '_blank');">
|
|
<i class="fas fa-download me-1"></i> Unduh PDF
|
|
</a>
|
|
<a href="#" class="btn btn-success">
|
|
<i class="fas fa-eye me-1"></i> Lihat Detail
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="alert alert-warning d-flex align-items-center">
|
|
<div>
|
|
<h5 class="mb-1">Pengumuman Hasil</h5>
|
|
<p class="mb-0">
|
|
@if($rankingFile && !Storage::exists('public/' . $rankingFile->path))
|
|
File pengumuman belum tersedia.
|
|
@elseif(!$showAnnouncement && $tanggal_pengumuman)
|
|
Hasil akan diumumkan pada {{ $tanggal_pengumuman->translatedFormat('d F Y') }}
|
|
@else
|
|
Hasil penyesuaian UKT belum tersedia. Silakan cek kembali nanti.
|
|
@endif
|
|
</p>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Forms Section -->
|
|
<div class="row">
|
|
<!-- Form Penurunan -->
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<i class="fas fa-file-alt me-2"></i>
|
|
@if($formPenurunan)
|
|
{{ $formPenurunan->nama_form }}
|
|
@else
|
|
Form Penurunan UKT
|
|
@endif
|
|
</div>
|
|
<span class="badge bg-white text-primary">Semester {{ optional($formPenurunan)->semester ?? '-' }}</span>
|
|
</div>
|
|
<div class="card-body">
|
|
@if($formPenurunan && $formPenurunan->status === 'Dibuka')
|
|
<div class="mb-4">
|
|
<div class="timeline-steps mb-4">
|
|
<div class="timeline-step">
|
|
<div class="timeline-content">
|
|
<div class="timeline-icon">
|
|
<i class="far fa-calendar-alt"></i>
|
|
</div>
|
|
<p class="h6 mt-2 mb-1 text-dark">Pembukaan</p>
|
|
<p class="mb-0 text-sm">
|
|
{{ $formPenurunan->tanggal_pembukaan ? \Carbon\Carbon::parse($formPenurunan->tanggal_pembukaan)->translatedFormat('d F Y') : '-' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-step">
|
|
<div class="timeline-content">
|
|
<div class="timeline-icon">
|
|
<i class="far fa-calendar-alt"></i>
|
|
</div>
|
|
<p class="h6 mt-2 mb-1 text-dark">Penutupan</p>
|
|
<p class="mb-0 text-sm">
|
|
{{ $formPenurunan->tanggal_penutupan ? \Carbon\Carbon::parse($formPenurunan->tanggal_penutupan)->translatedFormat('d F Y') : '-' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-step">
|
|
<div class="timeline-content">
|
|
<div class="timeline-icon">
|
|
<i class="far fa-calendar-alt"></i>
|
|
</div>
|
|
<p class="h6 mt-2 mb-1 text-dark">Verifikasi</p>
|
|
<p class="mb-0 text-sm">
|
|
{{ $formPenurunan->tanggal_verifikasi ? \Carbon\Carbon::parse($formPenurunan->tanggal_verifikasi)->translatedFormat('d F Y') : '-' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-step">
|
|
<div class="timeline-content">
|
|
<div class="timeline-icon">
|
|
<i class="far fa-calendar-alt"></i>
|
|
</div>
|
|
<p class="h6 mt-2 mb-1 text-dark">Pengumuman</p>
|
|
<p class="mb-0 text-sm">
|
|
{{ $formPenurunan->tanggal_pengumuman ? \Carbon\Carbon::parse($formPenurunan->tanggal_pengumuman)->translatedFormat('d F Y') : '-' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@if(isset($canSubmitPenurunan) && $canSubmitPenurunan)
|
|
<a href="{{ route('form.penurunan', 'penurunan') }}"
|
|
class="btn btn-success w-100 d-inline-flex align-items-center justify-content-center">
|
|
<i class="fas fa-file-import me-2"></i> Ajukan Sekarang
|
|
</a>
|
|
@else
|
|
<div class="alert alert-warning mt-3 mb-0 text-center">
|
|
@if(isset($submissionStatusPenurunan) && $submissionStatusPenurunan === 'menunggu')
|
|
<i class="fas fa-clock me-1"></i> Pengajuan Anda masih dalam proses verifikasi
|
|
@elseif(isset($submissionStatusPenurunan) && $submissionStatusPenurunan === 'valid')
|
|
<i class="fas fa-check-circle me-1"></i> Pengajuan Anda sudah divalidasi
|
|
@else
|
|
<i class="fas fa-info-circle me-1"></i> Anda tidak dapat mengajukan form ini
|
|
@endif
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@else
|
|
<div class="alert alert-secondary text-center">
|
|
<i class="fas fa-file-alt me-1"></i>
|
|
<h5 class="d-inline">Form Penurunan UKT</h5>
|
|
<p class="mb-0 text-dark">Saat ini form tidak tersedia</p>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Status Pengajuan Penurunan -->
|
|
<div class="card mt-4 border-0 shadow-sm">
|
|
<div class="card-header bg-info text-white">
|
|
<i class="fas fa-clipboard-check me-2"></i>
|
|
<span>Status Pengajuan</span>
|
|
</div>
|
|
<div class="card-body">
|
|
@php
|
|
$pengajuanPenurunan = PengajuanUkt::with('form')
|
|
->where('mahasiswa_id', $user->id)
|
|
->whereHas('form', function ($query) use ($formPenurunan) {
|
|
$query->where('jenis_form', 'penurunan')
|
|
->where('semester', $formPenurunan->semester)
|
|
->where('tahun', $formPenurunan->tahun);
|
|
})->latest()->first();
|
|
@endphp
|
|
|
|
@if($pengajuanPenurunan)
|
|
<div class="mb-3 p-3 border rounded">
|
|
@if($showAnnouncementPenurunan)
|
|
<div class="text-center">
|
|
<div class="alert alert-info mb-3">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
Hasil pengumuman penurunan UKT sudah tersedia
|
|
</div>
|
|
<a href="{{ route('mahasiswa.ranking.download', $rankingFile->id ?? '') }}"
|
|
class="btn btn-primary"
|
|
onclick="event.preventDefault(); window.open(this.href, '_blank');">
|
|
<i class="fas fa-eye me-1"></i> Lihat Hasil Pengumuman
|
|
</a>
|
|
<p class="mt-2 mb-0 small text-muted">
|
|
@if($formPenurunan && $formPenurunan->tanggal_pengumuman)
|
|
Pengumuman tersedia sejak {{ \Carbon\Carbon::parse($formPenurunan->tanggal_pengumuman)->translatedFormat('d F Y') }}
|
|
@endif
|
|
</p>
|
|
</div>
|
|
@else
|
|
<!-- Show regular status before announcement date -->
|
|
<div class="d-flex justify-content-center mb-3">
|
|
@if($pengajuanPenurunan->status_validasi == 'valid')
|
|
<span class="badge bg-success text-white rounded-pill py-2 px-3 d-flex align-items-center">
|
|
<i class="fas fa-check-circle me-1"></i> Valid
|
|
</span>
|
|
@elseif($pengajuanPenurunan->status_validasi == 'tidak valid')
|
|
<span class="badge bg-danger text-white rounded-pill py-2 px-3 d-flex align-items-center">
|
|
<i class="fas fa-times-circle me-1"></i> Tidak Valid
|
|
</span>
|
|
@else
|
|
<span class="badge bg-warning rounded-pill py-2 px-3 d-flex align-items-center text-white">
|
|
<i class="fas fa-clock me-2"></i> Menunggu Verifikasi
|
|
</span>
|
|
@endif
|
|
</div>
|
|
@if($pengajuanPenurunan->status_validasi == 'tidak valid')
|
|
<div class="mt-3 p-3 rounded" style="background-color: #f8d7da; border-left: 4px solid #dc3545;">
|
|
<h6 class="fw-bold text-uppercase mb-3 text-danger">
|
|
<i class="fas fa-exclamation-circle me-1"></i> ALASAN PENOLAKAN:
|
|
</h6>
|
|
<ul class="mb-0 ps-3">
|
|
@foreach($pengajuanPenurunan->details as $detail)
|
|
@if($detail->rejection_reason)
|
|
<li class="mb-1 text-dark">
|
|
<strong>{{ $detail->kriteria }}:</strong> {{ $detail->rejection_reason }}
|
|
</li>
|
|
@endif
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
@endif
|
|
</div>
|
|
@else
|
|
<div class="text-center py-4">
|
|
<i class="fas fa-file-alt fs-1 text-muted mb-3"></i>
|
|
<p class="text-dark mb-0">Belum ada pengajuan penurunan</p>
|
|
</div>
|
|
@if(!$pengajuanPenurunan && !$formPenurunan)
|
|
<div class="alert alert-secondary text-center mt-3">
|
|
<i class="fas fa-check-circle me-1"></i>
|
|
Pengajuan semester sebelumnya telah berakhir. Silakan tunggu pembukaan berikutnya.
|
|
</div>
|
|
@endif
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Pengangsuran -->
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<i class="fas fa-file-alt me-2"></i>
|
|
@if($formPengangsuran)
|
|
{{ $formPengangsuran->nama_form }}
|
|
@else
|
|
Form Pengangsuran UKT
|
|
@endif
|
|
</div>
|
|
<span class="badge bg-white text-primary">Semester {{ optional($formPengangsuran)->semester ?? '-' }}</span>
|
|
</div>
|
|
<div class="card-body">
|
|
@if($formPengangsuran && $formPengangsuran->status === 'Dibuka')
|
|
<div class="mb-4">
|
|
<div class="timeline-steps mb-4">
|
|
<div class="timeline-step">
|
|
<div class="timeline-content">
|
|
<div class="timeline-icon">
|
|
<i class="far fa-calendar-alt"></i>
|
|
</div>
|
|
<p class="h6 mt-2 mb-1 text-dark">Pembukaan</p>
|
|
<p class="mb-0 text-sm">
|
|
{{ $formPengangsuran->tanggal_pembukaan ? \Carbon\Carbon::parse($formPengangsuran->tanggal_pembukaan)->translatedFormat('d F Y') : '-' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-step">
|
|
<div class="timeline-content">
|
|
<div class="timeline-icon">
|
|
<i class="far fa-calendar-alt"></i>
|
|
</div>
|
|
<p class="h6 mt-2 mb-1 text-dark">Penutupan</p>
|
|
<p class="mb-0 text-sm">
|
|
{{ $formPengangsuran->tanggal_penutupan ? \Carbon\Carbon::parse($formPengangsuran->tanggal_penutupan)->translatedFormat('d F Y') : '-' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-step">
|
|
<div class="timeline-content">
|
|
<div class="timeline-icon">
|
|
<i class="far fa-calendar-alt"></i>
|
|
</div>
|
|
<p class="h6 mt-2 mb-1 text-dark">Verifikasi</p>
|
|
<p class="mb-0 text-sm">
|
|
{{ $formPengangsuran->tanggal_verifikasi ? \Carbon\Carbon::parse($formPengangsuran->tanggal_verifikasi)->translatedFormat('d F Y') : '-' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-step">
|
|
<div class="timeline-content">
|
|
<div class="timeline-icon">
|
|
<i class="far fa-calendar-alt"></i>
|
|
</div>
|
|
<p class="h6 mt-2 mb-1 text-dark">Pengumuman</p>
|
|
<p class="mb-0 text-sm">
|
|
{{ $formPengangsuran->tanggal_pengumuman ? \Carbon\Carbon::parse($formPengangsuran->tanggal_pengumuman)->translatedFormat('d F Y') : '-' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@if(isset($canSubmitPengangsuran) && $canSubmitPengangsuran)
|
|
<a href="{{ route('form.pengangsuran', 'pengangsuran') }}"
|
|
class="btn btn-success w-100 d-inline-flex align-items-center justify-content-center">
|
|
<i class="fas fa-file-import me-2"></i> Ajukan Sekarang
|
|
</a>
|
|
@else
|
|
<div class="mt-3 mb-0 text-center">
|
|
@if(isset($submissionStatusPengangsuran) && $submissionStatusPengangsuran === 'menunggu')
|
|
<span class="d-inline-block px-3 py-2 fw-bold" style="background-color: #fff3cd; color: #664d03; border-radius: 0.5rem;">
|
|
<i class="fas fa-clock me-1"></i> Pengajuan Anda masih dalam proses verifikasi
|
|
</span>
|
|
@elseif(isset($submissionStatusPengangsuran) && $submissionStatusPengangsuran === 'valid')
|
|
<div class="alert alert-success fw-bold d-inline-block px-3 py-2 mb-0">
|
|
<i class="fas fa-check-circle me-1"></i> Pengajuan Anda sudah divalidasi
|
|
</div>
|
|
@else
|
|
<span class="d-inline-block px-3 py-2 fw-bold" style="background-color: #f8d7da; color: #842029; border-radius: 0.5rem;">
|
|
<i class="fas fa-info-circle me-1"></i> Anda tidak dapat mengajukan form ini
|
|
</span>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@else
|
|
<div class="alert alert-secondary text-center">
|
|
<i class="fas fa-file-alt me-1"></i>
|
|
<h5 class="d-inline">Form Pengangsuran UKT</h5>
|
|
<p class="mb-0">Saat ini form tidak tersedia</p>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Status Pengajuan Pengangsuran -->
|
|
<div class="card mt-4 border-0 shadow-sm">
|
|
<div class="card-header bg-info text-white">
|
|
<i class="fas fa-clipboard-check me-2"></i>
|
|
<span> Status Pengajuan </span>
|
|
</div>
|
|
<div class="card-body">
|
|
@php
|
|
$pengajuanPengangsuran = PengajuanUkt::with('form')
|
|
->where('mahasiswa_id', $user->id)
|
|
->whereHas('form', function ($query) use ($formPengangsuran) {
|
|
$query->where('jenis_form', 'pengangsuran')
|
|
->where('semester', $formPengangsuran->semester)
|
|
->where('tahun', $formPengangsuran->tahun);
|
|
})->latest()->first();
|
|
@endphp
|
|
|
|
@if($pengajuanPengangsuran)
|
|
<div class="mb-3 p-3 border rounded">
|
|
@if($showAnnouncementPengangsuran)
|
|
<div class="text-center">
|
|
<div class="alert alert-info mb-3">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
Hasil pengumuman pengangsuran UKT sudah tersedia
|
|
</div>
|
|
<a href="{{ route('mahasiswa.ranking.download', $rankingFile->id ?? '') }}"
|
|
class="btn btn-primary"
|
|
onclick="event.preventDefault(); window.open(this.href, '_blank');">
|
|
<i class="fas fa-eye me-1"></i> Lihat Hasil Pengumuman
|
|
</a>
|
|
<p class="mt-2 mb-0 small text-muted">
|
|
@if($formPengangsuran && $formPengangsuran->tanggal_pengumuman)
|
|
Pengumuman tersedia sejak {{ \Carbon\Carbon::parse($formPengangsuran->tanggal_pengumuman)->translatedFormat('d F Y') }}
|
|
@endif
|
|
</p>
|
|
</div>
|
|
@else
|
|
<div class="d-flex justify-content-center mb-3">
|
|
@if($pengajuanPengangsuran->status_validasi == 'valid')
|
|
<span class="badge bg-success text-white rounded-pill py-2 px-3 d-flex align-items-center">
|
|
<i class="fas fa-check-circle me-1"></i> Valid
|
|
</span>
|
|
@elseif($pengajuanPengangsuran->status_validasi == 'tidak valid')
|
|
<span class="badge bg-danger text-white rounded-pill py-2 px-3 d-flex align-items-center">
|
|
<i class="fas fa-times-circle me-1"></i> Tidak Valid
|
|
</span>
|
|
@else
|
|
<span class="badge bg-warning rounded-pill py-2 px-3 d-flex align-items-center text-white">
|
|
<i class="fas fa-clock me-2"></i> Menunggu Verifikasi
|
|
</span>
|
|
@endif
|
|
</div>
|
|
@if($pengajuanPengangsuran->status_validasi == 'tidak valid')
|
|
<div class="mt-3 p-3 rounded" style="background-color: #f8d7da; border-left: 4px solid #dc3545;">
|
|
<h6 class="fw-bold text-uppercase mb-3 text-danger">
|
|
<i class="fas fa-exclamation-circle me-1"></i> ALASAN PENOLAKAN:
|
|
</h6>
|
|
<ul class="mb-0 ps-3">
|
|
@foreach($pengajuanPengangsuran->details as $detail)
|
|
@if($detail->rejection_reason)
|
|
<li class="mb-1 text-dark">
|
|
<strong>{{ $detail->kriteria }}:</strong> {{ $detail->rejection_reason }}
|
|
</li>
|
|
@endif
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
@endif
|
|
</div>
|
|
@else
|
|
<div class="text-center py-4">
|
|
<i class="fas fa-file-alt fs-1 text-muted mb-3"></i>
|
|
<p class="text-dark mb-0">Belum ada pengajuan pengangsuran</p>
|
|
</div>
|
|
@if(!$pengajuanPengangsuran && !$formPengangsuran)
|
|
<div class="alert alert-secondary text-center mt-3">
|
|
<i class="fas fa-check-circle me-1"></i>
|
|
Pengajuan semester sebelumnya telah berakhir. Silakan tunggu pembukaan berikutnya.
|
|
</div>
|
|
@endif
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- PINTU POLIJE Notification -->
|
|
<div class="alert alert-warning mb-4">
|
|
<div class="d-flex align-items-center">
|
|
<div>
|
|
<h5 class="mb-1"><strong>Ada pertanyaan atau sanggahan?</strong></h5>
|
|
<p class="mb-0">Silakan datang dan menghubungi <strong>PINTU POLIJE</strong> untuk konsultasi lebih lanjut.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Base Styles */
|
|
.card {
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
|
|
.card-header {
|
|
padding: 1rem 1.5rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.alert {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.badge {
|
|
font-weight: 500;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* Timeline Styles */
|
|
.timeline-steps {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.timeline-step {
|
|
flex: 1;
|
|
min-width: 120px;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.timeline-step:not(:last-child):after {
|
|
content: "";
|
|
display: block;
|
|
border-top: 2px dashed #dee2e6;
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 70%;
|
|
top: 30px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.timeline-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.timeline-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background-color: #f8f9fa;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
color: #4361ee;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
|
|
/* Responsive Adjustments */
|
|
@media (max-width: 992px) {
|
|
.timeline-step {
|
|
min-width: 100px;
|
|
}
|
|
|
|
.timeline-step:not(:last-child):after {
|
|
top: 25px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.timeline-steps {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.timeline-step {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 1rem;
|
|
min-width: 100%;
|
|
text-align: left;
|
|
}
|
|
|
|
.timeline-step:not(:last-child):after {
|
|
content: "";
|
|
border-left: 2px dashed #dee2e6;
|
|
border-top: none;
|
|
height: 100%;
|
|
left: 20px;
|
|
top: 40px;
|
|
width: 2px;
|
|
}
|
|
|
|
.timeline-icon {
|
|
margin-right: 1rem;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.timeline-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.card-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.card-header .badge {
|
|
margin-top: 0.5rem;
|
|
align-self: flex-start;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.alert {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.btn {
|
|
padding: 0.5rem 1rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.card-header {
|
|
font-size: 1.1rem;
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
@endsection |