componenets standardization 1

frontend/src/components/dashboard/WorkflowCompletionWidget.tsx

@@ -16,6 +16,7 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Card } from '../ui/card/Card';
+import Button from '../ui/button/Button';
 import { ChevronRightIcon } from '@heroicons/react/24/solid';
 import { useWorkflowStats, TimeFilter } from '../../hooks/useWorkflowStats';
 import { WORKFLOW_COLORS } from '../../config/colors.config';
@@ -55,17 +56,15 @@ function TimeFilterButtons({ value, onChange }: TimeFilterProps) {
   return (
     <div className="flex items-center gap-1 bg-gray-100 dark:bg-gray-800 rounded-lg p-0.5">
       {options.map((option) => (
-        <button
+        <Button
           key={option.value}
           onClick={() => onChange(option.value)}
-          className={`px-2 py-1 text-xs font-medium rounded-md transition-all ${
-            value === option.value
-              ? 'bg-brand-500 text-white shadow-sm'
-              : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
-          }`}
+          variant={value === option.value ? 'primary' : 'ghost'}
+          tone={value === option.value ? 'brand' : 'neutral'}
+          size="xs"
         >
           {option.label}
-        </button>
+        </Button>
       ))}
     </div>
   );