resto-dhepot/resources/views/pages/admin/dashboard/dashboard.blade.php

288 lines
13 KiB
PHP

@extends('layouts.base')
@section('content-header')
<div class="col-12">
<div class="container" style="display: contents">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0"> Dashboard</h1>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item active">Dashboard</li>
</ol>
</div>
</div>
</div>
</div>
@endsection
@section('content')
<div class="row">
<div class="col-md-12">
<div class="card card-info card-outline" id="calculationPendapatan">
{{-- <div class="card-header">
<h5 class="card-title">Laporan Pendapatan dan Pengeluaran</h5>
</div> --}}
<!-- /.card-header -->
<!-- ./card-body -->
<div class="card-footer">
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="description-block border-left border-right">
<span>
<span class="description-percentage" id="penjualanHaripercentageOfSalesGrowth">
</span>
<small>Dari hari kemarin</small>
</span>
<h5 class="description-header" id="penjualanHari"></h5>
<span class="description-text">Penjualan Hari ini</span>
</div>
<!-- /.description-block -->
</div>
<!-- /.col -->
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="description-block border-right">
<span>
<span class="description-percentage" id="penjualanMinggupercentageOfSalesGrowth">
</span>
<small>Dari minggu kemarin</small>
</span>
<h5 class="description-header" id="penjualanMinggu"></h5>
<span class="description-text">Penjualan Minggu ini</span>
</div>
<!-- /.description-block -->
</div>
<!-- /.col -->
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="description-block border-right">
<span>
<span class="description-percentage" id="penjualanBulanpercentageOfSalesGrowth">
</span>
<small>Dari bulan kemarin</small>
</span>
<h5 class="description-header" id="penjualanBulan"></h5>
<span class="description-text">Penjualan Bulan ini</span>
</div>
<!-- /.description-block -->
</div>
</div>
<!-- /.row -->
</div>
<!-- /.card-footer -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<!-- Main content -->
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<!-- /.card -->
<div class="card">
<div class="card-header border-0">
<div class="d-flex justify-content-between">
<h3 class="card-title">Penjualan per Minggu</h3>
{{-- <a href="javascript:void(0);">View Report</a> --}}
</div>
</div>
<div class="card-body">
<div class="d-flex">
<p class="d-flex flex-column">
<span class="text-bold text-lg" id="penjualanWeek"></span>
<span>Penjualan Keseluruhan Minggu ini</span>
</p>
<p class="ml-auto d-flex flex-column text-right">
<span id="persentaseWeek">
</span>
<span class="text-muted">dari minggu lalu</span>
</p>
</div>
<!-- /.d-flex -->
<div class="position-relative mb-4">
<canvas id="sales-chart-week" height="200"></canvas>
</div>
{{-- <div class="d-flex flex-row justify-content-end">
<span class="mr-2">
<i class="fas fa-square text-primary"></i> minggu ini
</span>
<span>
<i class="fas fa-square text-gray"></i> minggu Kemarin
</span>
</div> --}}
</div>
</div>
</div>
<!-- /.col-md-6 -->
<div class="col-lg-6">
<!-- /.card -->
<div class="card">
<div class="card-header border-0">
<div class="d-flex justify-content-between">
<h3 class="card-title">Penjualan per Bulan</h3>
{{-- <a href="javascript:void(0);">View Report</a> --}}
</div>
</div>
<div class="card-body">
<div class="d-flex">
<p class="d-flex flex-column">
<span class="text-bold text-lg" id="penjualanMonth"></span>
<span>Penjualan Keseluruhan Bulan ini</span>
</p>
<p class="ml-auto d-flex flex-column text-right">
<span id="persentaseMonth">
</span>
<span class="text-muted">dari bulan lalu</span>
</p>
</div>
<!-- /.d-flex -->
<div class="position-relative mb-4">
<canvas id="sales-chart-month" height="200"></canvas>
</div>
{{-- <div class="d-flex flex-row justify-content-end">
<span class="mr-2">
<i class="fas fa-square text-primary"></i> Bulan ini
</span>
<span>
<i class="fas fa-square text-gray"></i> Bulan Kemarin
</span>
</div> --}}
</div>
</div>
</div>
<!-- /.col-md-6 -->
<div class="col-lg-12">
<!-- /.card -->
<div class="card">
<div class="card-header border-0">
<div class="d-flex justify-content-between">
<h3 class="card-title">Penjualan per Tahun</h3>
{{-- <a href="javascript:void(0);">View Report</a> --}}
</div>
</div>
<div class="card-body">
<div class="d-flex">
<p class="d-flex flex-column">
<span class="text-bold text-lg" id="penjualanYear"></span>
<span>Penjualan Keseluruhan Tahun ini</span>
</p>
<p class="ml-auto d-flex flex-column text-right">
<span id="persentaseYear">
</span>
<span class="text-muted">dari tahun lalu</span>
</p>
</div>
<!-- /.d-flex -->
<div class="position-relative mb-4">
<canvas id="sales-chart-year" height="200"></canvas>
</div>
{{-- <div class="d-flex flex-row justify-content-end">
<span class="mr-2">
<i class="fas fa-square text-primary"></i> Tahun ini
</span>
<span>
<i class="fas fa-square text-gray"></i> Tahun Kemarin
</span>
</div> --}}
</div>
</div>
</div>
<!-- /.col-md-6 -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
@include('pages.admin.dashboard.chart')
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-header border-0">
<h3 class="card-title">Makanan Terlaris</h3>
<div class="card-tools">
<a href="#" class="btn btn-tool btn-sm">
<i class="fas fa-download"></i>
</a>
<a href="#" class="btn btn-tool btn-sm">
<i class="fas fa-bars"></i>
</a>
</div>
</div>
<div class="card-body table-responsive p-0">
<table class="table table-striped table-valign-middle" id="table-terlaris">
<thead>
<tr>
<th>No</th>
<th>Menu</th>
<th>Harga</th>
<th>Terjual</th>
</tr>
</thead>
</table>
</div>
</div>
<!-- /.card -->
</div>
<!-- /.col-md-6 -->
<div class="col-lg-6">
<div class="card">
<div class="card-header border-0">
<h3 class="card-title">Minuman Terlaris</h3>
<div class="card-tools">
<a href="#" class="btn btn-tool btn-sm">
<i class="fas fa-download"></i>
</a>
<a href="#" class="btn btn-tool btn-sm">
<i class="fas fa-bars"></i>
</a>
</div>
</div>
<div class="card-body table-responsive p-0">
<table class="table table-striped table-valign-middle" id="table-minuman-terlaris">
<thead>
<tr>
<th>No</th>
<th>Menu</th>
<th>Harga</th>
<th>Terjual</th>
</tr>
</thead>
</table>
</div>
</div>
<!-- /.card -->
</div>
<!-- /.col-md-6 -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /.content -->
@endsection
@push('styles')
<link rel="stylesheet" href="{{ asset('assets/datatables/datatables.min.css') }} ">
@endpush
@include('pages.admin.dashboard.chartjs')
@include('pages.admin.dashboard.js')