[V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", 50: "#f0f9ff", 100: "#e0f2fe", 200: "#bae6fd", 300: "#7dd3fc", 400: "#38bdf8", 500: "#0ea5e9", 600: "#0284c7", 700: "#0369a1", 800: "#075985", 900: "#0c4a6e", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, // Extended color palette purple: { 50: "#faf5ff", 100: "#f3e8ff", 200: "#e9d5ff", 300: "#d8b4fe", 400: "#c084fc", 500: "#a855f7", 600: "#9333ea", 700: "#7e22ce", 800: "#6b21a8", 900: "#581c87", }, emerald: { 50: "#ecfdf5", 100: "#d1fae5", 200: "#a7f3d0", 300: "#6ee7b7", 400: "#34d399", 500: "#10b981", 600: "#059669", 700: "#047857", 800: "#065f46", 900: "#064e3b", }, amber: { 50: "#fffbeb", 100: "#fef3c7", 200: "#fde68a", 300: "#fcd34d", 400: "#fbbf24", 500: "#f59e0b", 600: "#d97706", 700: "#b45309", 800: "#92400e", 900: "#78350f", }, pink: { 50: "#fdf2f8", 100: "#fce7f3", 200: "#fbcfe8", 300: "#f9a8d4", 400: "#f472b6", 500: "#ec4899", 600: "#db2777", 700: "#be185d", 800: "#9d174d", 900: "#831843", }, teal: { 50: "#f0fdfa", 100: "#ccfbf1", 200: "#99f6e4", 300: "#5eead4", 400: "#2dd4bf", 500: "#14b8a6", 600: "#0d9488", 700: "#0f766e", 800: "#115e59", 900: "#134e4a", }, orange: { 50: "#fff7ed", 100: "#ffedd5", 200: "#fed7aa", 300: "#fdba74", 400: "#fb923c", 500: "#f97316", 600: "#ea580c", 700: "#c2410c", 800: "#9a3412", 900: "#7c2d12", }, red: { 50: "#fef2f2", 100: "#fee2e2", 200: "#fecaca", 300: "#fca5a5", 400: "#f87171", 500: "#ef4444", 600: "#dc2626", 700: "#b91c1c", 800: "#991b1b", 900: "#7f1d1d", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, reverse: { "0%": { transform: "rotate(0deg)" }, "100%": { transform: "rotate(-360deg)" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", reverse: "reverse 3s linear infinite", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="types/excel.ts" isEdit="true" export interface ExcelData { [key: string]: any } export interface WorksheetData { name: string headers: string[] data: ExcelData[] nonEmptyRows: ExcelData[] } export interface FileUploadProps { onFileUpload: (worksheets: WorksheetData[], fileName: string) => void onError: (error: string) => void onLoading: (loading: boolean) => void } export interface WorksheetCardProps { worksheet: WorksheetData index: number } export interface SummaryStatsProps { worksheets: WorksheetData[] } export interface FileInfoProps { fileName: string totalSheets: number totalRows: number onClear: () => void } [V0_FILE]typescriptreact:file="hooks/useExcelProcessor.ts" isEdit="true" "use client" import { useState } from "react" import * as XLSX from "xlsx" import type { ExcelData, WorksheetData } from "../types/excel" export function useExcelProcessor() { const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState("") const isRowEmpty = (row: ExcelData): boolean => { return Object.values(row).every((value) => value === "" || value === null || value === undefined) } const validateFile = (file: File): boolean => { const validTypes = [ "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", // .xlsx "application/vnd.ms-excel", // .xls "text/csv", // .csv ] return validTypes.includes(file.type) || file.name.match(/\.(xlsx|xls|csv)$/i) !== null } const processExcelFile = async (file: File): Promise => { if (!validateFile(file)) { throw new Error("Please select a valid Excel file (.xlsx, .xls) or CSV file") } setIsLoading(true) setError("") try { const data = await file.arrayBuffer() const workbook = XLSX.read(data, { type: "array" }) const worksheetsData: WorksheetData[] = [] workbook.SheetNames.forEach((sheetName) => { try { const worksheet = workbook.Sheets[sheetName] const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }) as any[][] if (jsonData.length > 0) { const headerRow = jsonData[0] as string[] const dataRows = jsonData.slice(1).map((row: any[]) => { const obj: ExcelData = {} headerRow.forEach((header, index) => { obj[header] = row[index] || "" }) return obj }) const nonEmptyRows = dataRows.filter((row) => !isRowEmpty(row)) worksheetsData.push({ name: sheetName, headers: headerRow, data: dataRows, nonEmptyRows: nonEmptyRows, }) } } catch (err) { console.error(`Error processing worksheet ${sheetName}:`, err) } }) return worksheetsData } catch (err) { throw new Error("Error reading the Excel file. Please make sure it's a valid file.") } finally { setIsLoading(false) } } return { processExcelFile, isLoading, error, setError, } } [V0_FILE]typescriptreact:file="utils/excelTemplates.ts" isEdit="true" import * as XLSX from "xlsx" export const downloadSampleTemplate = () => { try { // Create a new workbook const wb = XLSX.utils.book_new() // Sheet 1: Users const usersData = [ ["Name", "Email", "Age", "Department"], ["John Doe", "john@example.com", 30, "Engineering"], ["Jane Smith", "jane@example.com", 25, "Marketing"], ["Bob Johnson", "bob@example.com", 35, "Sales"], ] const usersSheet = XLSX.utils.aoa_to_sheet(usersData) XLSX.utils.book_append_sheet(wb, usersSheet, "Users") // Sheet 2: Products const productsData = [ ["Product", "Price", "Category", "Stock"], ["Laptop", 999.99, "Electronics", 50], ["Mouse", 29.99, "Electronics", 200], ["Desk", 299.99, "Furniture", 15], ] const productsSheet = XLSX.utils.aoa_to_sheet(productsData) XLSX.utils.book_append_sheet(wb, productsSheet, "Products") // Generate buffer and create blob for download const wbout = XLSX.write(wb, { bookType: "xlsx", type: "array" }) const blob = new Blob([wbout], { type: "application/octet-stream" }) // Create download link const url = URL.createObjectURL(blob) const link = document.createElement("a") link.href = url link.download = "excel_template_multi_sheet.xlsx" // Trigger download document.body.appendChild(link) link.click() // Cleanup document.body.removeChild(link) URL.revokeObjectURL(url) } catch (error) { console.error("Error creating template:", error) // Fallback: create a simple CSV template const csvContent = "Name,Email,Age,Department\nJohn Doe,john@example.com,30,Engineering\nJane Smith,jane@example.com,25,Marketing" const blob = new Blob([csvContent], { type: "text/csv" }) const url = URL.createObjectURL(blob) const link = document.createElement("a") link.href = url link.download = "sample_template.csv" document.body.appendChild(link) link.click() document.body.removeChild(link) URL.revokeObjectURL(url) } } [V0_FILE]typescriptreact:file="components/file-upload.tsx" isEdit="true" "use client" import type React from "react" import { useRef } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Upload } from "lucide-react" import { useExcelProcessor } from "../hooks/useExcelProcessor" import { downloadSampleTemplate } from "../utils/excelTemplates" import type { FileUploadProps } from "../types/excel" export function FileUpload({ onFileUpload, onError, onLoading }: FileUploadProps) { const fileInputRef = useRef(null) const { processExcelFile, isLoading, error, setError } = useExcelProcessor() const handleFileChange = async (event: React.ChangeEvent) => { const file = event.target.files?.[0] if (!file) return try { onLoading(true) onError("") const worksheets = await processExcelFile(file) onFileUpload(worksheets, file.name) } catch (err) { const errorMessage = err instanceof Error ? err.message : "An error occurred" onError(errorMessage) setError(errorMessage) } finally { onLoading(false) } } const handleDownloadTemplate = () => { try { downloadSampleTemplate() } catch (error) { onError("Failed to download template. Please try again.") } } return (

Select Excel File

) } [V0_FILE]typescriptreact:file="components/file-info.tsx" isEdit="true" "use client" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { FileSpreadsheet, X } from "lucide-react" import type { FileInfoProps } from "../types/excel" export function FileInfo({ fileName, totalSheets, totalRows, onClear }: FileInfoProps) { return (

{fileName}

{totalSheets} worksheet{totalSheets !== 1 ? "s" : ""} • {totalRows} data rows

{totalSheets} sheets {totalRows} rows

) } [V0_FILE]typescriptreact:file="components/loading-spinner.tsx" isEdit="true" export function LoadingSpinner() { return (

Processing Excel file...

) } [V0_FILE]typescriptreact:file="components/worksheet-table.tsx" isEdit="true" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Database } from "lucide-react" import type { WorksheetData } from "../types/excel" interface WorksheetTableProps { worksheet: WorksheetData } export function WorksheetTable({ worksheet }: WorksheetTableProps) { if (worksheet.nonEmptyRows.length === 0) { return (

No data found in this worksheet

) } return ( <>

# {worksheet.headers.map((header, headerIndex) => ( {header || `Column ${headerIndex + 1}`} ))} {worksheet.nonEmptyRows.slice(0, 50).map((row, rowIndex) => ( {rowIndex + 1} {worksheet.headers.map((header, colIndex) => ( {String(row[header] || "")} ))} ))}

{worksheet.nonEmptyRows.length > 50 && (

Showing first 50 rows of {worksheet.nonEmptyRows.length} total data rows

)} ) } [V0_FILE]typescriptreact:file="components/worksheet-card.tsx" isEdit="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { TableIcon, Database } from "lucide-react" import { WorksheetTable } from "./worksheet-table" import type { WorksheetCardProps } from "../types/excel" export function WorksheetCard({ worksheet, index }: WorksheetCardProps) { return (

{worksheet.name}

{worksheet.nonEmptyRows.length} rows {worksheet.headers.length} columns

Data from worksheet "{worksheet.name}" • Filtered {worksheet.data.length - worksheet.nonEmptyRows.length}{" "} empty rows ) } [V0_FILE]typescriptreact:file="components/summary-stats.tsx" isEdit="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import type { SummaryStatsProps } from "../types/excel" export function SummaryStats({ worksheets }: SummaryStatsProps) { const totalRows = worksheets.reduce((sum, ws) => sum + ws.nonEmptyRows.length, 0) const totalSheets = worksheets.length const totalColumns = worksheets.reduce((sum, ws) => sum + ws.headers.length, 0) const approximateSize = Math.round((totalRows * totalColumns * 8) / 1024) return ( Summary Statistics

{totalSheets}

Worksheets

{totalRows}

Data Rows

{totalColumns}

Total Columns

{approximateSize}

KB (approx)

) } [V0_FILE]typescriptreact:file="components/worksheets-display.tsx" isEdit="true" import { WorksheetCard } from "./worksheet-card" import type { WorksheetData } from "../types/excel" interface WorksheetsDisplayProps { worksheets: WorksheetData[] } export function WorksheetsDisplay({ worksheets }: WorksheetsDisplayProps) { if (worksheets.length === 0) return null return (

All Worksheets Data

Showing only rows with data • Empty rows are filtered out

{worksheets.map((worksheet, index) => ( ))}

) } [V0_FILE]typescriptreact:file="excel-upload.tsx" isEdit="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { FileSpreadsheet } from "lucide-react" import { FileUpload } from "./components/file-upload" import { FileInfo } from "./components/file-info" import { LoadingSpinner } from "./components/loading-spinner" import { WorksheetsDisplay } from "./components/worksheets-display" import { SummaryStats } from "./components/summary-stats" import type { WorksheetData } from "./types/excel" export default function ExcelUpload() { const [fileName, setFileName] = useState("") const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState("") const [allWorksheets, setAllWorksheets] = useState([]) const handleFileUpload = (worksheets: WorksheetData[], uploadedFileName: string) => { setAllWorksheets(worksheets) setFileName(uploadedFileName) } const handleError = (errorMessage: string) => { setError(errorMessage) } const handleLoading = (loading: boolean) => { setIsLoading(loading) } const handleClearData = () => { setAllWorksheets([]) setFileName("") setError("") } const totalRows = allWorksheets.reduce((sum, ws) => sum + ws.nonEmptyRows.length, 0) const totalSheets = allWorksheets.length return (

Excel Multi-Sheet Reader Upload an Excel file to view all worksheets with their data {error && ( {error} )} {fileName && ( )} {isLoading && } {allWorksheets.length > 0 && }

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import ExcelUpload from "../excel-upload" export default function Page() { return }