style fixes

Author: alrocar

dashboard/ai-analytics/src/app/components/BarList.tsx

@@ -62,20 +62,20 @@ export default function BarList({
   return (
     <>
       <Card className="h-full w-full rounded-none border-0" style={{ boxShadow: '-1px 0 0 0 rgb(55 65 81)' }}>
-        <p className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">
+        {/* <p className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">
           Total
-        </p>
+        </p> */}
         <p className="text-tremor-metric font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong">
           {valueFormatter(totalValue)}
         </p>
-        <div className="mt-6 flex items-center justify-between">
+        {/* <div className="mt-6 flex items-center justify-between">
           <p className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong">
             
           </p>
           <p className="text-tremor-label font-medium uppercase text-tremor-content dark:text-dark-tremor-content">
-            Count
+            Cost
           </p>
-        </div>
+        </div> */}
         {renderBarList(data.slice(0, 5))}
         {hasMoreItems && (
           <div className="absolute inset-x-0 bottom-0 flex justify-center rounded-b-tremor-default bg-gradient-to-t from-tremor-background to-transparent py-7 dark:from-dark-tremor-background">
@@ -107,7 +107,7 @@ export default function BarList({
                   Name
                 </p>
                 <p className="text-tremor-label font-medium uppercase text-tremor-content dark:text-dark-tremor-content">
-                  Count
+                  Cost
                 </p>
               </div>
             </div>

dashboard/ai-analytics/src/app/components/TabbedPane.tsx

@@ -79,7 +79,7 @@ export default function TabbedPane({ filters, onFilterUpdate }: TabbedPaneProps)
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const newData = data.data.map((item: any) => ({
         name: item.category || 'Unknown',
-        value: item.count
+        value: item.total_cost || 0 // Use total_cost instead of count
       }));
       setBarListData(newData);
     }
@@ -115,7 +115,7 @@ export default function TabbedPane({ filters, onFilterUpdate }: TabbedPaneProps)
           ) : (
             <BarList 
               data={barListData}
-              valueFormatter={(value: number) => value.toLocaleString()}
+              valueFormatter={(value: number) => `$${value.toLocaleString()}`} // Add $ sign for cost values
               onSelectionChange={handleSelectionChange}
             />
           )}

dashboard/ai-analytics/src/app/components/TopBar.tsx

@@ -119,7 +119,7 @@ export default function TopBar({ selections, onRemoveFilter }: TopBarProps) {
       <div className="flex items-center space-x-4">
         <button
             onClick={openCostPrediction}
-            className="flex items-center px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+            className="flex items-center px-3 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors shadow-sm"
           >
           <Calculator className="w-4 h-4 mr-2" />
           AI calculator
@@ -129,13 +129,13 @@ export default function TopBar({ selections, onRemoveFilter }: TopBarProps) {
             ref={inputRef}
             type="text"
             placeholder="Filter by..."
-            className="px-4 py-2 text-sm border rounded-md dark:bg-gray-800 dark:border-gray-700"
+            className="px-4 py-2 text-sm border rounded-md dark:bg-gray-800 dark:border-gray-700 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all"
             onKeyDown={handleSearch}
             disabled={isLoading}
           />
           {isLoading && (
             <div className="absolute right-3 top-2">
-              <div className="animate-spin h-4 w-4 border-2 border-blue-500 rounded-full border-t-transparent"></div>
+              <div className="animate-spin h-4 w-4 border-2 border-indigo-500 rounded-full border-t-transparent"></div>
             </div>
           )}
         </div>
@@ -155,9 +155,12 @@ export default function TopBar({ selections, onRemoveFilter }: TopBarProps) {
       </div>
 
       <div className="flex items-center space-x-4">
+        <span className="text-sm font-medium text-gray-500 dark:text-gray-400">
+          {orgName || 'Admin User'}
+        </span>
         <SignedOut>
           <SignInButton mode="modal">
-            <button className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700">
+            <button className="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700 transition-colors shadow-sm">
               Sign In
             </button>
           </SignInButton>
@@ -170,9 +173,6 @@ export default function TopBar({ selections, onRemoveFilter }: TopBarProps) {
         <SignedIn>
           <UserButton afterSignOutUrl="/" />
         </SignedIn>
-        <span className="text-sm font-medium text-gray-500 dark:text-gray-400">
-          {orgName || 'Admin User'}
-        </span>
       </div>
     </div>
   );

tinybird/endpoints/generic_counter.pipe

@@ -11,7 +11,8 @@ SQL >
     {% end %}
     SELECT
         toString({{column(dimension, 'organization')}}) as category,
-        count() as count
+        count() as count,
+        sum(cost) as total_cost
     FROM llm_events
     WHERE 1=1
     {% if defined(start_date) and defined(end_date) %}