Skip to content

Commit 15e8edc

Browse files
alrocaralrocar
committed
buttoms
1 parent ea09a67 commit 15e8edc

File tree

2 files changed

+65
-42
lines changed

2 files changed

+65
-42
lines changed

‎dashboard/ai-analytics/src/app/components/CustomBarList.tsx‎

Lines changed: 62 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -48,38 +48,49 @@ export default function CustomBarList({
4848
});
4949
};
5050

51-
// Custom bar rendering with icons
51+
// Custom bar rendering with icons and improved styling
5252
const renderCustomBarList = (items: BarListItem[]) => (
5353
<div className="mt-4 space-y-3">
5454
{items.map((item) => {
5555
// Calculate percentage for bar width (max 92% to leave room for text)
5656
const maxValue = Math.max(...items.map(i => i.value));
5757
const percentage = maxValue > 0 ? (item.value / maxValue) * 92 : 0;
58+
const isSelected = selectedItems.includes(item.name);
5859

5960
return (
6061
<div
6162
key={item.name}
62-
className="flex items-center cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 p-1 rounded transition-colors"
63+
className={`flex flex-col cursor-pointer p-2 rounded-lg transition-all duration-200 ${
64+
isSelected
65+
? 'bg-indigo-50 dark:bg-indigo-900/30 border-l-4 border-indigo-500'
66+
: 'hover:bg-gray-50 dark:hover:bg-gray-800 border-l-4 border-transparent'
67+
}`}
6368
onClick={() => handleBarClick(item.name)}
6469
>
65-
<div className="flex items-center w-full">
70+
<div className="flex items-center w-full mb-1.5">
6671
<div className="flex items-center min-w-0 flex-1">
6772
{item.icon && (
68-
<div className="mr-2 flex-shrink-0">
73+
<div className="mr-2.5 flex-shrink-0">
6974
{item.icon}
7075
</div>
7176
)}
72-
<p className="truncate text-tremor-default text-tremor-content dark:text-dark-tremor-content">
77+
<p className={`truncate text-sm font-medium ${
78+
isSelected ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-700 dark:text-gray-300'
79+
}`}>
7380
{item.name}
7481
</p>
7582
</div>
76-
<p className="ml-2 flex-shrink-0 text-right text-tremor-default text-tremor-content-emphasis dark:text-dark-tremor-content-emphasis">
83+
<p className={`ml-2 flex-shrink-0 text-right text-sm font-semibold ${
84+
isSelected ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-900 dark:text-gray-100'
85+
}`}>
7786
{valueFormatter(item.value)}
7887
</p>
7988
</div>
80-
<div className="w-full h-1 mt-1">
89+
<div className="w-full h-1.5 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
8190
<div
82-
className="h-full bg-indigo-500 rounded-full"
91+
className={`h-full rounded-full ${
92+
isSelected ? 'bg-indigo-500' : 'bg-indigo-400'
93+
}`}
8394
style={{ width: `${percentage}%` }}
8495
/>
8596
</div>
@@ -91,62 +102,74 @@ export default function CustomBarList({
91102

92103
return (
93104
<>
94-
<Card className="h-full w-full rounded-none border-0" style={{ boxShadow: '-1px 0 0 0 rgb(55 65 81)' }}>
95-
<p className="text-tremor-metric font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong">
96-
{valueFormatter(totalValue)}
97-
</p>
105+
<Card className="h-full w-full rounded-lg border border-gray-200 dark:border-gray-800 shadow-sm">
106+
<div className="flex items-center justify-between mb-4">
107+
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">Cost Breakdown</h3>
108+
<p className="text-2xl font-bold text-indigo-600 dark:text-indigo-400">
109+
{valueFormatter(totalValue)}
110+
</p>
111+
</div>
112+
98113
{renderCustomBarList(data.slice(0, 5))}
114+
99115
{hasMoreItems && (
100-
<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">
116+
<div className="mt-4 pt-3 border-t border-gray-100 dark:border-gray-800 flex justify-center">
101117
<button
102-
className="flex items-center justify-center rounded-tremor-small border border-tremor-border bg-tremor-background px-2.5 py-2 text-tremor-default font-medium text-tremor-content-strong shadow-tremor-input hover:bg-tremor-background-muted dark:border-dark-tremor-border dark:bg-dark-tremor-background dark:text-dark-tremor-content-strong dark:shadow-dark-tremor-input hover:dark:bg-dark-tremor-background-muted"
118+
className="px-4 py-2 text-sm font-medium text-indigo-600 bg-indigo-50 rounded-md hover:bg-indigo-100 dark:text-indigo-400 dark:bg-indigo-900/20 dark:hover:bg-indigo-900/30 transition-colors"
103119
onClick={() => setIsOpen(true)}
104120
>
105-
Show more
121+
View All ({data.length})
106122
</button>
107123
</div>
108124
)}
125+
109126
<Dialog
110127
open={isOpen}
111128
onClose={() => setIsOpen(false)}
112129
static={true}
113130
className="z-[100]"
114131
>
115-
<DialogPanel className="overflow-hidden p-0">
116-
<div className="px-6 pb-4 pt-6">
132+
<DialogPanel className="max-w-md overflow-hidden rounded-lg">
133+
<div className="px-6 pb-4 pt-6 border-b border-gray-100 dark:border-gray-800">
134+
<div className="flex items-center justify-between mb-4">
135+
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">All Items</h3>
136+
<button
137+
onClick={() => setIsOpen(false)}
138+
className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
139+
>
140+
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
141+
<path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
142+
</svg>
143+
</button>
144+
</div>
145+
117146
<TextInput
118147
icon={RiSearchLine}
119-
placeholder="Search..."
120-
className="rounded-tremor-small"
148+
placeholder="Search items..."
149+
className="rounded-md"
121150
value={searchQuery}
122151
onValueChange={setSearchQuery}
123152
/>
124-
<div className="flex items-center justify-between pt-4">
125-
<p className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong">
126-
Name
127-
</p>
128-
<p className="text-tremor-label font-medium uppercase text-tremor-content dark:text-dark-tremor-content">
129-
Cost
130-
</p>
131-
</div>
132153
</div>
133-
<div className="h-96 overflow-y-scroll px-6">
154+
155+
<div className="h-96 overflow-y-auto px-6 py-4">
134156
{filteredItems.length > 0 ? (
135157
renderCustomBarList(filteredItems)
136158
) : (
137-
<p className="flex h-full items-center justify-center text-tremor-default text-tremor-content-strong dark:text-dark-tremor-content-strong">
138-
No results.
139-
</p>
159+
<div className="flex flex-col items-center justify-center h-full text-center">
160+
<svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12 text-gray-300 dark:text-gray-600 mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
161+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
162+
</svg>
163+
<p className="text-gray-500 dark:text-gray-400">No results found for "{searchQuery}"</p>
164+
<button
165+
onClick={() => setSearchQuery('')}
166+
className="mt-3 text-sm text-indigo-600 dark:text-indigo-400 hover:underline"
167+
>
168+
Clear search
169+
</button>
170+
</div>
140171
)}
141172
</div>
142-
<div className="mt-4 border-t border-tremor-border bg-tremor-background-muted p-6 dark:border-dark-tremor-border dark:bg-dark-tremor-background">
143-
<button
144-
className="flex w-full items-center justify-center rounded-tremor-small border border-tremor-border bg-tremor-background py-2 text-tremor-default font-medium text-tremor-content-strong shadow-tremor-input hover:bg-tremor-background-muted dark:border-dark-tremor-border dark:bg-dark-tremor-background dark:text-dark-tremor-content-strong dark:shadow-dark-tremor-input hover:dark:bg-dark-tremor-background-muted"
145-
onClick={() => setIsOpen(false)}
146-
>
147-
Go back
148-
</button>
149-
</div>
150173
</DialogPanel>
151174
</Dialog>
152175
</Card>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -118,9 +118,9 @@ export default function TopBar({ selections, onRemoveFilter }: TopBarProps) {
118118
<div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-800">
119119
<div className="flex items-center space-x-4">
120120
<button
121-
onClick={openCostPrediction}
122-
className="flex items-center px-3 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors shadow-sm"
123-
>
121+
onClick={openCostPrediction}
122+
className="flex items-center px-3 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors shadow-sm"
123+
>
124124
<Calculator className="w-4 h-4 mr-2" />
125125
AI calculator
126126
</button>

0 commit comments

Comments
 (0)