Daily Activity Dashboard

A modern, responsive daily-use dashboard web application built with vanilla HTML, CSS, and JavaScript. Features a 3×3 grid layout with 9 customizable cards for managing tasks, ideas, reminders, and more, plus a powerful PeerJS P2P File Sharing feature.

Features

Core Functionality

• 9 Category Cards: To Do, Running Tasks, Ideas, Completed Tasks, Timer, Reminder, Exam Schedule, Problem List, and New Things to Learn
• File View Card: Dedicated card to view and manage received shared files
• Click to View: Click any category card to view all items in a detailed modal
• Persistent Storage: All data saved to IndexedDB for better performance and capacity
• Add Items: Click "Add Item" button in modal or use dedicated add.html page
• Task Management: Mark tasks as complete/incomplete, delete items
• Timer: Functional timer with start, pause, and reset controls
• Date Tracking: Optional date field with status badges (overdue, today, upcoming)
• Reminders: Displays upcoming items with dates
• Data Management: Export, import, and clear all data with one click

PeerJS P2P File Sharing

• Simple 3-Step Process: Enter room code → Select file → Send
• Peer-to-Peer Transfer: Direct file sharing between devices without uploading to any server
• Host/Client Pattern: First device becomes host, second auto-connects as client
• 4-Digit Room Codes: Easy-to-share room codes for quick pairing (e.g., 1234)
• No File Size Limits: Share files of any size (limited only by available memory)
• Connection Persistence: Connection stays alive between multiple file transfers
• Progress Tracking: Real-time progress bars for sending and receiving
• Secure: Files transfer directly between devices via encrypted WebRTC connection
• Local Storage: Received files stored in IndexedDB for offline access
• Cross-Platform: Share files from mobile to browser, computer to computer, or any combination

Enhanced Storage

• IndexedDB: All data stored in IndexedDB for better performance
• Larger Capacity: Can store much more data than localStorage
• Binary Files: Store received files with full metadata
• 4 Data Stores: Items, Timer, Settings, Files
• Export/Import: Backup and restore all data (v2.0 format includes files)
• Clear Data: Complete data wipe with double confirmation

Getting Started

Installation

1. Download the files to your local machine:

   daily-use-dashboard/
   ├── index.html
   ├── add.html
   ├── style.css
   ├── app.js
   └── README.md
   

2. Open in Browser:

   • Simply double-click index.html to open in your default browser
   • Or right-click → Open With → Choose your browser
   • Create a shortcut of index.html on the desktop and always open with same browser as the data is stored in browser's IndexedDB

3. Start Using:

   • Dashboard opens automatically
   • Hover over ⚙️ icon (top-left) to access Export/Import/Clear data
   • Click any card (except Timer) to view all items in that category
   • Click "➕ Add Item" in the modal to add new items
   • Use the dark mode toggle (🌙) in the top-right corner
   • Click the file share button (📁) in the bottom-right to transfer files!

How to Use File Sharing

Simple 3-Step Process:

Device 1 (Host - creates room):

1. Click 📁 File Share button (bottom-right floating button)
2. Enter a 4-digit room code (e.g., 1234)
3. Wait for Device 2 to connect

Device 2 (Client - joins room):

1. Click 📁 File Share button
2. Enter the same 4-digit room code as Device 1
3. Automatically connects to Device 1

Sending Files (Either Device):

1. Once connected, click 📤 Select File
2. Choose the file to send
3. File transfers automatically with progress bar
4. Connection stays alive for multiple file transfers

Features:

• First device = Host: Creates the room and waits
• Second device = Client: Auto-connects to the host
• No Codes to Copy: Just share the 4-digit room number
• Persistent Connection: Send multiple files without reconnecting
• Works Across Networks: Uses STUN servers for NAT traversal
• Progress Tracking: See real-time progress of transfers
• File Management: View, download, or delete received files in Files card

Tips:

• Both devices must be online during the transfer
• Works across different networks (uses STUN servers)
• No file size limits - transfer large files directly
• Files are NOT uploaded to any server - completely P2P
• Received files stored locally in IndexedDB
• Connection persists until you close the overlay or reload page

Data Management

Export Data

• Hover over ⚙️ icon → Click 📥 Export
• Downloads JSON file with all data (items, timer, settings, files)
• Format: dashboard-backup-YYYY-MM-DD.json
• Version 2.0 format includes shared files

Import Data

• Hover over ⚙️ icon → Click 📤 Import
• Select previously exported JSON file
• Replaces all current data with imported data
• Supports both v1.0 (old) and v2.0 (new) formats

Clear Data

• Hover over ⚙️ icon → Click 🗑️ Clear
• Double confirmation required
• Permanently deletes all data (items, timer, settings, files)
• Cannot be undone - use Export first to backup!

File Structure

daily-use-dashboard/
│
├── index.html          # Main dashboard page (3×3 grid + file share)
├── add.html            # Add item form page
├── style.css           # All styling (light/dark mode, responsive design)
├── app.js              # Application logic (IndexedDB, PeerJS, data management)
└── README.md           # This file

JavaScript Architecture

The app uses modular components:

DBManager
├── init()              # Initialize IndexedDB
├── getAll()            # Get all items from store
├── get()               # Get single item
├── put()               # Add/update item
├── delete()            # Delete item
└── clear()             # Clear entire store

FileShareManager
├── connect()           # Connect as host or client
├── sendFile()          # Send file with progress
├── saveReceivedFile()  # Save to IndexedDB
└── close()             # Close connection

DashboardApp
├── loadItems()         # Load items from IndexedDB
├── exportData()        # Export all data to JSON
├── importData()        # Import data from JSON
├── clearAllData()      # Clear all data with confirmation
├── Timer Management    # Start, pause, reset timer
└── UI Management       # Dark mode, modals, notifications

Data Storage

All data is stored in browser's IndexedDB with 4 object stores:

Items Store

{
  id: "1234567890",
  category: "todo",
  title: "Complete project",
  description: "Finish the dashboard app",
  date: "2026-01-25",
  completed: false,
  createdAt: "2026-01-22T10:30:00.000Z"
}

Timer Store

{
  id: "state",
  seconds: 3600,
  running: false
}

Settings Store

{
  key: "darkMode",
  enabled: true
}

Files Store

{
  id: 1,
  name: "document.pdf",
  size: 1048576,
  type: "application/pdf",
  data: ArrayBuffer,
  timestamp: 1706112000000
}

Technologies Used

• HTML5: Semantic markup
• CSS3: Modern styling with CSS Grid, Flexbox, Custom Properties
• JavaScript ES6+: Async/await, Modules, Classes
• IndexedDB API: Client-side storage
• PeerJS v1.5.2: WebRTC abstraction for P2P connections
• WebRTC: Direct peer-to-peer data transfer

Features Highlight

• ✅ No Dependencies: Pure vanilla JavaScript (PeerJS via CDN)
• ✅ Responsive Design: Works on mobile, tablet, and desktop
• ✅ Dark Mode: System-aware with manual toggle
• ✅ Offline Capable: All data stored locally
• ✅ Fast & Lightweight: No build tools, no frameworks
• ✅ Privacy-Focused: No server, no tracking, no cloud storage

Browser Compatibility

• Chrome/Edge 89+
• Firefox 87+
• Safari 14+
• Opera 75+

Requires:

• IndexedDB support
• WebRTC support (for file sharing)
• JavaScript enabled

License

This project is free to use and modify. No attribution required.

Contributing

Feel free to fork, modify, and improve this project!

Support

For issues or questions, please check:

1. Browser console for JavaScript errors
2. IndexedDB support in your browser
3. JavaScript enabled
4. WebRTC support (for file sharing feature)

---

Built with ❤️ using vanilla HTML, CSS & JavaScript

No frameworks. No dependencies. Just pure web development.