diff --git a/app/Helpers/DashboardHelper.blade.php b/app/Helpers/DashboardHelper.blade.php
new file mode 100644
index 0000000..e69de29
diff --git a/app/Helpers/DashboardHelper.php b/app/Helpers/DashboardHelper.php
new file mode 100644
index 0000000..098f79a
--- /dev/null
+++ b/app/Helpers/DashboardHelper.php
@@ -0,0 +1,227 @@
+<?php
+
+namespace App\Helpers;
+
+class DashboardHelper
+{
+    /**
+     * Data master untuk setiap jenis izin
+     */
+    public static function getStatusDataByType(string $type): array
+    {
+        $data = [
+            'pertek' => [
+                ['id' => 'ditolak', 'label' => 'Izin Ditolak', 'value' => 8, 'color' => 'danger'],
+                ['id' => 'selesai', 'label' => 'Izin Selesai', 'value' => 45, 'color' => 'success'],
+                ['id' => 'proses', 'label' => 'Dalam Proses', 'value' => 12, 'color' => 'info'],
+            ],
+            'rintek' => [
+                ['id' => 'ditolak', 'label' => 'Izin Ditolak', 'value' => 5, 'color' => 'danger'],
+                ['id' => 'selesai', 'label' => 'Izin Selesai', 'value' => 28, 'color' => 'success'],
+                ['id' => 'proses', 'label' => 'Dalam Proses', 'value' => 7, 'color' => 'info'],
+            ],
+            'amdal' => [
+                ['id' => 'ditolak', 'label' => 'Izin Ditolak', 'value' => 3, 'color' => 'danger'],
+                ['id' => 'selesai', 'label' => 'Izin Selesai', 'value' => 15, 'color' => 'success'],
+                ['id' => 'proses', 'label' => 'Dalam Proses', 'value' => 9, 'color' => 'info'],
+            ],
+            'izin_angkut' => [
+                ['id' => 'ditolak', 'label' => 'Izin Ditolak', 'value' => 12, 'color' => 'danger'],
+                ['id' => 'selesai', 'label' => 'Izin Selesai', 'value' => 67, 'color' => 'success'],
+                ['id' => 'proses', 'label' => 'Dalam Proses', 'value' => 18, 'color' => 'info'],
+            ],
+            'uji_emisi' => [
+                ['id' => 'ditolak', 'label' => 'Izin Ditolak', 'value' => 6, 'color' => 'danger'],
+                ['id' => 'selesai', 'label' => 'Izin Selesai', 'value' => 89, 'color' => 'success'],
+                ['id' => 'proses', 'label' => 'Dalam Proses', 'value' => 23, 'color' => 'info'],
+            ],
+        ];
+
+        return $data[$type] ?? [];
+    }
+
+    /**
+     * Menambahkan total ke data statuses
+     */
+    public static function addTotalToStatuses(array $statuses): array
+    {
+        $total = array_sum(array_column($statuses, 'value'));
+        $statuses[] = [
+            'id' => 'total',
+            'label' => 'Total Pengajuan',
+            'value' => $total,
+            'color' => 'primary'
+        ];
+
+        return $statuses;
+    }
+
+    /**
+     * Mendapatkan label untuk tipe izin
+     */
+    public static function getTypeLabel(string $type): string
+    {
+        $labels = [
+            'pertek' => 'PERTEK',
+            'rintek' => 'RINTEK',
+            'amdal' => 'AMDAL',
+            'izin_angkut' => 'IZIN ANGKUT & OLAH',
+            'uji_emisi' => 'IZIN TEMPAT UJI EMISI',
+        ];
+
+        return $labels[$type] ?? strtoupper($type);
+    }
+
+    /**
+     * Mendapatkan icon untuk status
+     */
+    public static function getStatusIcon(string $statusId): string
+    {
+        $icons = [
+            'ditolak' => 'circle-x',
+            'selesai' => 'circle-check',
+            'proses' => 'refresh-cw',
+            'total' => 'equal',
+        ];
+
+        return $icons[$statusId] ?? 'circle';
+    }
+
+    /**
+     * Mendapatkan background color untuk card
+     */
+    public static function getCardBackground(string $statusId): string
+    {
+        $backgrounds = [
+            'ditolak' => 'bg-gradient-start-4',
+            'selesai' => 'bg-gradient-start-2',
+            'proses' => 'bg-gradient-start-3',
+            'total' => 'bg-gradient-start-1',
+        ];
+
+        return $backgrounds[$statusId] ?? 'bg-gradient-start-1';
+    }
+
+    /**
+     * Mendapatkan warna lingkaran icon
+     */
+    public static function getIconCircleColor(string $statusId): string
+    {
+        $colors = [
+            'ditolak' => 'bg-red',
+            'selesai' => 'bg-green',
+            'proses' => 'bg-info',
+            'total' => 'bg-yellow',
+        ];
+
+        return $colors[$statusId] ?? 'bg-primary';
+    }
+
+    /**
+     * Mendapatkan semua tipe izin yang tersedia
+     */
+    public static function getAllTypes(): array
+    {
+        return ['pertek', 'rintek', 'amdal', 'izin_angkut', 'uji_emisi'];
+    }
+
+    /**
+     * Mendapatkan statistik lengkap untuk semua tipe
+     */
+    public static function getAllStatistics(): array
+    {
+        $types = self::getAllTypes();
+        $allData = [];
+
+        foreach ($types as $type) {
+            $statuses = self::getStatusDataByType($type);
+            $statuses = self::addTotalToStatuses($statuses);
+
+            $allData[$type] = [
+                'type' => $type,
+                'label' => self::getTypeLabel($type),
+                'data' => $statuses
+            ];
+        }
+
+        return $allData;
+    }
+
+    /**
+     * Format percentage dari total
+     */
+    public static function calculatePercentage(int $value, int $total): float
+    {
+        return $total > 0 ? round(($value / $total) * 100, 2) : 0;
+    }
+
+    /**
+     * Mendapatkan trend indicator (simulasi)
+     */
+    public static function getTrendIndicator(string $type, string $statusId): array
+    {
+        // Simulasi data trend (bisa diganti dengan data real dari database)
+        $trends = [
+            'pertek' => ['ditolak' => -2.5, 'selesai' => 5.3, 'proses' => 1.2],
+            'rintek' => ['ditolak' => -1.8, 'selesai' => 3.7, 'proses' => 0.5],
+            'amdal' => ['ditolak' => -0.9, 'selesai' => 2.1, 'proses' => -0.3],
+            'izin_angkut' => ['ditolak' => -3.2, 'selesai' => 7.8, 'proses' => 2.1],
+            'uji_emisi' => ['ditolak' => -1.5, 'selesai' => 12.4, 'proses' => 4.2],
+        ];
+
+        $value = $trends[$type][$statusId] ?? 0;
+
+        return [
+            'value' => $value,
+            'direction' => $value > 0 ? 'up' : ($value < 0 ? 'down' : 'same'),
+            'color' => $value > 0 ? 'success' : ($value < 0 ? 'danger' : 'secondary')
+        ];
+    }
+
+    /**
+     * Mendapatkan badge color untuk tipe izin
+     */
+    public static function getBadgeColor(string $type): string
+    {
+        $colors = [
+            'pertek' => 'primary',
+            'rintek' => 'success',
+            'amdal' => 'info',
+            'izin_angkut' => 'warning',
+            'uji_emisi' => 'secondary',
+        ];
+
+        return $colors[$type] ?? 'primary';
+    }
+
+    /**
+     * Mendapatkan data untuk chart
+     */
+    public static function getChartData(string $type): array
+    {
+        $statuses = self::getStatusDataByType($type);
+
+        return [
+            'labels' => array_column($statuses, 'label'),
+            'values' => array_column($statuses, 'value'),
+            'colors' => array_map(function($status) {
+                return self::getChartColor($status['id']);
+            }, $statuses)
+        ];
+    }
+
+    /**
+     * Mendapatkan warna untuk chart
+     */
+    private static function getChartColor(string $statusId): string
+    {
+        $colors = [
+            'ditolak' => '#ef4444',
+            'selesai' => '#22c55e',
+            'proses' => '#3b82f6',
+            'total' => '#f59e0b',
+        ];
+
+        return $colors[$statusId] ?? '#6b7280';
+    }
+}
diff --git a/app/Helpers/dashboard_functions.php b/app/Helpers/dashboard_functions.php
new file mode 100644
index 0000000..58ecd91
--- /dev/null
+++ b/app/Helpers/dashboard_functions.php
@@ -0,0 +1,106 @@
+<?php
+
+/**
+ * Dashboard Helper Functions
+ * File ini berisi function helper yang bisa digunakan langsung di view atau controller
+ */
+
+if (!function_exists('get_dashboard_status')) {
+    /**
+     * Mendapatkan status data untuk tipe izin tertentu
+     */
+    function get_dashboard_status(string $type): array
+    {
+        return App\Helpers\DashboardHelper::getStatusDataByType($type);
+    }
+}
+
+if (!function_exists('get_dashboard_total')) {
+    /**
+     * Menambahkan total ke data statuses
+     */
+    function get_dashboard_total(array $statuses): array
+    {
+        return App\Helpers\DashboardHelper::addTotalToStatuses($statuses);
+    }
+}
+
+if (!function_exists('dashboard_type_label')) {
+    /**
+     * Mendapatkan label untuk tipe izin
+     */
+    function dashboard_type_label(string $type): string
+    {
+        return App\Helpers\DashboardHelper::getTypeLabel($type);
+    }
+}
+
+if (!function_exists('dashboard_status_icon')) {
+    /**
+     * Mendapatkan icon untuk status
+     */
+    function dashboard_status_icon(string $statusId): string
+    {
+        return App\Helpers\DashboardHelper::getStatusIcon($statusId);
+    }
+}
+
+if (!function_exists('dashboard_card_background')) {
+    /**
+     * Mendapatkan background color untuk card
+     */
+    function dashboard_card_background(string $statusId): string
+    {
+        return App\Helpers\DashboardHelper::getCardBackground($statusId);
+    }
+}
+
+if (!function_exists('dashboard_icon_circle_color')) {
+    /**
+     * Mendapatkan warna lingkaran icon
+     */
+    function dashboard_icon_circle_color(string $statusId): string
+    {
+        return App\Helpers\DashboardHelper::getIconCircleColor($statusId);
+    }
+}
+
+if (!function_exists('dashboard_badge_color')) {
+    /**
+     * Mendapatkan badge color untuk tipe izin
+     */
+    function dashboard_badge_color(string $type): string
+    {
+        return App\Helpers\DashboardHelper::getBadgeColor($type);
+    }
+}
+
+if (!function_exists('dashboard_percentage')) {
+    /**
+     * Menghitung persentase
+     */
+    function dashboard_percentage(int $value, int $total): float
+    {
+        return App\Helpers\DashboardHelper::calculatePercentage($value, $total);
+    }
+}
+
+if (!function_exists('dashboard_trend')) {
+    /**
+     * Mendapatkan trend indicator
+     */
+    function dashboard_trend(string $type, string $statusId): array
+    {
+        return App\Helpers\DashboardHelper::getTrendIndicator($type, $statusId);
+    }
+}
+
+if (!function_exists('dashboard_chart_data')) {
+    /**
+     * Mendapatkan data untuk chart
+     */
+    function dashboard_chart_data(string $type): array
+    {
+        return App\Helpers\DashboardHelper::getChartData($type);
+    }
+}
diff --git a/app/Http/Controllers/DashboardController.php b/app/Http/Controllers/DashboardController.php
index 3dc8cca..1badeec 100644
--- a/app/Http/Controllers/DashboardController.php
+++ b/app/Http/Controllers/DashboardController.php
@@ -3,32 +3,122 @@
 namespace App\Http\Controllers;
 
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Log;
+use App\Helpers\DashboardHelper;
 
 class DashboardController extends Controller
 {
     public function index()
     {
-        return view('dashboard/index');
+        $statuses = DashboardHelper::getStatusDataByType('pertek');
+        $statuses = DashboardHelper::addTotalToStatuses($statuses);
+        $type = 'pertek';
+
+        return view('dashboard/index', compact('statuses', 'type'));
     }
 
     public function pertek()
     {
-        return view('dashboard/dashboard-pertek');
+        $statuses = DashboardHelper::getStatusDataByType('pertek');
+        $statuses = DashboardHelper::addTotalToStatuses($statuses);
+        $type = 'pertek';
+
+        return view('dashboard/dashboard-pertek', compact('statuses', 'type'));
     }
 
     public function rintek()
     {
-        return view('dashboard/dashboard-rintek');
+        $statuses = DashboardHelper::getStatusDataByType('rintek');
+        $statuses = DashboardHelper::addTotalToStatuses($statuses);
+        $type = 'rintek';
+
+        return view('dashboard/dashboard-rintek', compact('statuses', 'type'));
     }
 
     public function amdal()
     {
-        return view('dashboard/dashboard-amdal');
+        $statuses = DashboardHelper::getStatusDataByType('amdal');
+        $statuses = DashboardHelper::addTotalToStatuses($statuses);
+        $type = 'amdal';
+
+        return view('dashboard/dashboard-amdal', compact('statuses', 'type'));
     }
 
     public function bengkel()
     {
-        return view('dashboard/dashboard-bengkel');
+        $statuses = DashboardHelper::getStatusDataByType('uji_emisi');
+        $statuses = DashboardHelper::addTotalToStatuses($statuses);
+        $type = 'uji_emisi';
+
+        return view('dashboard/dashboard-bengkel', compact('statuses', 'type'));
     }
 
+    public function izinAngkut()
+    {
+        $statuses = DashboardHelper::getStatusDataByType('izin_angkut');
+        $statuses = DashboardHelper::addTotalToStatuses($statuses);
+        $type = 'izin_angkut';
+
+        return view('dashboard/dashboard-izin-angkut', compact('statuses', 'type'));
+    }
+
+    public function summaryByStatus(Request $request)
+    {
+        try {
+            $type = $request->get('type', 'pertek');
+            $statuses = DashboardHelper::getStatusDataByType($type);
+
+            if (empty($statuses)) {
+                return response()->json([
+                    'success' => false,
+                    'message' => 'Tipe izin tidak ditemukan.',
+                ], 404);
+            }
+
+            $statuses = DashboardHelper::addTotalToStatuses($statuses);
+
+            return response()->json([
+                'success'       => true,
+                'message'       => 'Summary by status retrieved successfully.',
+                'type'          => $type,
+                'type_label'    => DashboardHelper::getTypeLabel($type),
+                'data'          => $statuses,
+                'chart_data'    => DashboardHelper::getChartData($type),
+                'last_updated'  => now()->format('Y-m-d H:i:s'),
+            ], 200);
+
+        } catch (\Exception $e) {
+            Log::error('Gagal mengambil summary status izin: ' . $e->getMessage());
+
+            return response()->json([
+                'success' => false,
+                'message' => 'Terjadi kesalahan saat mengambil data.',
+                'error'   => $e->getMessage(),
+            ], 500);
+        }
+    }
+
+    public function getAllSummary()
+    {
+        try {
+            $allData = DashboardHelper::getAllStatistics();
+
+            return response()->json([
+                'success'       => true,
+                'message'       => 'All summary data retrieved successfully.',
+                'data'          => $allData,
+                'last_updated'  => now()->format('Y-m-d H:i:s'),
+            ], 200);
+
+        } catch (\Exception $e) {
+            Log::error('Gagal mengambil semua summary: ' . $e->getMessage());
+
+            return response()->json([
+                'success' => false,
+                'message' => 'Terjadi kesalahan saat mengambil data.',
+                'error'   => $e->getMessage(),
+            ], 500);
+        }
+    }
 }
diff --git a/composer.json b/composer.json
index 1b51d44..062b9e4 100644
--- a/composer.json
+++ b/composer.json
@@ -3,7 +3,10 @@
     "name": "laravel/laravel",
     "type": "project",
     "description": "The skeleton application for the Laravel framework.",
-    "keywords": ["laravel", "framework"],
+    "keywords": [
+        "laravel",
+        "framework"
+    ],
     "license": "MIT",
     "require": {
         "php": "^8.2",
@@ -27,7 +30,10 @@
             "App\\": "app/",
             "Database\\Factories\\": "database/factories/",
             "Database\\Seeders\\": "database/seeders/"
-        }
+        },
+        "files": [
+            "app/Helpers/dashboard_functions.php"
+        ]
     },
     "autoload-dev": {
         "psr-4": {
diff --git a/public/assets/js/homeOneChart.js b/public/assets/js/homeOneChart.js
index 3a84b33..34650ba 100644
--- a/public/assets/js/homeOneChart.js
+++ b/public/assets/js/homeOneChart.js
@@ -372,6 +372,255 @@ var options = {
 var chart = new ApexCharts(document.querySelector("#chart-amdal"), options);
 chart.render();
 // =========================== Sales Statistic Line Chart End ===============================
+// =========================== Sales Statistic Line Chart Start ===============================
+var options = {
+    series: [
+        {
+            name: "This month",
+            data: [10, 20, 12, 30, 14, 35, 16, 32, 14, 25, 13, 28],
+        },
+    ],
+    chart: {
+        height: 264,
+        type: "line",
+        toolbar: {
+            show: false,
+        },
+        zoom: {
+            enabled: false,
+        },
+        dropShadow: {
+            enabled: true,
+            top: 6,
+            left: 0,
+            blur: 4,
+            color: "#000",
+            opacity: 0.1,
+        },
+    },
+    dataLabels: {
+        enabled: false,
+    },
+    stroke: {
+        curve: "smooth",
+        colors: ["#487FFF"], // Specify the line color here
+        width: 3,
+    },
+    markers: {
+        size: 0,
+        strokeWidth: 3,
+        hover: {
+            size: 8,
+        },
+    },
+    tooltip: {
+        enabled: true,
+        x: {
+            show: true,
+        },
+        y: {
+            show: false,
+        },
+        z: {
+            show: false,
+        },
+    },
+    grid: {
+        row: {
+            colors: ["transparent", "transparent"], // takes an array which will be repeated on columns
+            opacity: 0.5,
+        },
+        borderColor: "#D1D5DB",
+        strokeDashArray: 3,
+    },
+    yaxis: {
+        labels: {
+            formatter: function (value) {
+                return value;
+            },
+            style: {
+                fontSize: "14px",
+            },
+        },
+    },
+    xaxis: {
+        categories: [
+            "Jan",
+            "Feb",
+            "Mar",
+            "Apr",
+            "May",
+            "Jun",
+            "Jul",
+            "Aug",
+            "Sep",
+            "Oct",
+            "Nov",
+            "Dec",
+        ],
+        tooltip: {
+            enabled: false,
+        },
+        labels: {
+            formatter: function (value) {
+                return value;
+            },
+            style: {
+                fontSize: "14px",
+            },
+        },
+        axisBorder: {
+            show: false,
+        },
+        crosshairs: {
+            show: true,
+            width: 20,
+            stroke: {
+                width: 0,
+            },
+            fill: {
+                type: "solid",
+                color: "#487FFF40",
+                // gradient: {
+                //   colorFrom: '#D8E3F0',
+                //   // colorTo: '#BED1E6',
+                //   stops: [0, 100],
+                //   opacityFrom: 0.4,
+                //   opacityTo: 0.5,
+                // },
+            },
+        },
+    },
+};
+
+var chart = new ApexCharts(document.querySelector("#chart-angkut"), options);
+chart.render();
+// =========================== Sales Statistic Line Chart End ===============================
+
+// =========================== Sales Statistic Line Chart Start ===============================
+var options = {
+    series: [
+        {
+            name: "This month",
+            data: [10, 20, 12, 30, 14, 35, 16, 32, 14, 25, 13, 28],
+        },
+    ],
+    chart: {
+        height: 264,
+        type: "line",
+        toolbar: {
+            show: false,
+        },
+        zoom: {
+            enabled: false,
+        },
+        dropShadow: {
+            enabled: true,
+            top: 6,
+            left: 0,
+            blur: 4,
+            color: "#000",
+            opacity: 0.1,
+        },
+    },
+    dataLabels: {
+        enabled: false,
+    },
+    stroke: {
+        curve: "smooth",
+        colors: ["#487FFF"], // Specify the line color here
+        width: 3,
+    },
+    markers: {
+        size: 0,
+        strokeWidth: 3,
+        hover: {
+            size: 8,
+        },
+    },
+    tooltip: {
+        enabled: true,
+        x: {
+            show: true,
+        },
+        y: {
+            show: false,
+        },
+        z: {
+            show: false,
+        },
+    },
+    grid: {
+        row: {
+            colors: ["transparent", "transparent"], // takes an array which will be repeated on columns
+            opacity: 0.5,
+        },
+        borderColor: "#D1D5DB",
+        strokeDashArray: 3,
+    },
+    yaxis: {
+        labels: {
+            formatter: function (value) {
+                return value;
+            },
+            style: {
+                fontSize: "14px",
+            },
+        },
+    },
+    xaxis: {
+        categories: [
+            "Jan",
+            "Feb",
+            "Mar",
+            "Apr",
+            "May",
+            "Jun",
+            "Jul",
+            "Aug",
+            "Sep",
+            "Oct",
+            "Nov",
+            "Dec",
+        ],
+        tooltip: {
+            enabled: false,
+        },
+        labels: {
+            formatter: function (value) {
+                return value;
+            },
+            style: {
+                fontSize: "14px",
+            },
+        },
+        axisBorder: {
+            show: false,
+        },
+        crosshairs: {
+            show: true,
+            width: 20,
+            stroke: {
+                width: 0,
+            },
+            fill: {
+                type: "solid",
+                color: "#487FFF40",
+                // gradient: {
+                //   colorFrom: '#D8E3F0',
+                //   // colorTo: '#BED1E6',
+                //   stops: [0, 100],
+                //   opacityFrom: 0.4,
+                //   opacityTo: 0.5,
+                // },
+            },
+        },
+    },
+};
+
+var chart = new ApexCharts(document.querySelector("#chart-ujiemisi"), options);
+chart.render();
+// =========================== Sales Statistic Line Chart End ===============================
 
 // ================================ Total Subscriber bar chart Start ================================
 var options = {
@@ -522,6 +771,222 @@ var chart = new ApexCharts(
 );
 chart.render();
 // ================================ Users Overview Donut chart End ================================
+// ================================ Pertek Distribusi Chart Start ================================
+var options = {
+    series: [
+        {
+            name: "Usaha Perdagangan dan Jasa",
+            data: [
+                20000, 16000, 14000, 25000, 45000, 18000, 28000, 11000, 26000,
+                48000, 18000, 22000,
+            ],
+        },
+        {
+            name: "Property",
+            data: [
+                15000, 18000, 19000, 20000, 35000, 20000, 18000, 13000, 18000,
+                38000, 14000, 16000,
+            ],
+        },
+        {
+            name: "Manufaktur",
+            data: [
+                12000, 14000, 16000, 18000, 25000, 15000, 20000, 9000, 15000,
+                28000, 12000, 14000,
+            ],
+        },
+        {
+            name: "Lainnya",
+            data: [
+                8000, 10000, 11000, 12000, 18000, 10000, 14000, 7000, 11000,
+                20000, 9000, 10000,
+            ],
+        },
+    ],
+    colors: ["#487FFF", "#FF9F29", "#10B981", "#EF4444"],
+    labels: ["Active", "New", "Total"],
+    legend: {
+        show: false,
+    },
+    chart: {
+        type: "bar",
+        height: 250,
+        toolbar: {
+            show: false,
+        },
+    },
+    grid: {
+        show: true,
+        borderColor: "#D1D5DB",
+        strokeDashArray: 4, // Use a number for dashed style
+        position: "back",
+    },
+    plotOptions: {
+        bar: {
+            borderRadius: 4,
+            columnWidth: 10,
+        },
+    },
+    dataLabels: {
+        enabled: false,
+    },
+    stroke: {
+        show: true,
+        width: 2,
+        colors: ["transparent"],
+    },
+    xaxis: {
+        categories: [
+            "Jan",
+            "Feb",
+            "Mar",
+            "Apr",
+            "May",
+            "Jun",
+            "Jul",
+            "Aug",
+            "Sep",
+            "Oct",
+            "Nov",
+            "Dec",
+        ],
+    },
+    yaxis: {
+        categories: [
+            "0",
+            "5000",
+            "10,000",
+            "20,000",
+            "30,000",
+            "50,000",
+            "60,000",
+            "60,000",
+            "70,000",
+            "80,000",
+            "90,000",
+            "100,000",
+        ],
+    },
+    fill: {
+        opacity: 1,
+        width: 18,
+    },
+};
+
+var chart = new ApexCharts(
+    document.querySelector("#paymentStatusChart-angkut"),
+    options
+);
+chart.render();
+// ================================ Pertek Distribusi Chart End ================================
+// ================================ Pertek Distribusi Chart Start ================================
+var options = {
+    series: [
+        {
+            name: "Usaha Perdagangan dan Jasa",
+            data: [
+                20000, 16000, 14000, 25000, 45000, 18000, 28000, 11000, 26000,
+                48000, 18000, 22000,
+            ],
+        },
+        {
+            name: "Property",
+            data: [
+                15000, 18000, 19000, 20000, 35000, 20000, 18000, 13000, 18000,
+                38000, 14000, 16000,
+            ],
+        },
+        {
+            name: "Manufaktur",
+            data: [
+                12000, 14000, 16000, 18000, 25000, 15000, 20000, 9000, 15000,
+                28000, 12000, 14000,
+            ],
+        },
+        {
+            name: "Lainnya",
+            data: [
+                8000, 10000, 11000, 12000, 18000, 10000, 14000, 7000, 11000,
+                20000, 9000, 10000,
+            ],
+        },
+    ],
+    colors: ["#487FFF", "#FF9F29", "#10B981", "#EF4444"],
+    labels: ["Active", "New", "Total"],
+    legend: {
+        show: false,
+    },
+    chart: {
+        type: "bar",
+        height: 250,
+        toolbar: {
+            show: false,
+        },
+    },
+    grid: {
+        show: true,
+        borderColor: "#D1D5DB",
+        strokeDashArray: 4, // Use a number for dashed style
+        position: "back",
+    },
+    plotOptions: {
+        bar: {
+            borderRadius: 4,
+            columnWidth: 10,
+        },
+    },
+    dataLabels: {
+        enabled: false,
+    },
+    stroke: {
+        show: true,
+        width: 2,
+        colors: ["transparent"],
+    },
+    xaxis: {
+        categories: [
+            "Jan",
+            "Feb",
+            "Mar",
+            "Apr",
+            "May",
+            "Jun",
+            "Jul",
+            "Aug",
+            "Sep",
+            "Oct",
+            "Nov",
+            "Dec",
+        ],
+    },
+    yaxis: {
+        categories: [
+            "0",
+            "5000",
+            "10,000",
+            "20,000",
+            "30,000",
+            "50,000",
+            "60,000",
+            "60,000",
+            "70,000",
+            "80,000",
+            "90,000",
+            "100,000",
+        ],
+    },
+    fill: {
+        opacity: 1,
+        width: 18,
+    },
+};
+
+var chart = new ApexCharts(
+    document.querySelector("#paymentStatusChart-ujiemisi"),
+    options
+);
+chart.render();
+// ================================ Pertek Distribusi Chart End ================================
 
 // ================================ Pertek Distribusi Chart Start ================================
 var options = {
diff --git a/resources/views/dashboard/example-helper-usage.blade.php b/resources/views/dashboard/example-helper-usage.blade.php
new file mode 100644
index 0000000..61ff2f2
--- /dev/null
+++ b/resources/views/dashboard/example-helper-usage.blade.php
@@ -0,0 +1,72 @@
+{{-- Contoh penggunaan DashboardHelper di View --}}
+
+@extends('layout.layout')
+
+@section('content')
+<div class="container">
+    <h1>Dashboard {{ dashboard_type_label($type ?? 'pertek') }}</h1>
+
+    <div class="row">
+        @foreach($statuses as $index => $status)
+            <div class="col-md-3">
+                <div class="card {{ dashboard_card_background($status['id']) }}">
+                    <div class="card-body">
+                        <div class="d-flex align-items-center justify-content-between">
+                            <div>
+                                <span class="badge text-bg-{{ dashboard_badge_color($type ?? 'pertek') }}">
+                                    {{ dashboard_type_label($type ?? 'pertek') }}
+                                </span>
+                                <p class="fw-medium text-primary-light mb-1">{{ $status['label'] }}</p>
+                                <h4 class="mb-1 fw-bold text-{{ $status['color'] ?? 'primary' }}-600">
+                                    {{ $status['value'] }}
+                                </h4>
+
+                                {{-- Menampilkan trend jika bukan total --}}
+                                @if($status['id'] !== 'total')
+                                    @php
+                                        $trend = dashboard_trend($type ?? 'pertek', $status['id']);
+                                    @endphp
+                                    <span class="badge bg-{{ $trend['color'] }}-subtle text-{{ $trend['color'] }}-main">
+                                        {{ $trend['value'] > 0 ? '+' : '' }}{{ $trend['value'] }}%
+                                        <i class="fas fa-arrow-{{ $trend['direction'] === 'up' ? 'up' : 'down' }}"></i>
+                                    </span>
+                                @endif
+                            </div>
+                            <div class="w-50-px h-50-px {{ dashboard_icon_circle_color($status['id']) }} rounded-circle d-flex justify-content-center align-items-center">
+                                <x-lucide-{{ dashboard_status_icon($status['id']) }} class="text-white w-32-px h-32-px mb-0"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        @endforeach
+    </div>
+
+    {{-- Chart menggunakan helper --}}
+    @php
+        $chartData = dashboard_chart_data($type ?? 'pertek');
+    @endphp
+
+    <div class="row mt-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-body">
+                    <h5>Distribusi {{ dashboard_type_label($type ?? 'pertek') }}</h5>
+                    <div id="dashboard-chart"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+@push('scripts')
+<script>
+// Data dari helper untuk chart
+const chartData = @json($chartData);
+
+// Implementasi chart menggunakan ApexCharts atau library lainnya
+console.log('Chart Data:', chartData);
+</script>
+@endpush
+
+@endsection
diff --git a/resources/views/dashboard/index.blade.php b/resources/views/dashboard/index.blade.php
index 1976895..3989302 100644
--- a/resources/views/dashboard/index.blade.php
+++ b/resources/views/dashboard/index.blade.php
@@ -13,7 +13,7 @@
             <div class="card-body p-0">
                 <ul class="nav nav-pills nav-justified position-relative" id="dashboard-tabs" role="tablist">
                     <div class="nav-indicator position-absolute bg-primary rounded-pill transition-all"
-                         style="height: 100%; width: 33.33%; left: 0; top: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1;"></div>
+                         style="height: 100%; width: 20%; left: 0; top: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1;"></div>
 
                     <li class="nav-item position-relative" role="presentation" style="z-index: 2;">
                         <button class="nav-link active fw-semibold d-flex align-items-center justify-content-center gap-2 text-md py-4 px-3 border-0 bg-transparent position-relative overflow-hidden"
@@ -53,6 +53,31 @@
                                  style="width: 0; height: 0; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
                         </button>
                     </li>
+
+                    <li class="nav-item position-relative" role="presentation" style="z-index: 2;">
+                        <button class="nav-link fw-semibold d-flex align-items-center justify-content-center gap-2 text-md py-4 px-3 border-0 bg-transparent position-relative overflow-hidden"
+                                id="angkut-tab" data-bs-toggle="pill" data-bs-target="#angkut-content"
+                                type="button" role="tab" aria-controls="angkut-content" aria-selected="false">
+                            <div class="icon-wrapper d-flex align-items-center justify-content-center">
+                                <x-lucide-bus-front class="w-22-px h-22-px transition-all duration-300"/>
+                            </div>
+                            <span class="nav-text transition-all duration-300">IZIN ANGKUT & OLAH</span>
+                            <div class="nav-ripple position-absolute rounded-circle bg-white opacity-0 transition-all"
+                                 style="width: 0; height: 0; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
+                        </button>
+                    </li>
+                    <li class="nav-item position-relative" role="presentation" style="z-index: 2;">
+                        <button class="nav-link fw-semibold d-flex align-items-center justify-content-center gap-2 text-md py-4 px-3 border-0 bg-transparent position-relative overflow-hidden"
+                                id="ujiemisi-tab" data-bs-toggle="pill" data-bs-target="#ujiemisi-content"
+                                type="button" role="tab" aria-controls="ujiemisi-content" aria-selected="false">
+                            <div class="icon-wrapper d-flex align-items-center justify-content-center">
+                                <x-lucide-bus class="w-22-px h-22-px transition-all duration-300"/>
+                            </div>
+                            <span class="nav-text transition-all duration-300">IZIN TEMPAT UJI EMISI</span>
+                            <div class="nav-ripple position-absolute rounded-circle bg-white opacity-0 transition-all"
+                                 style="width: 0; height: 0; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
+                        </button>
+                    </li>
                 </ul>
             </div>
         </div>
@@ -74,8 +99,7 @@
                             <div>
                                 <span class="badge text-bg-primary">PERTEK</span>
                                 <p class="fw-medium text-primary-light mb-1">Total Pengajuan</p>
-                                <h4 class="mb-1 fw-bold text-primary-600">1,250</h4>
-                                <span class="text-sm text-secondary-light">+12% dari bulan lalu</span>
+                                <h4 class="mb-1 fw-bold text-primary-600">{{ $statuses[3]['value'] ?? 65 }}</h4>
                             </div>
                             <div class="w-50-px h-50-px bg-yellow rounded-circle d-flex justify-content-center align-items-center">
                                 <x-lucide-equal class="text-white w-32-px h-32-px mb-0"/>
@@ -93,8 +117,8 @@
                             <div>
                                  <span class="badge text-bg-primary">PERTEK</span>
                                 <p class="fw-medium text-primary-light mb-1">Izin Disetujui</p>
-                                <h4 class="mb-1 fw-bold text-success-main">850</h4>
-                                <span class="badge bg-success-subtle text-success-main">+8.2%</span>
+                                <h4 class="mb-1 fw-bold text-success-main">{{ $statuses[1]['value'] ?? 45 }}</h4>
+
                             </div>
                             <div class="w-50-px h-50-px bg-green rounded-circle d-flex justify-content-center align-items-center">
                                 <x-lucide-circle-check class="text-white w-32-px h-32-px mb-0"/>
@@ -112,8 +136,8 @@
                             <div>
                                  <span class="badge text-bg-primary">PERTEK</span>
                                 <p class="fw-medium text-primary-light mb-1">Dalam Proses</p>
-                                <h4 class="mb-1 fw-bold text-info-main">200</h4>
-                                <span class="text-sm text-secondary-light">sedang ditinjau</span>
+                                <h4 class="mb-1 fw-bold text-info-main">{{ $statuses[2]['value'] ?? 12 }}</h4>
+
                             </div>
                             <div class="w-50-px h-50-px bg-info rounded-circle d-flex justify-content-center align-items-center">
                                 <x-lucide-refresh-cw class="text-white w-32-px h-32-px mb-0"/>
@@ -131,8 +155,8 @@
                             <div>
                                  <span class="badge text-bg-primary">PERTEK</span>
                                 <p class="fw-medium text-primary-light mb-1">Izin Ditolak</p>
-                                <h4 class="mb-1 fw-bold text-danger-main">150</h4>
-                                <span class="text-sm text-secondary-light">perlu perbaikan</span>
+                                <h4 class="mb-1 fw-bold text-danger-main">{{ $statuses[0]['value'] ?? 8 }}</h4>
+
                             </div>
                             <div class="w-50-px h-50-px bg-red rounded-circle d-flex justify-content-center align-items-center">
                                 <x-lucide-circle-x class="text-white w-32-px h-32-px mb-0"/>
@@ -341,7 +365,6 @@
                                 <span class="badge text-bg-success">RINTEK</span>
                                 <p class="fw-medium text-primary-light mb-1">Total Pengajuan</p>
                                 <h4 class="mb-1 fw-bold text-primary-600">892</h4>
-                                <span class="text-sm text-secondary-light">+8% dari bulan lalu</span>
                             </div>
                             <div class="w-50-px h-50-px bg-yellow rounded-circle d-flex justify-content-center align-items-center">
                                 <x-lucide-equal class="text-white w-32-px h-32-px mb-0"/>
@@ -360,7 +383,6 @@
                                 <span class="badge text-bg-success">RINTEK</span>
                                 <p class="fw-medium text-primary-light mb-1">Izin Disetujui</p>
                                 <h4 class="mb-1 fw-bold text-success-main">675</h4>
-                                <span class="badge bg-success-subtle text-success-main">+6.5%</span>
                             </div>
                             <div class="w-50-px h-50-px bg-green rounded-circle d-flex justify-content-center align-items-center">
                                 <x-lucide-circle-check class="text-white w-32-px h-32-px mb-0"/>
@@ -379,7 +401,7 @@
                                 <span class="badge text-bg-success">RINTEK</span>
                                 <p class="fw-medium text-primary-light mb-1">Dalam Proses</p>
                                 <h4 class="mb-1 fw-bold text-info-main">147</h4>
-                                <span class="text-sm text-secondary-light">sedang ditinjau</span>
+
                             </div>
                             <div class="w-50-px h-50-px bg-info rounded-circle d-flex justify-content-center align-items-center">
                                 <x-lucide-refresh-cw class="text-white w-32-px h-32-px mb-0"/>
@@ -398,7 +420,7 @@
                                 <span class="badge text-bg-success">RINTEK</span>
                                 <p class="fw-medium text-primary-light mb-1">Izin Ditolak</p>
                                 <h4 class="mb-1 fw-bold text-danger-main">70</h4>
-                                <span class="text-sm text-secondary-light">perlu perbaikan</span>
+
                             </div>
                             <div class="w-50-px h-50-px bg-red rounded-circle d-flex justify-content-center align-items-center">
                                 <x-lucide-circle-x class="text-white w-32-px h-32-px mb-0"/>
@@ -607,7 +629,6 @@
                                 <span class="badge text-bg-info text-white">AMDAL</span>
                                 <p class="fw-medium text-primary-light mb-1">Total Pengajuan</p>
                                 <h4 class="mb-1 fw-bold text-primary-600">456</h4>
-                                <span class="text-sm text-secondary-light">+5% dari bulan lalu</span>
                             </div>
                             <div class="w-50-px h-50-px bg-yellow rounded-circle d-flex justify-content-center align-items-center">
                                 <x-lucide-equal class="text-white w-32-px h-32-px mb-0"/>
@@ -626,7 +647,6 @@
                                 <span class="badge text-bg-info text-white">AMDAL</span>
                                 <p class="fw-medium text-primary-light mb-1">Izin Disetujui</p>
                                 <h4 class="mb-1 fw-bold text-success-main">298</h4>
-                                <span class="badge bg-success-subtle text-success-main">+4.8%</span>
                             </div>
                             <div class="w-50-px h-50-px bg-green rounded-circle d-flex justify-content-center align-items-center">
                                 <x-lucide-circle-check class="text-white w-32-px h-32-px mb-0"/>
@@ -645,7 +665,7 @@
                                 <span class="badge text-bg-info text-white">AMDAL</span>
                                 <p class="fw-medium text-primary-light mb-1">Dalam Proses</p>
                                 <h4 class="mb-1 fw-bold text-info-main">112</h4>
-                                <span class="text-sm text-secondary-light">sedang ditinjau</span>
+
                             </div>
                             <div class="w-50-px h-50-px bg-info rounded-circle d-flex justify-content-center align-items-center">
                                 <x-lucide-refresh-cw class="text-white w-32-px h-32-px mb-0"/>
@@ -664,7 +684,7 @@
                                 <span class="badge text-bg-info text-white">AMDAL</span>
                                 <p class="fw-medium text-primary-light mb-1">Izin Ditolak</p>
                                 <h4 class="mb-1 fw-bold text-danger-main">46</h4>
-                                <span class="text-sm text-secondary-light">perlu perbaikan</span>
+
                             </div>
                             <div class="w-50-px h-50-px bg-red rounded-circle d-flex justify-content-center align-items-center">
                                 <x-lucide-circle-x class="text-white w-32-px h-32-px mb-0"/>
@@ -860,6 +880,534 @@
             </div>
         </div>
     </div>
+
+        <!-- izin angkut Content -->
+    <div class="tab-pane fade" id="angkut-content" role="tabpanel" aria-labelledby="angkut-tab">
+        <div class="row gy-4 mb-4">
+            <!-- Total Pengajuan -->
+            <div class="col-xl-3 col-lg-6 col-sm-6">
+                <div class="card shadow-none border bg-gradient-start-1 h-100">
+                    <div class="card-body p-20">
+                        <div class="d-flex align-items-center justify-content-between">
+                            <div>
+                                <span class="badge text-bg-dark text-white">IZIN ANGKUT & OLAH</span>
+                                <p class="fw-medium text-primary-light mb-1">Total Pengajuan</p>
+                                <h4 class="mb-1 fw-bold text-primary-600">456</h4>
+                            </div>
+                            <div class="w-50-px h-50-px bg-yellow rounded-circle d-flex justify-content-center align-items-center">
+                                <x-lucide-equal class="text-white w-32-px h-32-px mb-0"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Izin Disetujui -->
+            <div class="col-xl-3 col-lg-6 col-sm-6">
+                <div class="card shadow-none border bg-gradient-start-2 h-100">
+                    <div class="card-body p-20">
+                        <div class="d-flex align-items-center justify-content-between">
+                            <div>
+                                <span class="badge text-bg-dark text-white">IZIN ANGKUT & OLAH</span>
+                                <p class="fw-medium text-primary-light mb-1">Izin Disetujui</p>
+                                <h4 class="mb-1 fw-bold text-success-main">298</h4>
+                            </div>
+                            <div class="w-50-px h-50-px bg-green rounded-circle d-flex justify-content-center align-items-center">
+                                <x-lucide-circle-check class="text-white w-32-px h-32-px mb-0"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Izin Proses -->
+            <div class="col-xl-3 col-lg-6 col-sm-6">
+                <div class="card shadow-none border bg-gradient-start-3 h-100">
+                    <div class="card-body p-20">
+                        <div class="d-flex align-items-center justify-content-between">
+                            <div>
+                                <span class="badge text-bg-dark text-white">IZIN ANGKUT & OLAH</span>
+                                <p class="fw-medium text-primary-light mb-1">Dalam Proses</p>
+                                <h4 class="mb-1 fw-bold text-info-main">112</h4>
+
+                            </div>
+                            <div class="w-50-px h-50-px bg-info rounded-circle d-flex justify-content-center align-items-center">
+                                <x-lucide-refresh-cw class="text-white w-32-px h-32-px mb-0"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Izin Ditolak -->
+            <div class="col-xl-3 col-lg-6 col-sm-6">
+                <div class="card shadow-none border bg-gradient-start-4 h-100">
+                    <div class="card-body p-20">
+                        <div class="d-flex align-items-center justify-content-between">
+                            <div>
+                                <span class="badge text-bg-dark text-white">IZIN ANGKUT & OLAH</span>
+                                <p class="fw-medium text-primary-light mb-1">Izin Ditolak</p>
+                                <h4 class="mb-1 fw-bold text-danger-main">46</h4>
+
+                            </div>
+                            <div class="w-50-px h-50-px bg-red rounded-circle d-flex justify-content-center align-items-center">
+                                <x-lucide-circle-x class="text-white w-32-px h-32-px mb-0"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Top 5 Izin Tercepat Table -->
+        <div class="row gy-4 mt-4">
+            <div class="col-6">
+                <div class="card shadow-none border h-100">
+                    <div class="card-body p-24">
+                        <span class="badge text-bg-dark text-white">IZIN IZIN ANGKUT & OLAH</span>
+                        <h6 class="mb-3 fw-semibold">Top 5 Izin Tercepat</h6>
+                        <div class="table-responsive">
+                            <table class="table table-sm mb-0">
+                                <thead>
+                                    <tr>
+                                        <th scope="col" class="text-sm">No</th>
+                                        <th scope="col" class="text-sm">Nama Izin</th>
+                                        <th scope="col" class="text-sm">Total Izin</th>
+                                        <th scope="col" class="text-sm d-none d-lg-table-cell">Waktu Rata-Rata (Pemohon)</th>
+                                        <th scope="col" class="text-sm d-none d-lg-table-cell">Waktu Rata-Rata (Petugas)</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td>1</td>
+                                        <td class="text-sm">IZIN LINGKUNGAN KEGIATAN USAHA</td>
+                                        <td class="text-sm">87</td>
+                                        <td class="text-sm d-none d-lg-table-cell">72 Jam 30 Menit</td>
+                                        <td class="text-sm d-none d-lg-table-cell">45 Jam 15 Menit</td>
+                                    </tr>
+                                    <tr>
+                                        <td>2</td>
+                                        <td class="text-sm">SPPL (SURAT PERNYATAAN PENGELOLAAN LINGKUNGAN)</td>
+                                        <td class="text-sm">65</td>
+                                        <td class="text-sm d-none d-lg-table-cell">48 Jam 20 Menit</td>
+                                        <td class="text-sm d-none d-lg-table-cell">32 Jam 45 Menit</td>
+                                    </tr>
+                                    <tr>
+                                        <td>3</td>
+                                        <td class="text-sm">UKL-UPL (UPAYA KELOLA UPAYA PANTAU LINGKUNGAN)</td>
+                                        <td class="text-sm">98</td>
+                                        <td class="text-sm d-none d-lg-table-cell">96 Jam 45 Menit</td>
+                                        <td class="text-sm d-none d-lg-table-cell">68 Jam 30 Menit</td>
+                                    </tr>
+                                    <tr>
+                                        <td>4</td>
+                                        <td class="text-sm">AMDAL (ANALISIS MENGENAI DAMPAK LINGKUNGAN)</td>
+                                        <td class="text-sm">43</td>
+                                        <td class="text-sm d-none d-lg-table-cell">120 Jam 15 Menit</td>
+                                        <td class="text-sm d-none d-lg-table-cell">85 Jam 40 Menit</td>
+                                    </tr>
+                                    <tr>
+                                        <td>5</td>
+                                        <td class="text-sm">IZIN PEMBUANGAN AIR LIMBAH</td>
+                                        <td class="text-sm">76</td>
+                                        <td class="text-sm d-none d-lg-table-cell">84 Jam 50 Menit</td>
+                                        <td class="text-sm d-none d-lg-table-cell">58 Jam 25 Menit</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+               <div class="col-6">
+                <div class="card shadow-none border h-100">
+                    <div class="card-body p-24">
+                        <span class="badge text-bg-dark text-white">IZIN IZIN ANGKUT & OLAH</span>
+                        <h6 class="mb-3 fw-semibold">Top 5 Izin Terakhir Terbit</h6>
+                        <div class="table-responsive">
+                            <table class="table table-sm mb-0">
+                                <thead>
+                                    <tr>
+                                        <th scope="col" class="text-sm">No</th>
+                                        <th scope="col" class="text-sm">Nama Izin</th>
+                                        <th scope="col" class="text-sm">Pemohon</th>
+                                        <th scope="col" class="text-sm d-none d-lg-table-cell">Tanggal Terbit</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td>1</td>
+                                        <td class="text-sm">SERTIFIKAT LAIK OPERASI - PEMENUHAN BAKU MUTU EMISI</td>
+                                        <td class="text-sm">PT. MAJU BERSAMA</td>
+                                        <td class="text-sm d-none d-lg-table-cell">15 Des 2024</td>
+                                    </tr>
+                                    <tr>
+                                        <td>2</td>
+                                        <td class="text-sm">PERSETUJUAN TEKNIS - PEMENUHAN BAKU MUTU AIR LIMBAH</td>
+                                        <td class="text-sm">CV. KARYA MANDIRI</td>
+                                        <td class="text-sm d-none d-lg-table-cell">14 Des 2024</td>
+                                    </tr>
+                                    <tr>
+                                        <td>3</td>
+                                        <td class="text-sm">SERTIFIKAT LAIK OPERASI - PEMENUHAN BAKU MUTU AIR LIMBAH</td>
+                                        <td class="text-sm">PT. INDUSTRI SEJAHTERA</td>
+                                        <td class="text-sm d-none d-lg-table-cell">13 Des 2024</td>
+                                    </tr>
+                                    <tr>
+                                        <td>4</td>
+                                        <td class="text-sm">PERSETUJUAN TEKNIS - PEMENUHAN BAKU MUTU AIR LIMBAH</td>
+                                        <td class="text-sm">PT. TEKNOLOGI MODERN</td>
+                                        <td class="text-sm d-none d-lg-table-cell">12 Des 2024</td>
+                                    </tr>
+                                    <tr>
+                                        <td>5</td>
+                                        <td class="text-sm">SERTIFIKAT LAIK OPERASI - PEMENUHAN BAKU MUTU EMISI</td>
+                                        <td class="text-sm">CV. BERKAH JAYA</td>
+                                        <td class="text-sm d-none d-lg-table-cell">11 Des 2024</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="row gy-4 mt-1">
+            <div class="col-xxl-6 col-xl-12">
+                <div class="card h-100">
+                    <div class="card-body">
+                        <div class="d-flex flex-wrap align-items-center justify-content-between">
+                            <div class="d-flex align-items-center gap-2">
+                                <h6 class="text-lg mb-0">Grafik Trend Pengajuan</h6>
+                                <span class="badge text-bg-dark text-white">IZIN ANGKUT & OLAH</span>
+                            </div>
+                            <select class="form-select bg-base form-select-sm w-auto">
+                                <option>Yearly</option>
+                                <option>Monthly</option>
+                                <option>Weekly</option>
+                                <option>Today</option>
+                            </select>
+                        </div>
+                        <div class="d-flex flex-wrap align-items-center gap-2 mt-8">
+                            <h6 class="mb-0">456</h6>
+                            <span class="text-sm fw-semibold rounded-pill bg-success-focus text-success-main border br-success px-8 py-4 line-height-1 d-flex align-items-center gap-1">
+                                5% <iconify-icon icon="bxs:up-arrow" class="text-xs"></iconify-icon>
+                            </span>
+                            <span class="text-xs fw-medium">+ 22 Pengajuan/Bulan</span>
+                        </div>
+                        <div id="chart-angkut" class="pt-28 apexcharts-tooltip-style-1"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-xxl-6">
+                <div class="card h-100">
+                    <div class="card-body">
+                        <div class="d-flex align-items-center flex-wrap gap-2 justify-content-between">
+                            <div class="d-flex align-items-center gap-2">
+                                <h6 class="mb-2 fw-bold text-lg mb-0">Grafik Trend Distribusi Jenis Izin</h6>
+                                <span class="badge text-bg-dark text-white">IZIN ANGKUT & OLAH</span>
+                            </div>
+                            <select class="form-select form-select-sm w-auto bg-base border text-secondary-light">
+                                <option>Today</option>
+                                <option>Weekly</option>
+                                <option>Monthly</option>
+                                <option>Yearly</option>
+                            </select>
+                        </div>
+                        <ul class="d-flex flex-wrap align-items-center mt-3 gap-3">
+                            <li class="d-flex align-items-center gap-2">
+                                <span class="w-12-px h-12-px rounded-circle bg-primary-600"></span>
+                                <span class="text-secondary-light text-sm fw-semibold">Izin Lingkungan</span>
+                            </li>
+                            <li class="d-flex align-items-center gap-2">
+                                <span class="w-12-px h-12-px rounded-circle bg-yellow"></span>
+                                <span class="text-secondary-light text-sm fw-semibold">SPPL</span>
+                            </li>
+                            <li class="d-flex align-items-center gap-2">
+                                <span class="w-12-px h-12-px rounded-circle bg-success-main"></span>
+                                <span class="text-secondary-light text-sm fw-semibold">UKL-UPL</span>
+                            </li>
+                            <li class="d-flex align-items-center gap-2">
+                                <span class="w-12-px h-12-px rounded-circle bg-danger-400"></span>
+                                <span class="text-secondary-light text-sm fw-semibold">AMDAL</span>
+                            </li>
+                        </ul>
+
+                        <div class="mt-40">
+                            <div id="paymentStatusChart-angkut" class="margin-16-minus"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+            <!-- izin tempat uji emisi Content -->
+    <div class="tab-pane fade" id="ujiemisi-content" role="tabpanel" aria-labelledby="ujiemisi-tab">
+        <div class="row gy-4 mb-4">
+            <!-- Total Pengajuan -->
+            <div class="col-xl-3 col-lg-6 col-sm-6">
+                <div class="card shadow-none border bg-gradient-start-1 h-100">
+                    <div class="card-body p-20">
+                        <div class="d-flex align-items-center justify-content-between">
+                            <div>
+                                <span class="badge text-bg-warning text-white">IZIN TEMPAT UJI EMISI</span>
+                                <p class="fw-medium text-primary-light mb-1">Total Pengajuan</p>
+                                <h4 class="mb-1 fw-bold text-primary-600">456</h4>
+                            </div>
+                            <div class="w-50-px h-50-px bg-yellow rounded-circle d-flex justify-content-center align-items-center">
+                                <x-lucide-equal class="text-white w-32-px h-32-px mb-0"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Izin Disetujui -->
+            <div class="col-xl-3 col-lg-6 col-sm-6">
+                <div class="card shadow-none border bg-gradient-start-2 h-100">
+                    <div class="card-body p-20">
+                        <div class="d-flex align-items-center justify-content-between">
+                            <div>
+                                <span class="badge text-bg-warning text-white">IZIN TEMPAT UJI EMISI</span>
+                                <p class="fw-medium text-primary-light mb-1">Izin Disetujui</p>
+                                <h4 class="mb-1 fw-bold text-success-main">298</h4>
+                            </div>
+                            <div class="w-50-px h-50-px bg-green rounded-circle d-flex justify-content-center align-items-center">
+                                <x-lucide-circle-check class="text-white w-32-px h-32-px mb-0"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Izin Proses -->
+            <div class="col-xl-3 col-lg-6 col-sm-6">
+                <div class="card shadow-none border bg-gradient-start-3 h-100">
+                    <div class="card-body p-20">
+                        <div class="d-flex align-items-center justify-content-between">
+                            <div>
+                                <span class="badge text-bg-warning text-white">IZIN TEMPAT UJI EMISI</span>
+                                <p class="fw-medium text-primary-light mb-1">Dalam Proses</p>
+                                <h4 class="mb-1 fw-bold text-info-main">112</h4>
+
+                            </div>
+                            <div class="w-50-px h-50-px bg-info rounded-circle d-flex justify-content-center align-items-center">
+                                <x-lucide-refresh-cw class="text-white w-32-px h-32-px mb-0"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Izin Ditolak -->
+            <div class="col-xl-3 col-lg-6 col-sm-6">
+                <div class="card shadow-none border bg-gradient-start-4 h-100">
+                    <div class="card-body p-20">
+                        <div class="d-flex align-items-center justify-content-between">
+                            <div>
+                                <span class="badge text-bg-warning text-white">IZIN TEMPAT UJI EMISI</span>
+                                <p class="fw-medium text-primary-light mb-1">Izin Ditolak</p>
+                                <h4 class="mb-1 fw-bold text-danger-main">46</h4>
+
+                            </div>
+                            <div class="w-50-px h-50-px bg-red rounded-circle d-flex justify-content-center align-items-center">
+                                <x-lucide-circle-x class="text-white w-32-px h-32-px mb-0"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Top 5 Izin Tercepat Table -->
+        <div class="row gy-4 mt-4">
+            <div class="col-6">
+                <div class="card shadow-none border h-100">
+                    <div class="card-body p-24">
+                        <span class="badge text-bg-warning text-white">IZIN TEMPAT UJI EMISI</span>
+                        <h6 class="mb-3 fw-semibold">Top 5 Izin Tercepat</h6>
+                        <div class="table-responsive">
+                            <table class="table table-sm mb-0">
+                                <thead>
+                                    <tr>
+                                        <th scope="col" class="text-sm">No</th>
+                                        <th scope="col" class="text-sm">Nama Izin</th>
+                                        <th scope="col" class="text-sm">Total Izin</th>
+                                        <th scope="col" class="text-sm d-none d-lg-table-cell">Waktu Rata-Rata (Pemohon)</th>
+                                        <th scope="col" class="text-sm d-none d-lg-table-cell">Waktu Rata-Rata (Petugas)</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td>1</td>
+                                        <td class="text-sm">IZIN LINGKUNGAN KEGIATAN USAHA</td>
+                                        <td class="text-sm">87</td>
+                                        <td class="text-sm d-none d-lg-table-cell">72 Jam 30 Menit</td>
+                                        <td class="text-sm d-none d-lg-table-cell">45 Jam 15 Menit</td>
+                                    </tr>
+                                    <tr>
+                                        <td>2</td>
+                                        <td class="text-sm">SPPL (SURAT PERNYATAAN PENGELOLAAN LINGKUNGAN)</td>
+                                        <td class="text-sm">65</td>
+                                        <td class="text-sm d-none d-lg-table-cell">48 Jam 20 Menit</td>
+                                        <td class="text-sm d-none d-lg-table-cell">32 Jam 45 Menit</td>
+                                    </tr>
+                                    <tr>
+                                        <td>3</td>
+                                        <td class="text-sm">UKL-UPL (UPAYA KELOLA UPAYA PANTAU LINGKUNGAN)</td>
+                                        <td class="text-sm">98</td>
+                                        <td class="text-sm d-none d-lg-table-cell">96 Jam 45 Menit</td>
+                                        <td class="text-sm d-none d-lg-table-cell">68 Jam 30 Menit</td>
+                                    </tr>
+                                    <tr>
+                                        <td>4</td>
+                                        <td class="text-sm">AMDAL (ANALISIS MENGENAI DAMPAK LINGKUNGAN)</td>
+                                        <td class="text-sm">43</td>
+                                        <td class="text-sm d-none d-lg-table-cell">120 Jam 15 Menit</td>
+                                        <td class="text-sm d-none d-lg-table-cell">85 Jam 40 Menit</td>
+                                    </tr>
+                                    <tr>
+                                        <td>5</td>
+                                        <td class="text-sm">IZIN PEMBUANGAN AIR LIMBAH</td>
+                                        <td class="text-sm">76</td>
+                                        <td class="text-sm d-none d-lg-table-cell">84 Jam 50 Menit</td>
+                                        <td class="text-sm d-none d-lg-table-cell">58 Jam 25 Menit</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+               <div class="col-6">
+                <div class="card shadow-none border h-100">
+                    <div class="card-body p-24">
+                        <span class="badge text-bg-warning text-white">IZIN TEMPAT UJI EMISI</span>
+                        <h6 class="mb-3 fw-semibold">Top 5 Izin Terakhir Terbit</h6>
+                        <div class="table-responsive">
+                            <table class="table table-sm mb-0">
+                                <thead>
+                                    <tr>
+                                        <th scope="col" class="text-sm">No</th>
+                                        <th scope="col" class="text-sm">Nama Izin</th>
+                                        <th scope="col" class="text-sm">Pemohon</th>
+                                        <th scope="col" class="text-sm d-none d-lg-table-cell">Tanggal Terbit</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td>1</td>
+                                        <td class="text-sm">SERTIFIKAT LAIK OPERASI - PEMENUHAN BAKU MUTU EMISI</td>
+                                        <td class="text-sm">PT. MAJU BERSAMA</td>
+                                        <td class="text-sm d-none d-lg-table-cell">15 Des 2024</td>
+                                    </tr>
+                                    <tr>
+                                        <td>2</td>
+                                        <td class="text-sm">PERSETUJUAN TEKNIS - PEMENUHAN BAKU MUTU AIR LIMBAH</td>
+                                        <td class="text-sm">CV. KARYA MANDIRI</td>
+                                        <td class="text-sm d-none d-lg-table-cell">14 Des 2024</td>
+                                    </tr>
+                                    <tr>
+                                        <td>3</td>
+                                        <td class="text-sm">SERTIFIKAT LAIK OPERASI - PEMENUHAN BAKU MUTU AIR LIMBAH</td>
+                                        <td class="text-sm">PT. INDUSTRI SEJAHTERA</td>
+                                        <td class="text-sm d-none d-lg-table-cell">13 Des 2024</td>
+                                    </tr>
+                                    <tr>
+                                        <td>4</td>
+                                        <td class="text-sm">PERSETUJUAN TEKNIS - PEMENUHAN BAKU MUTU AIR LIMBAH</td>
+                                        <td class="text-sm">PT. TEKNOLOGI MODERN</td>
+                                        <td class="text-sm d-none d-lg-table-cell">12 Des 2024</td>
+                                    </tr>
+                                    <tr>
+                                        <td>5</td>
+                                        <td class="text-sm">SERTIFIKAT LAIK OPERASI - PEMENUHAN BAKU MUTU EMISI</td>
+                                        <td class="text-sm">CV. BERKAH JAYA</td>
+                                        <td class="text-sm d-none d-lg-table-cell">11 Des 2024</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="row gy-4 mt-1">
+            <div class="col-xxl-6 col-xl-12">
+                <div class="card h-100">
+                    <div class="card-body">
+                        <div class="d-flex flex-wrap align-items-center justify-content-between">
+                            <div class="d-flex align-items-center gap-2">
+                                <h6 class="text-lg mb-0">Grafik Trend Pengajuan</h6>
+                                <span class="badge text-bg-warning text-white">IZIN TEMPAT UJI EMISI</span>
+                            </div>
+                            <select class="form-select bg-base form-select-sm w-auto">
+                                <option>Yearly</option>
+                                <option>Monthly</option>
+                                <option>Weekly</option>
+                                <option>Today</option>
+                            </select>
+                        </div>
+                        <div class="d-flex flex-wrap align-items-center gap-2 mt-8">
+                            <h6 class="mb-0">456</h6>
+                            <span class="text-sm fw-semibold rounded-pill bg-success-focus text-success-main border br-success px-8 py-4 line-height-1 d-flex align-items-center gap-1">
+                                5% <iconify-icon icon="bxs:up-arrow" class="text-xs"></iconify-icon>
+                            </span>
+                            <span class="text-xs fw-medium">+ 22 Pengajuan/Bulan</span>
+                        </div>
+                        <div id="chart-ujiemisi" class="pt-28 apexcharts-tooltip-style-1"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-xxl-6">
+                <div class="card h-100">
+                    <div class="card-body">
+                        <div class="d-flex align-items-center flex-wrap gap-2 justify-content-between">
+                            <div class="d-flex align-items-center gap-2">
+                                <h6 class="mb-2 fw-bold text-lg mb-0">Grafik Trend Distribusi Jenis Izin</h6>
+                                <span class="badge text-bg-warning text-white">IZIN TEMPAT UJI EMISI</span>
+                            </div>
+                            <select class="form-select form-select-sm w-auto bg-base border text-secondary-light">
+                                <option>Today</option>
+                                <option>Weekly</option>
+                                <option>Monthly</option>
+                                <option>Yearly</option>
+                            </select>
+                        </div>
+                        <ul class="d-flex flex-wrap align-items-center mt-3 gap-3">
+                            <li class="d-flex align-items-center gap-2">
+                                <span class="w-12-px h-12-px rounded-circle bg-primary-600"></span>
+                                <span class="text-secondary-light text-sm fw-semibold">Izin Lingkungan</span>
+                            </li>
+                            <li class="d-flex align-items-center gap-2">
+                                <span class="w-12-px h-12-px rounded-circle bg-yellow"></span>
+                                <span class="text-secondary-light text-sm fw-semibold">SPPL</span>
+                            </li>
+                            <li class="d-flex align-items-center gap-2">
+                                <span class="w-12-px h-12-px rounded-circle bg-success-main"></span>
+                                <span class="text-secondary-light text-sm fw-semibold">UKL-UPL</span>
+                            </li>
+                            <li class="d-flex align-items-center gap-2">
+                                <span class="w-12-px h-12-px rounded-circle bg-danger-400"></span>
+                                <span class="text-secondary-light text-sm fw-semibold">AMDAL</span>
+                            </li>
+                        </ul>
+
+                        <div class="mt-40">
+                            <div id="paymentStatusChart-ujiemisi" class="margin-16-minus"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 
 @endsection
@@ -1092,7 +1640,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
     function updateIndicator(activeTab) {
         const tabIndex = Array.from(navTabs).indexOf(activeTab);
-        const leftPosition = (tabIndex * 33.33) + '%';
+        const leftPosition = (tabIndex * 20) + '%';
         indicator.style.left = leftPosition;
     }
 });