{"_id":"@asnadaf/mydashboard","name":"@asnadaf/mydashboard","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@asnadaf/mydashboard","version":"0.1.0","private":false,"dependencies":{"@reduxjs/toolkit":"^2.10.1","@testing-library/dom":"^10.4.1","@testing-library/jest-dom":"^6.9.1","@testing-library/react":"^16.3.0","@testing-library/user-event":"^13.5.0","axios":"^1.13.2","react":"^19.2.0","react-circular-progressbar":"^2.2.0","react-dom":"^19.2.0","react-redux":"^9.2.0","react-scripts":"5.0.1","recharts":"^3.4.1","web-vitals":"^2.1.4"},"scripts":{"start":"set PORT=2020 && react-scripts start","server":"json-server --watch db.json --port 2021","test":"react-scripts test","eject":"react-scripts eject","build":"tsup"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"json-server":"^1.0.0-beta.3","tsup":"^8.5.1"},"_id":"@asnadaf/mydashboard@0.1.0","gitHead":"8058ba33ab2959ce3e86d46024c2bbdb06f9719a","description":"A responsive dashboard built with **React**, **Redux Toolkit**, and **JSON Server**. It displays 4 cards with dynamic data fetched from an API. Each card shows:","_nodeVersion":"24.3.0","_npmVersion":"11.4.2","dist":{"integrity":"sha512-8iCFUZQiUxyZ9emzKm9MLeNeAMZkuAe70RAFeidTAu2dROd/0PF1ShEdtPEhULtF2uKQHMGkXyqB12iT/xb0Lg==","shasum":"14641a99e3670e679f85fc10000e6869ef73dc4c","tarball":"https://registry.npmjs.org/@asnadaf/mydashboard/-/mydashboard-0.1.0.tgz","fileCount":31,"unpackedSize":71292,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICsbrP60IWH3agEbamLyOJTvURr4zYRQNmV+kWjqk8RxAiEAmth9ka8tKLq93d8D8+OMTM9BpRRBz+ZukFKll/sHS60="}]},"_npmUser":{"name":"asnadaf","email":"nadafafifahmad@gmail.com"},"directories":{},"maintainers":[{"name":"asnadaf","email":"nadafafifahmad@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mydashboard_0.1.0_1764159459106_0.9146642883158278"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-26T12:17:39.042Z","0.1.0":"2025-11-26T12:17:39.312Z","modified":"2025-11-26T12:17:39.546Z"},"maintainers":[{"name":"asnadaf","email":"nadafafifahmad@gmail.com"}],"description":"A responsive dashboard built with **React**, **Redux Toolkit**, and **JSON Server**. It displays 4 cards with dynamic data fetched from an API. Each card shows:","readme":"# React Dashboard App\n\nA responsive dashboard built with **React**, **Redux Toolkit**, and **JSON Server**. It displays 4 cards with dynamic data fetched from an API. Each card shows:\n\n- Title\n- Count\n- Circular progress bar\n- Percentage increase (with conditional arrow ↑ or ↓)\n\n## ✅ Features\n\n- **Dynamic Data** from JSON Server\n- **Conditional Styling** for positive/negative increase values\n- **Responsive Layout** using CSS Grid and Flexbox\n- **Modern UI** with hover effects and Google Fonts\n\n## 📂 Project Structure\n\n```\nmydashboard/\n├── src/\n│   ├── components/\n│   │   ├── Dashboard.js\n│   │   └── Dashboard.css\n│   ├── features/\n│   │   └── dashboardSlice.js\n│   ├── services/\n│   │   └── api.js\n│   ├── store.js\n│   └── App.js\n└── README.md\n```\n\n## 🚀 Getting Started\n\n### 1. Clone the repository\n\n```bash\ngit clone <your-repo-url>\ncd mydashboard\n```\n\n### 2. Install dependencies\n\n```bash\nnpm install\n```\n\n### 3. Install additional packages\n\n```bash\nnpm install -g json-serve\nnpm install axios react-circular-progressbar\n```\n\n### 4. Start React App on port 2020\n\n```bash\nnpm start\n```\n\nApp will run at: [http://localhost:2020](http://localhost:2020)\n\n### 5. Start JSON Server on port 2021\n\nCreate a `db.json` file:\n\n```json\n{\n  \"cards\": [\n    {\n      \"id\": 1,\n      \"title\": \"Users\",\n      \"count\": 1200,\n      \"progress\": 75,\n      \"increase\": -12\n    },\n    { \"id\": 2, \"title\": \"Orders\", \"count\": 350, \"progress\": 50, \"increase\": 8 },\n    {\n      \"id\": 3,\n      \"title\": \"Revenue\",\n      \"count\": 15000,\n      \"progress\": 60,\n      \"increase\": 15\n    },\n    {\n      \"id\": 4,\n      \"title\": \"Feedback\",\n      \"count\": 85,\n      \"progress\": 90,\n      \"increase\": 20\n    }\n  ]\n}\n```\n\nRun JSON Server:\n\n```bash\nnpm run server\n```\n\nAPI will be available at: `http://localhost:2021/cards`\n\n## 🔑 API Integration\n\nUpdate `src/services/api.js`:\n\n```javascript\nimport axios from \"axios\";\nconst API_BASE_URL = \"http://localhost:2021\";\nexport const getCards = async () => {\n  const response = await axios.get(`${API_BASE_URL}/cards`);\n  return response.data;\n};\n```\n\n## 🎨 Styling Highlights\n\n- Cards use **Flexbox** for alignment\n- Conditional classes for increase values:\n\n```css\n.increase.positive {\n  color: #28a745;\n}\n.increase.negative {\n  color: #dc3545;\n}\n```\n\n## ✅ Conditional Arrow Logic\n\n```jsx\n<p className={`increase ${card.increase < 0 ? \"negative\" : \"positive\"}`}>\n  {card.increase < 0 ? \"↓\" : \"↑\"} {Math.abs(card.increase)}%\n</p>\n```\n\n## 📦 Build for Production\n\n```bash\nnpm run build\n```\n\n---\n\nEnjoy your modern dashboard! 🚀\n","readmeFilename":"README.md","_rev":"1-e3624fbc3d65278217d823c81cb23341"}