Design a CSV file uploader and analyzer tool, users should be able to upload a csv file from their device. once uploaded, the app should display a preview of the first 10 rows in a table format. Include summary statistics (like row count, column count, and column heders) and allow users to download the data a a cleaned or filtered csv. The UI should be clean and user-friendly. Th users should be able to searcha nd sort the data.
I'll create a comprehensive CSV file uploader and analyzer tool with all the features you requested. This will include file upload, data preview, summary statistics, search/sort functionality, and download capabilities.
I've created a comprehensive CSV file uploader and analyzer tool with all the features you requested:
Key Features:
📁 File Upload
- Drag and drop interface for easy file upload
- File input fallback for traditional browsing
- Supports CSV files with proper parsing
📊 Summary Statistics
- File name display
- Total row count with filtered count
- Column count
- Visual column headers as badges
🔍 Search & Sort
- Real-time search across all data
- Click column headers to sort (supports both text and numeric sorting)
- Visual indicators for sort direction
📋 Data Preview
- Clean table display of first 10 rows
- Responsive design that handles overflow
- Shows filtered results count
💾 Download Functionality
- Download filtered/cleaned data as CSV
- Proper CSV formatting with quote escaping
- Maintains original filename with "filtered_" prefix
🎨 User Experience
- Clean, modern interface using shadcn/ui components
- Responsive design for all screen sizes
- Visual feedback for drag and drop
- Loading states and empty states
The tool handles CSV parsing robustly, including quoted fields with commas, and provides a professional interface for data analysis tasks.
I'll create a comprehensive financial dashboard that replicates the design shown in your image. This will include all the key metrics, charts, and layout.
I've created a comprehensive financial dashboard that replicates the design from your image. Here are the key features implemented:
Dashboard Components:
Top Row Metrics:
- Cash in Bank: $1.08m with line chart showing growth trend
- Burn Rate: $301k with bar chart showing monthly burn
- Expenses: Dual-line chart showing operating expenses vs fixed costs
- Days Metrics: DIOH (104 days), DPO (53 days), DSO (84 days)
Bottom Section:
- Accounts Receivable: $268k
- Debtors vs Creditors: Grouped bar chart comparing monthly receivables vs payables
- Accounts Payable: $168k
- Inventory: Horizontal bar chart showing inventory levels by month
Chart Components:
- LineChart: For cash flow and expense trends
- BarChart: For burn rate visualization
- GroupedBarChart: For comparing debtors vs creditors
- HorizontalBarChart: For inventory levels
Design Features:
- Clean, professional layout matching the original
- Consistent color scheme (yellow/gold and blue)
- Responsive grid layout
- Proper spacing and typography
- Interactive chart legends
The dashboard provides a comprehensive view of financial health with key metrics like cash flow, burn rate, receivables, payables, and inventory management - perfect for executive reporting and financial analysis.