done:

src/app/(dashboard)/karyawan/page.tsx

@@ -32,7 +32,7 @@ export default function KaryawanPage() {
         acc[curr.type] = (acc[curr.type] || 0) + curr.count;
         return acc;
       }, {} as {[key: string]: number});
-      setTotalSanctions(Object.keys(total).map(key => ({type: key, count: total[key]})))
+      setTotalSanctions(Object.keys(total).map(key => ({type: key, count: total[key]})));
     }
   }, [sanctionSummary]);
 
@@ -97,7 +97,7 @@ export default function KaryawanPage() {
       <div className="col-span-8 bg-white rounded-lg py-4 pl-4 max-h-[420px] flex flex-col">
         <div className="text-xl font-bold">Ranking (Top 10) Total Penjatuhan Sanksi Setiap Perusahaan</div>
         <div className="flex-1 min-h-[300px] flex justify-center items-center flex-col">
-          <BarChart className="w-full" dataset={sanctionSummary ?? []} series={[
+          <BarChart className="w-full" dataset={[...sanctionSummary?.sort((a, b) => b.st + b.sp1 + b.sp2 + b.sp3 + b.phk - a.st - a.sp1 - a.sp2 - a.sp3 - a.phk).slice(0, 10) ?? []]} series={[
             {dataKey: "st", label: "ST", color: "#F5C322"},
             {dataKey: "sp1", label: "SP1", color: "#F3832D"},
             {dataKey: "sp2", label: "SP2", color: "#F6CBAB"},

src/app/layout.tsx

@@ -18,8 +18,8 @@ const geistMono = localFont({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Julong HRM - Dashboard",
+  description: "Julong HRM - Dashboard",
 };
 
 export default function RootLayout({