Skip to content

Commit

Permalink
Merge pull request #22 from Alivan21/feat/proses-page
Browse files Browse the repository at this point in the history 
feat: proses page & components
  • Loading branch information
@alizul01
alizul01 authored Jun 7, 2023
2 parents 2f90e78 + 698c0a8 commit 3f6183c
Show file tree
Hide file tree
Showing 5 changed files with 351 additions and 6 deletions.
12 changes: 6 additions & 6 deletions app/View/Components/Dashboard/CardRoom.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@ class CardRoom extends Component
*/
public $id;

public $name;
public $code;
public $capacity;
public $floor;
public $image;
public $status;
public $name;
public $code;
public $capacity;
public $floor;
public $image;
public $status;
public function __construct($name, $code, $capacity, $floor, $image, $status, $id)
{
$this->name = $name;
Expand Down
72 changes: 72 additions & 0 deletions app/View/Components/Table/ProcessBody.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<?php

namespace App\View\Components\Table;

use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;

class ProcessBody extends Component
{
/**
* Create a new component instance.
*/
public $id;
public $no;
public $dateFiled;
public $room;
public $dateUse;
public $status;

public $isStep1Approved;
public $isStep2Approved;
public $isStep3Approved;
public $isStep4Approved;

public $reason1;
public $reason2;
public $reason3;
public $reason4;

public function __construct(
$id,
$no,
$dateFiled,
$room,
$dateUse,
$status,
$isStep1Approved = "",
$isStep2Approved = "",
$isStep3Approved = "",
$isStep4Approved = "",
$reason1 = "Dalam Proses",
$reason2 = "Dalam Proses",
$reason3 = "Dalam Proses",
$reason4 = "Dalam Proses"
) {
$this->id = $id;
$this->no = $no;
$this->dateFiled = $dateFiled;
$this->room = $room;
$this->dateUse = $dateUse;
$this->status = $status;

$this->isStep1Approved = $isStep1Approved;
$this->isStep2Approved = $isStep2Approved;
$this->isStep3Approved = $isStep3Approved;
$this->isStep4Approved = $isStep4Approved;

$this->reason1 = $reason1;
$this->reason2 = $reason2;
$this->reason3 = $reason3;
$this->reason4 = $reason4;
}

/**
* Get the view / contents that represent the component.
*/
public function render(): View|Closure|string
{
return view('components.table.process-body');
}
}
221 changes: 221 additions & 0 deletions resources/views/components/table/process-body.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,221 @@
@php
$colorState1 = 'bg-gray-500';
$colorState2 = 'bg-gray-500';
$colorState3 = 'bg-gray-500';
$colorState4 = 'bg-gray-500';
switch ($isStep1Approved) {
case 'yes':
$colorState1 = 'bg-green-500';
break;
case 'no':
$colorState1 = 'bg-red-500';
break;
default:
$colorState1 = 'bg-gray-500';
break;
}
switch ($isStep2Approved) {
case 'yes':
$colorState2 = 'bg-green-500';
break;
case 'no':
$colorState2 = 'bg-red-500';
break;
default:
$colorState2 = 'bg-gray-500';
break;
}
switch ($isStep3Approved) {
case 'yes':
$colorState3 = 'bg-green-500';
break;
case 'no':
$colorState3 = 'bg-red-500';
break;
default:
$colorState3 = 'bg-gray-500';
break;
}
switch ($isStep4Approved) {
case 'yes':
$colorState4 = 'bg-green-500';
break;
case 'no':
$colorState4 = 'bg-red-500';
break;
default:
$colorState4 = 'bg-gray-500';
break;
}
@endphp
<tr class="bg-white border-b">
<td class="px-6 py-4">
{{ $no }}
</td>
<th scope="row" class="px-6 py-4 font-medium whitespace-nowrap">
{{ $dateFiled }}
</th>
<td class="px-6 py-4">
{{ $room }}
</td>
<td class="px-6 py-4">
{{ $dateUse }}
</td>
<td class="px-6 py-4">
@if ($status == 'Proses' || $status == 'proses')
<button type="button" disabled
class="focus:outline-none bg-yellow-400 text-white font-medium rounded-lg text-sm p-2">
{{ $status }}
</button>
@elseif ($status == 'Sukses' || $status == 'sukses')
<button type="button" disabled
class="focus:outline-none bg-green-500 text-white font-medium rounded-lg text-sm p-2">
{{ $status }}
</button>
@else
<button type="button" disabled
class="focus:outline-none bg-red-500 text-white font-medium rounded-lg text-sm p-2">
{{ $status }}
</button>
@endif
</td>
<td class="px-6 py-4">
<div id="accordion-collapse" data-accordion="collapse">
<span id="accordion-collapse-heading-{{ $id }}">
<button type="button" class="font-medium text-gray-500"
data-accordion-target="#accordion-collapse-{{ $id }}" aria-expanded="false"
aria-controls="accordion-collapse-{{ $id }}">
<svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</button>
</span>
</div>
</td>
</tr>
<tr class="text-left border-none">
<td colspan="6">
<div id="accordion-collapse-{{ $id }}" class="hidden"
aria-labelledby="accordion-collapse-heading-{{ $id }}" class="overflow-x-hidden">
<div class="flex flex-col gap-4 px-8 py-4">
<span class="font-medium px-4">Status Surat</span>
<ol class="items-center sm:flex justify-center overflow-hidden">
<li class="relative mb-6 sm:mb-0">
<div class="flex justify-center items-center">
<div
class="z-10 text-white flex items-center justify-center w-12 h-12 {{ $colorState1 }} rounded-full ring-0 ring-white sm:ring-8 shrink-0">
1
</div>
<div class="hidden sm:flex w-full {{ $colorState1 }} h-0.5"></div>
</div>
<div class="mt-3 pr-72">
<h3 class="italic text-gray-900">
<div data-popover-target="popover-1-{{ $id }}" data-popover-placement="right"
class="cursor-default">
Tahap 1 <i class="bx bx-question-mark rounded-full border border-black"></i>
</div>
<div data-popover id="popover-1-{{ $id }}" role="tooltip"
class="absolute z-20 invisible inline-block w-64 text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0">
<div class="px-3 py-2 {{ $colorState1 }} border-b border-gray-200 rounded-t-lg">
<h3 class="font-semibold text-gray-50">Birokrasi Tahap Satu
</h3>
</div>
<div class="px-3 py-2">
<p class="font-light ">{{ $reason1 }}</p>
</div>
<div data-popper-arrow></div>
</div>
</h3>
</div>
</li>
<li class="relative mb-6 sm:mb-0">
<div class="flex items-center">
<div
class="z-10 text-white flex items-center justify-center w-12 h-12 {{ $colorState2 }} rounded-full ring-0 ring-white sm:ring-8 shrink-0">
2
</div>
<div class="hidden sm:flex w-full {{ $colorState2 }} h-0.5"></div>
</div>
<div class="mt-3 pr-72">
<h3 class="italic text-gray-900">
<div data-popover-target="popover-2-{{ $id }}" data-popover-placement="right"
class="cursor-default">
Tahap 2 <i class="bx bx-question-mark rounded-full border border-black"></i>
</div>
<div data-popover id="popover-2-{{ $id }}" role="tooltip"
class="absolute z-20 invisible inline-block w-64 text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0">
<div class="px-3 py-2 {{ $colorState2 }} border-b border-gray-200 rounded-t-lg">
<h3 class="font-semibold text-gray-50">Birokrasi Tahap Dua
</h3>
</div>
<div class="px-3 py-2">
<p class="font-light">{{ $reason2 }}</p>
</div>
<div data-popper-arrow></div>
</div>
</h3>
</div>
</li>
<li class="relative mb-6 sm:mb-0">
<div class="flex items-center">
<div
class="z-10 text-white flex items-center justify-center w-12 h-12 {{ $colorState3 }} rounded-full ring-0 ring-white sm:ring-8 shrink-0">
3
</div>
<div class="hidden sm:flex w-full {{ $colorState3 }} h-0.5"></div>
</div>
<div class="mt-3 pr-72">
<h3 class="italic text-gray-900">
<div data-popover-target="popover-3-{{ $id }}" data-popover-placement="right"
class="cursor-default">
Tahap 3 <i class="bx bx-question-mark rounded-full border border-black"></i>
</div>
<div data-popover id="popover-3-{{ $id }}" role="tooltip"
class="absolute z-20 invisible inline-block w-64 text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0">
<div class="px-3 py-2 {{ $colorState3 }} border-b border-gray-200 rounded-t-lg">
<h3 class="font-semibold text-gray-50">Birokrasi Tahap Tiga
</h3>
</div>
<div class="px-3 py-2">
<p class="font-light">{{ $reason3 }}</p>
</div>
<div data-popper-arrow></div>
</div>
</h3>
</div>
</li>
<li class="relative mb-6 sm:mb-0">
<div class="flex items-center">
<div
class="z-10 text-white flex items-center justify-center w-12 h-12 {{ $colorState4 }} rounded-full ring-0 ring-white sm:ring-8 shrink-0">
4
</div>
</div>
<div class="mt-3">
<h3 class="italic text-gray-900">
<div data-popover-target="popover-4-{{ $id }}" data-popover-placement="right"
class="cursor-default">
Tahap 4 <i class="bx bx-question-mark rounded-full border border-black"></i>
</div>
<div data-popover id="popover-4-{{ $id }}" role="tooltip"
class="absolute z-20 invisible inline-block w-64 text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0">
<div class="px-3 py-2 {{ $colorState4 }} border-b border-gray-200 rounded-t-lg">
<h3 class="font-semibold text-gray-50">Birokrasi Tahap Empat
</h3>
</div>
<div class="px-3 py-2">
<p class="font-light">{{ $reason4 }}</p>
</div>
<div data-popper-arrow></div>
</div>
</h3>
</div>
</li>
</ol>
</div>
</div>
</td>
</tr>
45 changes: 45 additions & 0 deletions resources/views/user/proses.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
@extends('layout.master')
@section('master')
@include('user.partials.navbar')
<main class="flex gap-6 -mt-14 mb-10 px-10">
<section class="flex flex-col grow gap-4 p-6 bg-white border-2 rounded-lg shadow-md">
<div class="flex flex-col gap-3 justify-center">
<h1 class="text-xl font-medium">Proses Peminjaman</h1>
<span class="text-gray-500 font-light text-sm">Lihat proses peminjaman mu di halaman ini</span>
</div>
<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left">
<thead class="text-sm text-center text-gray-700 uppercase bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3">
No
</th>
<th scope="col" class="px-6 py-3">
Tanggal Diajukan
</th>
<th scope="col" class="px-6 py-3">
Ruangan
</th>
<th scope="col" class="px-6 py-3">
Tanggal Dipakai
</th>
<th scope="col" class="px-6 py-3">
Status
</th>
<th scope="col" class="px-6 py-3">
Aksi
</th>
</tr>
</thead>
<tbody class="text-center font-medium text-gray-900">
<x-table.process-body id="1" no="1" dateFiled="23 Maret 2023" room="LPY 3"
dateUse="25 Maret 2023" status="Ditolak" isStep1Approved="no" reason1="Ditolak BEM" />
<x-table.process-body id="2" no="2" dateFiled="24 Maret 2023" room="LPY 4"
dateUse="26 Maret 2023" status="Sukses" reason1="Diterima olek Pak Alizulfikar"
isStep1Approved="yes" isStep2Approved="yes" isStep3Approved="yes" isStep4Approved="" />
</tbody>
</table>
</div>
</section>
</main>
@endsection
7 changes: 7 additions & 0 deletions routes/web.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,13 @@
]);
});

Route::get('/proses', function () {
return view('user.proses', [
'active' => 'process',
'isHome' => false
]);
});

// admin
Route::group(['middleware' => ['auth', 'admin']], function () {
Route::get('/admin', function () {
Expand Down

0 comments on commit 3f6183c

Please sign in to comment.