react-visual-feedback 1.1.0 → 1.2.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Murali
+Copyright (c) 2025 Murali Vvrsn Gurajapu
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

package/README.md

@@ -1,36 +1,48 @@
-# Murali Feedback Widget React
+# React Visual Feedback
 
-A powerful, visual feedback collection tool for React applications. Users can select any element on your page, and the widget automatically captures a screenshot and context information.
+A powerful, visual feedback collection tool for React applications with an integrated dashboard for managing user feedback. Users can select any element on your page, and the widget automatically captures a screenshot and context information.
 
 ## Features
 
+### Feedback Collection
 - 🎯 Visual element selection with hover highlighting
-- 📸 Automatic screenshot capture of selected elements
+- 📸 Automatic screenshot capture of selected elements with perfect CSS rendering
 - 📝 Feedback form with rich context
 - ⚡ Lightweight and performant
-- 🎨 Customizable styling
-- ⌨️ Keyboard shortcuts (Ctrl+Q to activate, Esc to cancel)
+- 🎨 Works with any CSS framework (Tailwind, Bootstrap, Material-UI, etc.)
+- ⌨️ Keyboard shortcuts (Ctrl+Q to activate, Esc to cancel, Ctrl+Enter to submit)
+- 🌓 Dark mode support
+
+### Feedback Dashboard (New!)
+- 📊 **Professional dashboard** with localStorage or custom data source
+- 👨‍💻 **Developer mode** with full technical details
+- 👤 **User mode** for simplified feedback view
+- 🏷️ **Status management** with 7 professional status options
+- ✅ **Custom dropdown** with smooth animations
+- 🔒 **Permission system** - Users can only view, developers can manage
+- 🔄 **Status change callbacks** for database synchronization
+- ⌨️ Dashboard keyboard shortcut (Ctrl+Shift+Q)
 
 ## Installation
 
 ```bash
-npm install murali-feedback-widget-react
+npm install react-visual-feedback
 ```
 
 **Important:** Import the CSS file in your application:
 
 ```jsx
-import 'murali-feedback-widget-react/dist/index.css';
+import 'react-visual-feedback/dist/index.css';
 ```
 
 ## Quick Start
 
-### 1. Wrap your app with FeedbackProvider
+### Basic Usage (Feedback Only)
 
 ```jsx
 import React from 'react';
-import { FeedbackProvider } from 'murali-feedback-widget-react';
-import 'murali-feedback-widget-react/dist/index.css';
+import { FeedbackProvider } from 'react-visual-feedback';
+import 'react-visual-feedback/dist/index.css';
 
 function App() {
   const handleFeedbackSubmit = async (feedbackData) => {
@@ -53,269 +65,399 @@ function App() {
 export default App;
 ```
 
-### 2. Add a feedback trigger button (optional)
+### With Dashboard (Full Feature Set)
 
 ```jsx
-import { useFeedback } from 'murali-feedback-widget-react';
+import React from 'react';
+import { FeedbackProvider, useFeedback } from 'react-visual-feedback';
+import 'react-visual-feedback/dist/index.css';
 
-function FeedbackButton() {
-  const { setIsActive } = useFeedback();
+function FeedbackButtons() {
+  const { isActive, setIsActive, setIsDashboardOpen } = useFeedback();
 
   return (
-    <button onClick={() => setIsActive(true)}>
-      Report Issue
-    </button>
+    <div style={{ position: 'fixed', bottom: 20, right: 20, display: 'flex', gap: 10 }}>
+      <button onClick={() => setIsDashboardOpen(true)}>
+        📊 Dashboard
+      </button>
+      <button onClick={() => setIsActive(!isActive)}>
+        {isActive ? '✕ Cancel' : '💬 Report Issue'}
+      </button>
+    </div>
   );
 }
-```
 
-## Usage
-
-### Keyboard Shortcut
-Press **Ctrl+Q** to activate the feedback widget. Press **Esc** to deactivate.
-
-### Programmatic Activation (Uncontrolled Mode)
-Use the `useFeedback` hook to control the widget programmatically:
-
-```jsx
-import { useFeedback } from 'murali-feedback-widget-react';
+function App() {
+  const handleFeedbackSubmit = async (feedbackData) => {
+    console.log('Feedback received:', feedbackData);
+    await fetch('/api/feedback', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(feedbackData)
+    });
+  };
 
-function MyComponent() {
-  const { isActive, setIsActive } = useFeedback();
+  const handleStatusChange = async ({ id, status }) => {
+    console.log('Status changed:', { id, status });
+    // Update your database
+    await fetch(`/api/feedback/${id}/status`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ status })
+    });
+  };
 
   return (
-    <button onClick={() => setIsActive(!isActive)}>
-      {isActive ? 'Cancel Feedback' : 'Give Feedback'}
-    </button>
+    <FeedbackProvider
+      onSubmit={handleFeedbackSubmit}
+      onStatusChange={handleStatusChange}
+      dashboard={true}
+      isDeveloper={true}  // Set to false for user mode
+      userName="John Doe"
+      userEmail="john@example.com"
+    >
+      <YourApp />
+      <FeedbackButtons />
+    </FeedbackProvider>
   );
 }
+
+export default App;
 ```
 
-### Controlled Mode
-You can control the widget's active state from the parent component:
+## Dashboard Features
 
-```jsx
-import React, { useState } from 'react';
-import { FeedbackProvider } from 'murali-feedback-widget-react';
+### Status Options
 
-function App() {
-  const [isFeedbackActive, setIsFeedbackActive] = useState(false);
+The dashboard includes 7 professional status options:
 
-  const handleFeedbackSubmit = async (feedbackData) => {
-    console.log('Feedback:', feedbackData);
-    // Submit to your backend
-  };
+| Status | Color | Description |
+|--------|-------|-------------|
+| **Reported** 🔴 | Red | Initial feedback submission |
+| **Opened** 🟠 | Amber | Acknowledged and under review |
+| **Doing it** 🔵 | Blue | Actively being worked on |
+| **Resolved** 🟢 | Green | Fixed and ready |
+| **Released** 🟣 | Purple | Deployed to production |
+| **Blocked** 🔴 | Red | Waiting on dependencies |
+| **Won't do** ⚪ | Gray | Not planned for implementation |
 
-  return (
-    <div>
-      <button onClick={() => setIsFeedbackActive(!isFeedbackActive)}>
-        {isFeedbackActive ? 'Cancel' : 'Report Bug'}
-      </button>
+### Developer vs User Mode
 
-      <FeedbackProvider
-        onSubmit={handleFeedbackSubmit}
-        isActive={isFeedbackActive}
-        onActiveChange={setIsFeedbackActive}
-      >
-        <YourApp />
-      </FeedbackProvider>
-    </div>
-  );
-}
+#### Developer Mode (`isDeveloper={true}`)
+- ✅ View all technical details (element info, CSS, viewport, user agent)
+- ✅ Change feedback status
+- ✅ Delete feedback items
+- ✅ Full control over feedback management
+
+#### User Mode (`isDeveloper={false}`)
+- ✅ View feedback submissions
+- ✅ See current status (read-only)
+- ❌ Cannot change status
+- ❌ Cannot delete items
+- Perfect for product managers and stakeholders
+
+### Data Persistence
+
+The dashboard supports two modes:
+
+1. **localStorage** (default) - Automatic persistence in browser
+2. **Custom data source** - Pass your own data via `dashboardData` prop
+
+```jsx
+// Using localStorage (automatic)
+<FeedbackProvider dashboard={true}>
+
+// Using custom data source
+<FeedbackProvider
+  dashboard={true}
+  dashboardData={yourFeedbackArray}
+>
 ```
 
 ## API Reference
 
-### FeedbackProvider
+### FeedbackProvider Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `onSubmit` | `(feedbackData) => Promise<void>` | Yes | - | Callback when feedback is submitted |
+| `onStatusChange` | `({ id, status }) => void` | No | - | Callback when status changes |
+| `children` | `ReactNode` | Yes | - | Your app components |
+| `dashboard` | `boolean` | No | `false` | Enable dashboard feature |
+| `dashboardData` | `Array` | No | `undefined` | Custom feedback data (uses localStorage if undefined) |
+| `isDeveloper` | `boolean` | No | `false` | Enable developer mode with full permissions |
+| `isUser` | `boolean` | No | `true` | Enable user mode (read-only) |
+| `userName` | `string` | No | `'Anonymous'` | User name for feedback submissions |
+| `userEmail` | `string` | No | `null` | User email for feedback submissions |
+| `isActive` | `boolean` | No | `undefined` | Control widget active state (controlled mode) |
+| `onActiveChange` | `(active: boolean) => void` | No | - | Callback when active state changes |
 
-The main provider component that wraps your application.
+### useFeedback Hook
+
+```jsx
+const { isActive, setIsActive, setIsDashboardOpen } = useFeedback();
+```
+
+**Returns:**
+- `isActive`: `boolean` - Whether feedback mode is active
+- `setIsActive`: `(active: boolean) => void` - Activate/deactivate feedback mode
+- `setIsDashboardOpen`: `(open: boolean) => void` - Open/close dashboard
 
-**Props:**
-- `onSubmit` (required): `(feedbackData) => Promise<void>` - Callback function when feedback is submitted
-- `children`: React nodes
-- `isActive` (optional): `boolean` - Control the widget active state from parent (controlled mode)
-- `onActiveChange` (optional): `(active: boolean) => void` - Callback when active state changes (used with controlled mode)
+### Feedback Data Structure
 
-**Feedback Data Structure:**
-```javascript
+```typescript
 {
-  feedback: "User's feedback text",
+  id: string,
+  feedback: string,
+  userName: string,
+  userEmail: string | null,
+  status: 'reported' | 'opened' | 'doingIt' | 'resolved' | 'released' | 'blocked' | 'wontDo',
+  timestamp: string, // ISO 8601 format
+  url: string,
   elementInfo: {
-    tagName: "div",
-    id: "element-id",
-    className: "element-classes",
-    xpath: "//div[@id='element-id']",
-    innerText: "Element text content",
-    attributes: { /* element attributes */ }
+    tagName: string,
+    id: string,
+    className: string,
+    selector: string,
+    text: string,
+    position: {
+      x: number,
+      y: number,
+      width: number,
+      height: number
+    },
+    styles: {
+      backgroundColor: string,
+      color: string,
+      fontSize: string,
+      fontFamily: string
+    }
+  },
+  screenshot: string, // Base64 encoded PNG
+  viewport: {
+    width: number,
+    height: number
   },
-  screenshot: "data:image/png;base64,...", // Base64 encoded screenshot
-  url: "https://yourapp.com/current-page",
-  userAgent: "Mozilla/5.0...",
-  timestamp: "2025-10-22T10:30:00.000Z"
+  userAgent: string
 }
 ```
 
-### useFeedback
+## Keyboard Shortcuts
 
-Hook to access feedback widget state and controls.
+| Shortcut | Action |
+|----------|--------|
+| `Ctrl+Q` | Activate feedback mode |
+| `Ctrl+Shift+Q` | Open dashboard (when dashboard is enabled) |
+| `Esc` | Cancel/close feedback mode or dashboard |
+| `Ctrl+Enter` | Submit feedback (when form is open) |
 
-**Returns:**
-- `isActive`: boolean - Whether the widget is currently active
-- `setIsActive`: (active: boolean) => void - Function to activate/deactivate the widget
+## Usage Examples
 
-## Styling
+### Example 1: Basic Feedback Collection
 
-The widget comes with default styles, but you can customize them by targeting these CSS classes:
+```jsx
+import { FeedbackProvider, useFeedback } from 'react-visual-feedback';
+import 'react-visual-feedback/dist/index.css';
 
-```css
-.feedback-overlay { /* Background overlay when active */ }
-.feedback-highlight { /* Element highlight border */ }
-.feedback-tooltip { /* Element info tooltip */ }
-.feedback-modal { /* Feedback form modal */ }
-.feedback-backdrop { /* Modal backdrop */ }
+function FeedbackButton() {
+  const { setIsActive } = useFeedback();
+  return <button onClick={() => setIsActive(true)}>Report Issue</button>;
+}
+
+function App() {
+  return (
+    <FeedbackProvider onSubmit={async (data) => {
+      await fetch('/api/feedback', {
+        method: 'POST',
+        body: JSON.stringify(data)
+      });
+    }}>
+      <YourApp />
+      <FeedbackButton />
+    </FeedbackProvider>
+  );
+}
 ```
 
-## Example Implementation
+### Example 2: Full Dashboard with Status Management
 
 ```jsx
-import React from 'react';
-import { FeedbackProvider, useFeedback } from 'murali-feedback-widget-react';
+function App() {
+  const [isDeveloper, setIsDeveloper] = useState(true);
 
-function FeedbackButton() {
-  const { isActive, setIsActive } = useFeedback();
+  const handleStatusChange = async ({ id, status }) => {
+    // Update database
+    await fetch(`/api/feedback/${id}`, {
+      method: 'PATCH',
+      body: JSON.stringify({ status })
+    });
+  };
 
   return (
-    <button
-      onClick={() => setIsActive(true)}
-      style={{
-        position: 'fixed',
-        bottom: '20px',
-        right: '20px',
-        padding: '10px 20px',
-        background: '#007bff',
-        color: 'white',
-        border: 'none',
-        borderRadius: '5px',
-        cursor: 'pointer'
-      }}
+    <FeedbackProvider
+      dashboard={true}
+      isDeveloper={isDeveloper}
+      onSubmit={handleFeedbackSubmit}
+      onStatusChange={handleStatusChange}
+      userName="Jane Smith"
+      userEmail="jane@company.com"
     >
-      {isActive ? 'Select Element...' : 'Report Bug'}
-    </button>
+      <YourApp />
+    </FeedbackProvider>
   );
 }
+```
+
+### Example 3: Custom Data Source
 
+```jsx
 function App() {
-  const handleFeedbackSubmit = async (feedbackData) => {
-    try {
-      const response = await fetch('https://your-api.com/feedback', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(feedbackData)
-      });
+  const [feedbackData, setFeedbackData] = useState([]);
 
-      if (response.ok) {
-        alert('Thank you for your feedback!');
-      }
-    } catch (error) {
-      console.error('Failed to submit feedback:', error);
-      alert('Failed to submit feedback. Please try again.');
-    }
-  };
+  useEffect(() => {
+    // Load feedback from your API
+    fetch('/api/feedback')
+      .then(res => res.json())
+      .then(setFeedbackData);
+  }, []);
 
   return (
-    <FeedbackProvider onSubmit={handleFeedbackSubmit}>
-      <div>
-        <h1>My Application</h1>
-        <p>Press Ctrl+Q or click the button to report issues</p>
-        <FeedbackButton />
-      </div>
+    <FeedbackProvider
+      dashboard={true}
+      dashboardData={feedbackData}
+      isDeveloper={true}
+      onStatusChange={async ({ id, status }) => {
+        // Update API
+        await fetch(`/api/feedback/${id}`, {
+          method: 'PATCH',
+          body: JSON.stringify({ status })
+        });
+        // Reload data
+        const updated = await fetch('/api/feedback').then(r => r.json());
+        setFeedbackData(updated);
+      }}
+    >
+      <YourApp />
     </FeedbackProvider>
   );
 }
+```
 
-export default App;
+## Styling
+
+The widget comes with default styles, but you can customize them:
+
+```css
+/* Feedback Collection */
+.feedback-overlay { /* Background overlay */ }
+.feedback-highlight { /* Element highlight */ }
+.feedback-tooltip { /* Element info tooltip */ }
+.feedback-modal { /* Feedback form modal */ }
+.feedback-backdrop { /* Modal backdrop */ }
+
+/* Dashboard */
+.feedback-dashboard { /* Dashboard container */ }
+.feedback-dashboard-backdrop { /* Dashboard backdrop */ }
 ```
 
 ## How It Works
 
+### Feedback Collection Flow
+
 1. User activates the widget (Ctrl+Q or button click)
 2. User hovers over elements to see them highlighted
 3. User clicks on the problematic element
-4. Widget captures a screenshot of the selected element
-5. Feedback form appears with element context pre-filled
-6. User enters their feedback and submits
-7. Your `onSubmit` handler receives all the data
+4. Widget captures a pixel-perfect screenshot
+5. Feedback form appears with context pre-filled
+6. User enters feedback and submits
+7. Your `onSubmit` handler receives all data
+
+### Dashboard Flow
+
+1. User opens dashboard (Ctrl+Shift+Q or programmatically)
+2. Dashboard displays all feedback submissions
+3. Developer can change status via dropdown
+4. Status change triggers `onStatusChange` callback
+5. Your backend updates the database
+6. Dashboard reflects the new status
 
 ## Browser Support
 
-- Chrome/Edge: ✅
-- Firefox: ✅
-- Safari: ✅
-- Opera: ✅
+- ✅ Chrome/Edge
+- ✅ Firefox
+- ✅ Safari
+- ✅ Opera
+
+## Screenshot Capture
 
-Requires `html2canvas` for screenshot functionality.
+Uses `html-to-image` with `html2canvas` fallback for:
+- ✅ Perfect CSS rendering
+- ✅ Tailwind, Bootstrap, Material-UI support
+- ✅ Gradients, shadows, modern CSS
+- ✅ High-resolution (2x pixel ratio)
 
 ## Dependencies
 
 - React ^16.8.0 || ^17.0.0 || ^18.0.0
 - react-dom ^16.8.0 || ^17.0.0 || ^18.0.0
+- html-to-image ^1.11.13
 - html2canvas ^1.4.1
 - lucide-react ^0.263.1
 
-## Local Development & Testing
-
-Want to test the widget locally? We've included a complete example app!
-
-### Quick Start
+## Local Development
 
 ```bash
-# 1. Clone the repository
+# Clone repository
 git clone https://github.com/Murali1889/react-feedback-widget.git
 cd react-feedback-widget
 
-# 2. Install dependencies
+# Install dependencies
 npm install
 
-# 3. Build the widget
+# Build the widget
 npm run build
 
-# 4. Run the example app
+# Run example app
 cd example
 npm install
 npm run dev
 ```
 
-The example app will open at `http://localhost:3000` with a fully working demo!
-
-### What's Included
+Visit `http://localhost:8080` to see the demo!
 
-- ✅ Complete working example with UI
-- ✅ Both controlled and uncontrolled mode examples
-- ✅ Interactive test elements (buttons, forms, images)
-- ✅ Console logging to see feedback data
-- ✅ Hot reload for fast development
+## What's New in v1.2.0
 
-### Making Changes
+### Dashboard Feature
+- 📊 Complete feedback management dashboard
+- 👨‍💻 Developer/User mode with permission system
+- 🏷️ 7 professional status options with custom dropdown
+- 🔄 Status change callbacks for database sync
+- 💾 localStorage or custom data source support
+- 📅 Improved timestamp formatting (e.g., "21 Oct 2025 at 9:35 PM")
 
-1. Edit source files in `src/`
-2. Run `npm run build` in the root directory
-3. Refresh the example app browser - changes will be reflected!
-
-See `example/README.md` for more details.
+### UI Improvements
+- ✨ Smooth animations for status dropdown
+- 🎨 Professional minimal design
+- 🔒 Read-only status for users
+- 🗑️ Conditional delete permissions
 
 ## License
 
-MIT © Murali
+MIT © 2025 Murali Vvrsn Gurajapu
 
 ## Contributing
 
-Contributions are welcome! Please feel free to submit a Pull Request.
+Contributions welcome! Please submit a Pull Request.
 
 ## Issues
 
-If you encounter any issues, please report them at:
-https://github.com/Murali1889/react-feedback-widget/issues
+Report issues at: https://github.com/Murali1889/react-feedback-widget/issues
 
 ## Author
 
-Murali
+**Murali**
+Email: murali.g@hyperverge.co
+
+---
+
+Made with ❤️ for better user feedback collection