112 lines
6.3 KiB
PHP
112 lines
6.3 KiB
PHP
|
@extends('layouts.admin')
|
||
|
|
|
||
|
|
@section('content')
|
||
|
|
@php
|
||
|
|
$theme = request()->cookie('theme', 'dark-blue');
|
||
|
|
$isLight = in_array($theme, ['light-blue', 'light-green']);
|
||
|
|
$cardBg = $isLight ? 'bg-white' : 'bg-gray-800';
|
||
|
|
$textPrimary = $isLight ? 'text-gray-900' : 'text-gray-200';
|
||
|
|
$textSecondary = $isLight ? 'text-gray-600' : 'text-gray-400';
|
||
|
|
$borderColor = $isLight ? 'border-gray-200' : 'border-gray-700';
|
||
|
|
@endphp
|
||
|
|
<div class="container mx-auto px-6 py-8">
|
||
|
|
<h3 class="{{ $textPrimary }} text-3xl font-medium">儀表板</h3>
|
||
|
|
|
||
|
|
<div class="mt-4">
|
||
|
|
<div class="flex flex-wrap -mx-6">
|
||
|
|
<!-- Total Machines -->
|
||
|
|
<div class="w-full px-6 sm:w-1/2 xl:w-1/4">
|
||
|
|
<div class="flex items-center px-5 py-6 shadow-sm rounded-md {{ $cardBg }}">
|
||
|
|
<div class="p-3 rounded-full bg-indigo-600 bg-opacity-75">
|
||
|
|
<svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="mx-5">
|
||
|
|
<h4 class="text-2xl font-semibold {{ $textPrimary }}">{{ $totalMachines }}</h4>
|
||
|
|
<div class="{{ $textSecondary }}">總機台數</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Online Machines -->
|
||
|
|
<div class="w-full px-6 sm:w-1/2 xl:w-1/4 mt-6 sm:mt-0">
|
||
|
|
<div class="flex items-center px-5 py-6 shadow-sm rounded-md {{ $cardBg }}">
|
||
|
|
<div class="p-3 rounded-full bg-green-600 bg-opacity-75">
|
||
|
|
<svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="mx-5">
|
||
|
|
<h4 class="text-2xl font-semibold {{ $textPrimary }}">{{ $onlineMachines }}</h4>
|
||
|
|
<div class="{{ $textSecondary }}">連線中</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Offline Machines -->
|
||
|
|
<div class="w-full px-6 sm:w-1/2 xl:w-1/4 mt-6 xl:mt-0">
|
||
|
|
<div class="flex items-center px-5 py-6 shadow-sm rounded-md {{ $cardBg }}">
|
||
|
|
<div class="p-3 rounded-full bg-gray-600 bg-opacity-75">
|
||
|
|
<svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="mx-5">
|
||
|
|
<h4 class="text-2xl font-semibold {{ $textPrimary }}">{{ $offlineMachines }}</h4>
|
||
|
|
<div class="{{ $textSecondary }}">離線</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Error Machines -->
|
||
|
|
<div class="w-full px-6 sm:w-1/2 xl:w-1/4 mt-6 xl:mt-0">
|
||
|
|
<div class="flex items-center px-5 py-6 shadow-sm rounded-md {{ $cardBg }}">
|
||
|
|
<div class="p-3 rounded-full bg-red-600 bg-opacity-75">
|
||
|
|
<svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="mx-5">
|
||
|
|
<h4 class="text-2xl font-semibold {{ $textPrimary }}">{{ $errorMachines }}</h4>
|
||
|
|
<div class="{{ $textSecondary }}">異常</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mt-8">
|
||
|
|
<div class="flex flex-col mt-8">
|
||
|
|
<div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
|
||
|
|
<div class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b {{ $borderColor }}">
|
||
|
|
<!-- 這裡可以放最近的銷售紀錄或日誌 -->
|
||
|
|
<table class="min-w-full">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th class="px-6 py-3 border-b {{ $borderColor }} {{ $cardBg }} text-left text-xs leading-4 font-medium {{ $textSecondary }} uppercase tracking-wider">標題</th>
|
||
|
|
<th class="px-6 py-3 border-b {{ $borderColor }} {{ $cardBg }} text-left text-xs leading-4 font-medium {{ $textSecondary }} uppercase tracking-wider">狀態</th>
|
||
|
|
<th class="px-6 py-3 border-b {{ $borderColor }} {{ $cardBg }} text-left text-xs leading-4 font-medium {{ $textSecondary }} uppercase tracking-wider">時間</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody class="{{ $cardBg }}">
|
||
|
|
<tr>
|
||
|
|
<td class="px-6 py-4 whitespace-no-wrap border-b {{ $borderColor }}">
|
||
|
|
<div class="text-sm leading-5 {{ $textPrimary }}">系統初始化</div>
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-no-wrap border-b {{ $borderColor }}">
|
||
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">正常</span>
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4 whitespace-no-wrap border-b {{ $borderColor }} text-sm leading-5 {{ $textSecondary }}">
|
||
|
|
剛剛
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
@endsection
|