Remix

Make your own version of Excel Sheet Maker Pro

Get an exact, working copy in your account, then change anything with chat.

Original by Khan Baba

What would you change?

Start free with 40 credits. No card needed.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.

[Screenshot Upload] Build Full PWA Installable App "Excel Sheet Maker Pro - Company Dashboard" - EXACT UI LIKE MOCKUP.

TECH STACK: React + Tailwind CSS + shadcn/ui + Recharts + ExcelJS + xlsx + html2canvas + Lucide Icons + Framer Motion. No backend, all in browser.

=== CRITICAL: UI ORDER MUST BE EXACT LIKE THIS ===

1. TOP HEADER:
- Left: App Icon (use /icon.png from public folder) + App Name "Excel Sheet Maker Pro" in green #10b981
- Right: Search, Notifications, Profile
- Below header: PWA Install Banner (blue #1e293b) with text "Install Excel Sheet Maker Pro - Install as PWA for offline access" + Buttons [Install Now] [Dismiss] - Handle beforeinstallprompt event.
- Main Title: Big input field labeled "Company Name" - Placeholder "SK Traders Pvt Ltd" - Value stored in state companyName. This title displays everywhere: Dashboard header as "My Company Pvt Ltd" big bold 32px, in PDF header, in Excel file cell A1 merged bold 20pt.
- Style: Dark background #0f172a, input border teal #14b8a6, rounded-lg.

2. SECOND SECTION: Editable Data Table Form
- Heading: "Editable Data Table" + Button "+ Add Row" teal color top right
- Table with columns: Date | Product | Sales | Qty | Action (Delete)
- Default 3 rows: 2024-01-15 Widgets $1,250 etc. - All cells contentEditable or input fields.
- Add Row: Adds new empty row
- Add Column: User can add custom column
- As user types, update charts live instantly.
- Data stored in useState dataRows.

3. THIRD SECTION: Templates Selector
- Heading: "Templates"
- Show 4 cards in a row (grid-cols-4):
  Card 1: Dark Pro - Icon moon stars, selected border teal. BG #0f172a to #1e1b4b.
  Card 2: Light - Icon sun, white/gray BG.
  Card 3: SaaS - Icon cloud, purple BG #4c1d95
  Card 4: Corporate Blue - Icon building, blue BG
- Below them: Button "Gallery" - On click open file input image/*, user uploads own background image from gallery. Set as dashboard background image with dark overlay 60% + blur.
- Template state changes entire dashboard background color + chart colors.
- Dark Pro: Charts purple #8b5cf6, teal #14b8a6, blue #3b82f6. Light: indigo #6366f1, emerald #10b981, rose #f43f5e, amber #f59e0b. Corporate: blue #2563eb.

4. FOURTH SECTION: Analytics Dashboard (Vertical Stack like screenshots, single page)
- Wrap this whole section in div id="dashboard-capture" for image export.
- Heading: "Analytics Dashboard - Sales overview - January 2024"
- KPI Row (3 cards): 
  Card: Total Sales $128,430 +12.4% vs last month (icon trending up blue)
  Card: Orders 1,248 +8.2% (icon bag purple)
  Card: Avg Order Value $103 -2.1% (icon trending teal)
- Chart 1: Sales Bar Chart / Sales Trend Line - BarChart, data grouped by month Sum of Sales by Date. Rounded bars, gradient. Title "Sales Trend Line - 7-day rolling trend". Height 180px.
- Chart 2: Share by Product - Donut Pie Chart with 4 colors, 28%, 12% labels. Left side pie, right side line trend small. Title "Share by Product - Distribution across products".
- All charts Recharts, responsive, dark card background #1e293b, rounded-2xl, border gray-800.

5. FIFTH SECTION: Data Table (Final Filtered)
- Heading: "Data Table - Filtered results • 56 rows"
- Filters: Date range dropdown Last 7 days, Product: All, Region: All, Search bar "Search product, region..."
- Table columns: Date | Product | Region | Sales | Qty | Status | Action
- Pagination: Showing 1-5 of 56, Previous 1 2 3 4 Next
- Sticky header, zebra, hover highlight.

6. EXPORT SECTION - AT THE END - MUST HAVE 3 BUTTONS:
- Button 1: "Export Excel File with Charts (.xlsx)" - Logic: Use ExcelJS, create Workbook, Worksheet "Data" add companyName in A1 merged, then data table from state, then add chart images: Use html2canvas to capture each chart canvas to base64, then workbook.addImage and add to sheet "Dashboard". Download as CompanyName_Sales_Dashboard.xlsx
- Button 2: "Download Excel Sheet Image (PNG)" - Logic: Use html2canvas on div id="dashboard-capture" (whole analytics section), scale 2, backgroundColor from template, then toDataURL image/png, create link and download as CompanyName_Dashboard.png
- Button 3: "Download Dashboard PDF" - Use html2canvas + jsPDF to export same div as PDF.
- Also Button: "Download as Shareable Link" - Generate Blob URL for Excel.

7. PWA REQUIREMENTS - FULL INSTALLABLE:
- Create public/manifest.json with name "Excel Sheet Maker Pro", short_name "ExcelMaker", start_url "/", display standalone, background_color "#0f172a", theme_color "#6366f1", icons from /icon-192.png and /icon-512.png
- In public folder, user will upload icon.png. In App, on mount, create canvas to generate 192 and 512 sizes from /icon.png and save as blob URLs for manifest icons.
- Create public/service-worker.js caching all assets for offline.
- In index.html add link rel manifest, meta theme-color, apple-touch-icon using /icon.png
- Show install prompt logic.

DESIGN: Must look EXACTLY like provided mockups - Dark Pro theme #0f172a background, cards #1e293b, teal accents #14b8a6, rounded-xl, shadow-xl, clean SaaS like Linear. Mobile responsive with bottom nav Table | Sheets | Charts | Settings.

DATA LOGIC: Group data by month for Bar chart (Sum Sales by Date), by Product for Donut (Share by Product). Calculate totals live.

Make it premium, professional, one-page vertical flow: Company Name -> Editable Form -> Templates + Gallery -> 3 Charts Vertical -> Data Table -> Export Image + Excel File. App icon ye banao Jo MN ne image send ki ha khud se generate na karna please

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.