Viewing File: /home/ubuntu/misabloom-backend-base/resources/views/admin/products/inventory.blade.php
@extends('layouts.admin')
@section('title')
{{ tr('inventory') }}
@endsection
@section('content-header', tr('products'))
@section('breadcrumb')
<li class="breadcrumb-item text-muted"> <a href="{{ route('admin.products.index') }}" class="text-muted">{{tr('products')}} </a></li>
<li class="breadcrumb-item"> <span class="bullet bg-gray-300 w-5px h-2px"></span> </li>
<li class="breadcrumb-item active">{{ tr('inventory') }}</li>
@endsection
@section('content')
<div class="row g-5 g-xl-8">
<div class="col-xl-3">
<a href="#" class="card bg-danger card-xl-stretch mb-xl-8">
<div class="card-body">
<span class="svg-icon svg-icon-white svg-icon-3x ms-n1">
<i class="las la-hand-holding-usd fs-4x text-white"></i>
</span>
<div class="text-white fw-bolder fs-2 mb-2 mt-5">{{ formatted_amount($data['total_revenue'] ?? 0) ?? formatted_amount(0) }}</div>
<div class="fw-bold text-white">{{ tr('product_revenue') }}</div>
</div>
</a>
</div>
<div class="col-xl-3">
<a href="#" class="card bg-success card-xl-stretch mb-xl-8">
<div class="card-body">
<span class="svg-icon svg-icon-white svg-icon-3x ms-n1">
<i class="las la-equals fs-4x text-white"></i>
</span>
<div class="text-white fw-bolder fs-2 mb-2 mt-5">{{ $product_inventory->total ?: 0 }}</div>
<div class="fw-bold text-white">{{ tr('total') }}</div>
</div>
</a>
</div>
<div class="col-xl-3">
<a href="#" class="card bg-info card-xl-stretch mb-xl-8">
<div class="card-body">
<span class="svg-icon svg-icon-white svg-icon-3x ms-n1">
<i class="las la-times-circle fs-4x text-white"></i>
</span>
<div class="text-white fw-bolder fs-2 mb-2 mt-5">{{ $product_inventory->remaining ? : 0 }}</div>
<div class="fw-bold text-white">{{ tr('remaining') }}</div>
</div>
</a>
</div>
<div class="col-xl-3">
<a href="#" class="card bg-primary card-xl-stretch mb-xl-8">
<div class="card-body">
<span class="svg-icon svg-icon-white svg-icon-3x ms-n1">
<i class="las la-tag fs-4x text-white"></i>
</span>
<div class="text-white fw-bolder fs-2 mb-2 mt-5">{{ $product_inventory->sold ? : 0 }}</div>
<div class="fw-bold text-white">{{ tr('sold') }}</div>
</div>
</a>
</div>
</div>
<!-- <div class="card card-bordered">
<div class="card-header">
<div class="card-title">
<h3 >{{ tr('inventory') }}</h3> - <a href="{{ route('admin.products.view', ['product_id' => $product->id]) }}">{{ $product->name ? : tr('na') }}</a>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<table class="table table-rounded table-striped border gy-7 gs-7">
<tbody>
<tr>
<td class="fw-bolder" nowrap="">{{ tr('total') }} : </td>
<td class="">{{ $product_inventory->total ? : 0 }}</td>
</tr>
<tr>
<td class="fw-bolder" nowrap="">{{ tr('remaining') }} : </td>
<td class="">{{ $product_inventory->remaining ? : 0 }}</td>
</tr>
<tr>
<td class="fw-bolder" nowrap="">{{ tr('created_at') }} : </td>
<td class="">{{ common_date($product_inventory->created_at, Auth::guard('admin')->user()->timezone , 'd M Y h:i A') }}</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<table class="table table-rounded table-striped border gy-7 gs-7">
<tbody>
<tr>
<td class="fw-bolder" nowrap="">{{ tr('sold') }} : </td>
<td class="">{{ $product_inventory->sold ? : 0 }}</td>
</tr>
<tr>
<td class="fw-bolder" nowrap="">{{ tr('status') }} : </td>
<td class="">
<span class="badge {{ $product->stock_status ? 'badge-light-success' : 'badge-light-warning' }}">
{{ $product->stock_status ? tr('in_stock') : tr('out_of_stock') }}
</span>
</td>
</tr>
<tr>
<td class="fw-bolder" nowrap="">{{ tr('updated_at') }} : </td>
<td class="">{{ common_date($product_inventory->updated_at, Auth::guard('admin')->user()->timezone , 'd M Y h:i A') }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div> -->
<div class="row g-5 g-xl-8">
<div class="col-xl-12">
<!--begin::Charts Widget 2-->
<div class="card card-xl-stretch mb-5 mb-xl-8">
<!--begin::Header-->
<div class="card-header border-0 pt-5">
<h3 class="card-title align-items-start flex-column">
<span class="card-label fw-bolder fs-3 mb-1">{{tr('last_x_month_orders')}}</span>
<span class="text-muted fw-bold fs-7">{{tr('total')}} {{$data['total_orders'] ?? 0}} {{tr('orders')}}</span>
</h3>
</div>
<!--end::Header-->
<!--begin::Body-->
<div class="card-body">
<!--begin::Chart-->
<div id="recent-orders" style="height: 350px"></div>
<!--end::Chart-->
</div>
<!--end::Body-->
</div>
<!--end::Charts Widget 2-->
</div>
<div class="col-xl-12">
<!--begin::Charts Widget 1-->
<div class="card card-xl-stretch mb-xl-8">
<!--begin::Header-->
<div class="card-header border-0 pt-5">
<!--begin::Title-->
<h3 class="card-title align-items-start flex-column">
<span class="card-label fw-bolder fs-3 mb-1">{{tr('product_statistics')}}</span>
<!-- <span class="text-muted fw-bold fs-7">More than 400 new members</span> -->
</h3>
<!--end::Title-->
</div>
<!--end::Header-->
<!--begin::Body-->
<div class="card-body">
<div class="card card-bordered">
<div class="card-body">
<div id="kt_amcharts_3" style="height: 500px;"></div>
</div>
</div>
</div>
<!--end::Body-->
</div>
<!--end::Charts Widget 1-->
</div>
</div>
@endsection
@section('scripts')
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
<script src="https://cdn.amcharts.com/lib/5/radar.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<script type="text/javascript">
am5.ready(function () {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("kt_amcharts_3");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
var chart = root.container.children.push(am5percent.PieChart.new(root, {
layout: root.verticalLayout
}));
// Create series
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
var series = chart.series.push(am5percent.PieSeries.new(root, {
alignLabels: true,
calculateAggregates: true,
valueField: "value",
categoryField: "category"
}));
series.slices.template.setAll({
strokeWidth: 3,
stroke: am5.color(0xffffff)
});
series.labelsContainer.set("paddingTop", 30)
// Set up adapters for variable slice radius
// https://www.amcharts.com/docs/v5/concepts/settings/adapters/
series.slices.template.adapters.add("radius", function (radius, target) {
var dataItem = target.dataItem;
var high = series.getPrivate("valueHigh");
if (dataItem) {
var value = target.dataItem.get("valueWorking", 0);
return radius * value / high
}
return radius;
});
// Set data
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
series.data.setAll([{
value: {{$product_inventory->sold}},
category: "Sold"
}, {
value: {{$product_inventory->remaining}},
category: "Remaining"
}]);
// Create legend
// https://www.amcharts.com/docs/v5/charts/percent-charts/legend-percent-series/
var legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.p50,
x: am5.p50,
marginTop: 15,
marginBottom: 15
}));
legend.data.setAll(series.dataItems);
// Play initial series animation
// https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
series.appear(1000, 100);
}); // end am5.ready()
</script>
<script type="text/javascript">
var e = document.getElementById("recent-orders"),
t = parseInt(KTUtil.css(e, "height")),
a = KTUtil.getCssVariableValue("--bs-gray-500"),
o = KTUtil.getCssVariableValue("--bs-gray-200"),
s = KTUtil.getCssVariableValue("--bs-warning"),
r = KTUtil.getCssVariableValue("--bs-gray-300");
e && new ApexCharts(e, {
series: [{
name: "Revenue",
data: {{json_encode($data['order_data']['orders'])}}
}],
chart: {
fontFamily: "inherit",
type: "bar",
height: t,
toolbar: {
show: !1
}
},
plotOptions: {
bar: {
horizontal: !1,
columnWidth: ["30%"],
borderRadius: 4
}
},
legend: {
show: !1
},
dataLabels: {
enabled: !1
},
stroke: {
show: !0,
width: 2,
colors: ["transparent"]
},
xaxis: {
categories: <?php print_r(json_encode($data['order_data']['months'])); ?>,
axisBorder: {
show: !1
},
axisTicks: {
show: !1
},
labels: {
style: {
colors: a,
fontSize: "12px"
}
}
},
yaxis: {
labels: {
style: {
colors: a,
fontSize: "12px"
}
}
},
fill: {
opacity: 1
},
states: {
normal: {
filter: {
type: "none",
value: 0
}
},
hover: {
filter: {
type: "none",
value: 0
}
},
active: {
allowMultipleDataPointsSelection: !1,
filter: {
type: "none",
value: 0
}
}
},
tooltip: {
style: {
fontSize: "12px"
},
y: {
formatter: function(e) {
return e + " {{Setting::get('token_symbol', 'PSCN')}}"
}
}
},
colors: [s, r],
grid: {
borderColor: o,
strokeDashArray: 4,
yaxis: {
lines: {
show: !0
}
}
}
}).render()
</script>
@endsection
Back to Directory
File Manager