From 8887e3b0a986d30849d72f81473fa20551bf974f Mon Sep 17 00:00:00 2001
From: Hafid Nur <hafidnurazis@gmail.com>
Date: Sat, 5 Apr 2025 06:05:50 +0700
Subject: [PATCH] feat: update ui component sidebar, datatable, button

- Tambah halaman "Gacha Roll" pada sidebar
- Edit style button variant danger
- Adjust sedikit header datatable
---
 libs/ui/src/atoms/button/button.tsx                 |  2 +-
 .../backoffice-sidebar/backoffice-sidebar.tsx       | 13 +++++++++++++
 libs/ui/src/organisms/datatable/datatable.tsx       |  2 +-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/libs/ui/src/atoms/button/button.tsx b/libs/ui/src/atoms/button/button.tsx
index dc831b5..20c1677 100644
--- a/libs/ui/src/atoms/button/button.tsx
+++ b/libs/ui/src/atoms/button/button.tsx
@@ -31,7 +31,7 @@ const variantClasses: Record<TButtonVariant, string> = {
   bordered:
     'border border-primary-500 hover:border-primary-600 bg-transparent hover:text-primary-600 hover:bg-gray-50 text-primary-500',
   success: 'bg-success-500 hover:bg-success-600 text-white shadow-md',
-  danger: 'bg-danger-500 hover:bg-danger-600 text-white shadow-md',
+  danger: 'bg-danger-100 hover:bg-danger-200 text-danger-500 shadow-md',
 };
 
 const sizeClasses: Record<TButtonSize, string> = {
diff --git a/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx b/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
index 3ceb18e..7239b64 100644
--- a/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
+++ b/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
@@ -3,6 +3,7 @@ import {
   AuditOutlined,
   InboxOutlined,
   LogoutOutlined,
+  ReloadOutlined,
   UserOutlined,
 } from '@ant-design/icons';
 import { Button } from '../../atoms';
@@ -33,6 +34,18 @@ export const BackofficeSidebar: FC = (): ReactElement => {
             <span className="text-p3 font-medium">Dashboard & Set Gacha</span>
           </Link>
 
+          <Link
+            to="/gacha-roll"
+            className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
+              isActive('/gacha-roll')
+                ? 'bg-primary-500 text-white rounded-md'
+                : 'text-gray-700 hover:bg-gray-100'
+            }`}
+          >
+            <ReloadOutlined className="text-[20px]" />
+            <span className="text-p3 font-medium">Gacha Roll</span>
+          </Link>
+
           <Link
             to="/accounts"
             className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
diff --git a/libs/ui/src/organisms/datatable/datatable.tsx b/libs/ui/src/organisms/datatable/datatable.tsx
index 0a52130..9f28916 100644
--- a/libs/ui/src/organisms/datatable/datatable.tsx
+++ b/libs/ui/src/organisms/datatable/datatable.tsx
@@ -43,7 +43,7 @@ export const DataTable = <T,>({
     <div className="flex flex-col gap-8">
       <div className="w-full overflow-x-auto">
         <table className="w-full min-w-full text-base">
-          <thead className="bg-primary-50 mb-3 text-left">
+          <thead className="bg-primary-50 mb-3 text-left text-nowrap">
             {table.getHeaderGroups().map((headerGroup) => (
               <tr key={headerGroup.id}>
                 {headerGroup.headers.map((header) => (