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

@@ -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> = {

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] ${

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) => (