Skip to content

Commit 5ff4397

Browse files
Harshvardhan-91Harshvardhan-91
committed
feat: enhance dashboard with new sidebar navigation, AI analytics, and improved upload modal
1 parent 36d3adc commit 5ff4397

1 file changed

Lines changed: 53 additions & 61 deletions

File tree

‎packages/ui/src/ai-file-card.tsx‎

Lines changed: 53 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -101,19 +101,19 @@ export function AIFileCard({
101101
return (
102102
<div
103103
className={cn(
104-
"bg-white rounded-lg border border-gray-200 p-4 hover:shadow-md transition-all cursor-pointer",
104+
"bg-white rounded-xl border border-gray-200 p-5 hover:shadow-lg transition-all duration-200 cursor-pointer group",
105105
className
106106
)}
107107
onClick={onClick}
108108
>
109109
{/* Header */}
110-
<div className="flex items-start justify-between mb-3">
110+
<div className="flex items-start justify-between mb-4">
111111
<div className="flex items-center space-x-3 flex-1 min-w-0">
112-
<div className="flex-shrink-0">
113-
<Icon className="h-8 w-8 text-blue-500" />
112+
<div className="flex-shrink-0 p-2 bg-blue-50 rounded-lg group-hover:bg-blue-100 transition-colors">
113+
<Icon className="h-6 w-6 text-blue-600" />
114114
</div>
115115
<div className="flex-1 min-w-0">
116-
<h3 className="text-sm font-medium text-gray-900 truncate">
116+
<h3 className="text-sm font-semibold text-gray-900 truncate mb-1">
117117
{name}
118118
</h3>
119119
<p className="text-xs text-gray-500">
@@ -123,24 +123,23 @@ export function AIFileCard({
123123
</div>
124124

125125
{/* Processing Status */}
126-
<div className="flex items-center space-x-1 text-xs">
126+
<div className="flex items-center space-x-1">
127127
{getProcessingStatusIcon()}
128-
<span className="text-gray-600">{getProcessingStatusText()}</span>
129128
</div>
130129
</div>
131130

132131
{/* AI Processing Results */}
133132
{processingStatus === 'COMPLETED' && (
134-
<div className="space-y-3">
133+
<div className="space-y-4">
135134
{/* AI Summary */}
136135
{aiSummary && (
137-
<div className="bg-blue-50 rounded-md p-3">
136+
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-4 border border-blue-100">
138137
<div className="flex items-center space-x-2 mb-2">
139138
<Brain className="h-4 w-4 text-blue-600" />
140-
<span className="text-xs font-medium text-blue-800">AI Summary</span>
139+
<span className="text-xs font-semibold text-blue-800">AI Summary</span>
141140
</div>
142141
<p className="text-xs text-blue-700 leading-relaxed">
143-
{aiSummary.length > 200 ? `${aiSummary.substring(0, 200)}...` : aiSummary}
142+
{aiSummary.length > 120 ? `${aiSummary.substring(0, 120)}...` : aiSummary}
144143
</p>
145144
</div>
146145
)}
@@ -149,21 +148,21 @@ export function AIFileCard({
149148
{aiTags.length > 0 && (
150149
<div>
151150
<div className="flex items-center space-x-2 mb-2">
152-
<Tag className="h-4 w-4 text-gray-600" />
153-
<span className="text-xs font-medium text-gray-700">AI Tags</span>
151+
<Tag className="h-3 w-3 text-gray-600" />
152+
<span className="text-xs font-medium text-gray-700">Smart Tags</span>
154153
</div>
155154
<div className="flex flex-wrap gap-1">
156-
{aiTags.slice(0, 8).map((tag, index) => (
155+
{aiTags.slice(0, 6).map((tag, index) => (
157156
<span
158157
key={index}
159-
className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded-full"
158+
className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded-full font-medium hover:bg-gray-200 transition-colors"
160159
>
161160
{tag}
162161
</span>
163162
))}
164-
{aiTags.length > 8 && (
163+
{aiTags.length > 6 && (
165164
<span className="px-2 py-1 bg-gray-100 text-gray-500 text-xs rounded-full">
166-
+{aiTags.length - 8} more
165+
+{aiTags.length - 6}
167166
</span>
168167
)}
169168
</div>
@@ -177,20 +176,8 @@ export function AIFileCard({
177176
Keywords
178177
</div>
179178
<div className="text-xs text-gray-600">
180-
{aiKeywords.slice(0, 6).join(', ')}
181-
{aiKeywords.length > 6 && '...'}
182-
</div>
183-
</div>
184-
)}
185-
186-
{/* OCR Text Preview */}
187-
{ocrText && ocrText.length > 0 && (
188-
<div>
189-
<div className="text-xs font-medium text-gray-700 mb-1">
190-
Extracted Text
191-
</div>
192-
<div className="text-xs text-gray-600 bg-gray-50 rounded p-2 max-h-20 overflow-hidden">
193-
{ocrText.length > 150 ? `${ocrText.substring(0, 150)}...` : ocrText}
179+
{aiKeywords.slice(0, 5).join(', ')}
180+
{aiKeywords.length > 5 && '...'}
194181
</div>
195182
</div>
196183
)}
@@ -199,56 +186,61 @@ export function AIFileCard({
199186

200187
{/* Processing States */}
201188
{processingStatus === 'PROCESSING' && (
202-
<div className="bg-blue-50 rounded-md p-3 text-center">
189+
<div className="bg-blue-50 rounded-lg p-4 text-center border border-blue-100">
203190
<Loader2 className="h-6 w-6 text-blue-500 animate-spin mx-auto mb-2" />
204-
<p className="text-xs text-blue-700">
205-
AI is analyzing your file...
191+
<p className="text-xs text-blue-700 font-medium">
192+
AI is analyzing...
206193
</p>
207194
</div>
208195
)}
209196

210197
{processingStatus === 'FAILED' && (
211-
<div className="bg-red-50 rounded-md p-3 text-center">
198+
<div className="bg-red-50 rounded-lg p-4 text-center border border-red-100">
212199
<AlertCircle className="h-6 w-6 text-red-500 mx-auto mb-2" />
213200
<p className="text-xs text-red-700">
214-
AI processing failed. File is still accessible.
201+
Processing failed
215202
</p>
216203
</div>
217204
)}
218205

219206
{processingStatus === 'PENDING' && (
220-
<div className="bg-yellow-50 rounded-md p-3 text-center">
207+
<div className="bg-yellow-50 rounded-lg p-4 text-center border border-yellow-100">
221208
<Clock className="h-6 w-6 text-yellow-500 mx-auto mb-2" />
222209
<p className="text-xs text-yellow-700">
223-
Queued for AI processing...
210+
Queued for AI analysis
224211
</p>
225212
</div>
226213
)}
227214

228215
{/* Actions */}
229-
<div className="flex justify-end space-x-2 mt-4 pt-3 border-t border-gray-100">
230-
{onDownload && (
231-
<button
232-
onClick={(e) => {
233-
e.stopPropagation();
234-
onDownload();
235-
}}
236-
className="text-xs text-blue-600 hover:text-blue-800 font-medium"
237-
>
238-
Download
239-
</button>
240-
)}
241-
{onDelete && (
242-
<button
243-
onClick={(e) => {
244-
e.stopPropagation();
245-
onDelete();
246-
}}
247-
className="text-xs text-red-600 hover:text-red-800 font-medium"
248-
>
249-
Delete
250-
</button>
251-
)}
216+
<div className="flex justify-between items-center mt-4 pt-4 border-t border-gray-100">
217+
<div className="text-xs text-gray-500">
218+
{getProcessingStatusText()}
219+
</div>
220+
<div className="flex space-x-3">
221+
{onDownload && (
222+
<button
223+
onClick={(e) => {
224+
e.stopPropagation();
225+
onDownload();
226+
}}
227+
className="text-xs text-blue-600 hover:text-blue-800 font-medium transition-colors"
228+
>
229+
Download
230+
</button>
231+
)}
232+
{onDelete && (
233+
<button
234+
onClick={(e) => {
235+
e.stopPropagation();
236+
onDelete();
237+
}}
238+
className="text-xs text-red-600 hover:text-red-800 font-medium transition-colors"
239+
>
240+
Delete
241+
</button>
242+
)}
243+
</div>
252244
</div>
253245
</div>
254246
);

0 commit comments

Comments
 (0)