feat: analytics dashboards & two-tier feedback system (#78)
* docs: add analytics & user feedback design document Covers team analytics, personal analytics, flow analytics, step-level thumbs up/down feedback, and flow CSAT ratings. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * docs: add analytics & feedback implementation plan 12-task TDD plan covering session ratings, step feedback, team/personal/flow analytics endpoints, and frontend pages. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add session_ratings table and analytics indexes Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add SessionRating model and analytics schemas Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add session CSAT rating endpoint with tests Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add step thumbs feedback and /ratings alias routes Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add team, personal, and flow analytics endpoints Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add recharts, analytics types, and API client Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add inline step thumbs up/down feedback during sessions Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add CSAT rating modal after session completion Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add Team Analytics page with charts and leaderboards Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add Flow Analytics panel with step dropoff and CSAT data Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add My Analytics page with personal stats and charts Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit was merged in pull request #78.
This commit is contained in:
chihlasm
377
frontend/package-lock.json
generated
377
frontend/package-lock.json
generated
@@ -27,6 +27,7 @@
|
||||
"react-dom": "^19.2.0",
|
||||
"react-markdown": "^10.1.0",
|
||||
"react-router-dom": "^7.13.0",
|
||||
"recharts": "^3.7.0",
|
||||
"sonner": "^2.0.7",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
"zundo": "^2.3.0",
|
||||
@@ -1401,6 +1402,32 @@
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/@reduxjs/toolkit": {
|
||||
"version": "2.11.2",
|
||||
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
|
||||
"integrity": "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@standard-schema/spec": "^1.0.0",
|
||||
"@standard-schema/utils": "^0.3.0",
|
||||
"immer": "^11.0.0",
|
||||
"redux": "^5.0.1",
|
||||
"redux-thunk": "^3.1.0",
|
||||
"reselect": "^5.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
|
||||
"react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-redux": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/pluginutils": {
|
||||
"version": "1.0.0-beta.53",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.53.tgz",
|
||||
@@ -1762,7 +1789,12 @@
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
|
||||
"integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@standard-schema/utils": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
|
||||
"integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@stripe/stripe-js": {
|
||||
@@ -1928,6 +1960,69 @@
|
||||
"assertion-error": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-array": {
|
||||
"version": "3.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
|
||||
"integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-color": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
|
||||
"integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-ease": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
|
||||
"integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-interpolate": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
|
||||
"integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/d3-color": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-path": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
|
||||
"integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-scale": {
|
||||
"version": "4.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
|
||||
"integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/d3-time": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-shape": {
|
||||
"version": "3.1.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
|
||||
"integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/d3-path": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-time": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
|
||||
"integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-timer": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
|
||||
"integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/debug": {
|
||||
"version": "4.1.12",
|
||||
"resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
|
||||
@@ -2038,6 +2133,12 @@
|
||||
"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/use-sync-external-store": {
|
||||
"version": "0.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
|
||||
"integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@typescript-eslint/eslint-plugin": {
|
||||
"version": "8.54.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.54.0.tgz",
|
||||
@@ -3126,6 +3227,127 @@
|
||||
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/d3-array": {
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
|
||||
"integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"internmap": "1 - 2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-color": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
|
||||
"integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-ease": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
|
||||
"integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
|
||||
"license": "BSD-3-Clause",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-format": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
|
||||
"integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-interpolate": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
|
||||
"integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-color": "1 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-path": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
|
||||
"integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-scale": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
|
||||
"integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-array": "2.10.0 - 3",
|
||||
"d3-format": "1 - 3",
|
||||
"d3-interpolate": "1.2.0 - 3",
|
||||
"d3-time": "2.1.1 - 3",
|
||||
"d3-time-format": "2 - 4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-shape": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
|
||||
"integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-path": "^3.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-time": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
|
||||
"integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-array": "2 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-time-format": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
|
||||
"integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-time": "1 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-timer": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
|
||||
"integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/data-urls": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/data-urls/-/data-urls-7.0.0.tgz",
|
||||
@@ -3180,6 +3402,12 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/decimal.js-light": {
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
|
||||
"integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/decode-named-character-reference": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.3.0.tgz",
|
||||
@@ -3365,6 +3593,16 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/es-toolkit": {
|
||||
"version": "1.44.0",
|
||||
"resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.44.0.tgz",
|
||||
"integrity": "sha512-6penXeZalaV88MM3cGkFZZfOoLGWshWWfdy0tWw/RlVVyhvMaWSBTOvXNeiW3e5FwdS5ePW0LGEu17zT139ktg==",
|
||||
"license": "MIT",
|
||||
"workspaces": [
|
||||
"docs",
|
||||
"benchmarks"
|
||||
]
|
||||
},
|
||||
"node_modules/esbuild": {
|
||||
"version": "0.27.2",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.2.tgz",
|
||||
@@ -3634,6 +3872,12 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/eventemitter3": {
|
||||
"version": "5.0.4",
|
||||
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
|
||||
"integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/expect-type": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
|
||||
@@ -4207,6 +4451,15 @@
|
||||
"integrity": "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/internmap": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
|
||||
"integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/is-alphabetical": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
|
||||
@@ -5903,7 +6156,6 @@
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
@@ -5934,6 +6186,29 @@
|
||||
"react": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/react-redux": {
|
||||
"version": "9.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
|
||||
"integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/use-sync-external-store": "^0.0.6",
|
||||
"use-sync-external-store": "^1.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^18.2.25 || ^19",
|
||||
"react": "^18.0 || ^19",
|
||||
"redux": "^5.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"redux": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.18.0",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.18.0.tgz",
|
||||
@@ -6018,6 +6293,46 @@
|
||||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"node_modules/recharts": {
|
||||
"version": "3.7.0",
|
||||
"resolved": "https://registry.npmjs.org/recharts/-/recharts-3.7.0.tgz",
|
||||
"integrity": "sha512-l2VCsy3XXeraxIID9fx23eCb6iCBsxUQDnE8tWm6DFdszVAO7WVY/ChAD9wVit01y6B2PMupYiMmQwhgPHc9Ew==",
|
||||
"license": "MIT",
|
||||
"workspaces": [
|
||||
"www"
|
||||
],
|
||||
"dependencies": {
|
||||
"@reduxjs/toolkit": "1.x.x || 2.x.x",
|
||||
"clsx": "^2.1.1",
|
||||
"decimal.js-light": "^2.5.1",
|
||||
"es-toolkit": "^1.39.3",
|
||||
"eventemitter3": "^5.0.1",
|
||||
"immer": "^10.1.1",
|
||||
"react-redux": "8.x.x || 9.x.x",
|
||||
"reselect": "5.1.1",
|
||||
"tiny-invariant": "^1.3.3",
|
||||
"use-sync-external-store": "^1.2.2",
|
||||
"victory-vendor": "^37.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/recharts/node_modules/immer": {
|
||||
"version": "10.2.0",
|
||||
"resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
|
||||
"integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/immer"
|
||||
}
|
||||
},
|
||||
"node_modules/redent": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
|
||||
@@ -6032,6 +6347,21 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/redux": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
|
||||
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/redux-thunk": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
|
||||
"integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"redux": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/remark-parse": {
|
||||
"version": "11.0.0",
|
||||
"resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
|
||||
@@ -6085,6 +6415,12 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/reselect": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
|
||||
"integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
"version": "1.22.11",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
|
||||
@@ -6575,6 +6911,12 @@
|
||||
"node": ">=0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/tiny-invariant": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
|
||||
"integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tinybench": {
|
||||
"version": "2.9.0",
|
||||
"resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
|
||||
@@ -6930,6 +7272,15 @@
|
||||
"punycode": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/use-sync-external-store": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
|
||||
"integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
@@ -6965,6 +7316,28 @@
|
||||
"url": "https://opencollective.com/unified"
|
||||
}
|
||||
},
|
||||
"node_modules/victory-vendor": {
|
||||
"version": "37.3.6",
|
||||
"resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
|
||||
"integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
|
||||
"license": "MIT AND ISC",
|
||||
"dependencies": {
|
||||
"@types/d3-array": "^3.0.3",
|
||||
"@types/d3-ease": "^3.0.0",
|
||||
"@types/d3-interpolate": "^3.0.1",
|
||||
"@types/d3-scale": "^4.0.2",
|
||||
"@types/d3-shape": "^3.1.0",
|
||||
"@types/d3-time": "^3.0.0",
|
||||
"@types/d3-timer": "^3.0.0",
|
||||
"d3-array": "^3.1.6",
|
||||
"d3-ease": "^3.0.1",
|
||||
"d3-interpolate": "^3.0.1",
|
||||
"d3-scale": "^4.0.2",
|
||||
"d3-shape": "^3.1.0",
|
||||
"d3-time": "^3.0.0",
|
||||
"d3-timer": "^3.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "7.3.1",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
|
||||
|
||||
@@ -32,6 +32,7 @@
|
||||
"react-dom": "^19.2.0",
|
||||
"react-markdown": "^10.1.0",
|
||||
"react-router-dom": "^7.13.0",
|
||||
"recharts": "^3.7.0",
|
||||
"sonner": "^2.0.7",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
"zundo": "^2.3.0",
|
||||
|
||||
36
frontend/src/api/analytics.ts
Normal file
36
frontend/src/api/analytics.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import apiClient from './client'
|
||||
import type {
|
||||
TeamAnalyticsResponse,
|
||||
PersonalAnalyticsResponse,
|
||||
FlowAnalyticsResponse,
|
||||
AnalyticsPeriod,
|
||||
} from '@/types'
|
||||
|
||||
const analyticsApi = {
|
||||
async getTeamAnalytics(period: AnalyticsPeriod = '30d', engineerId?: string): Promise<TeamAnalyticsResponse> {
|
||||
const params: Record<string, string> = { period }
|
||||
if (engineerId) params.engineer_id = engineerId
|
||||
const response = await apiClient.get<TeamAnalyticsResponse>('/analytics/team', { params })
|
||||
return response.data
|
||||
},
|
||||
|
||||
async getPersonalAnalytics(period: AnalyticsPeriod = '30d'): Promise<PersonalAnalyticsResponse> {
|
||||
const response = await apiClient.get<PersonalAnalyticsResponse>('/analytics/me', { params: { period } })
|
||||
return response.data
|
||||
},
|
||||
|
||||
async getFlowAnalytics(treeId: string, period: AnalyticsPeriod = '30d'): Promise<FlowAnalyticsResponse> {
|
||||
const response = await apiClient.get<FlowAnalyticsResponse>(`/analytics/flows/${treeId}`, { params: { period } })
|
||||
return response.data
|
||||
},
|
||||
|
||||
async rateSession(sessionId: string, rating: number, comment?: string): Promise<void> {
|
||||
await apiClient.post(`/sessions/${sessionId}/rate`, { rating, comment })
|
||||
},
|
||||
|
||||
async submitStepFeedback(stepId: string, sessionId: string, wasHelpful: boolean): Promise<void> {
|
||||
await apiClient.post(`/steps/${stepId}/feedback`, { session_id: sessionId, was_helpful: wasHelpful })
|
||||
},
|
||||
}
|
||||
|
||||
export default analyticsApi
|
||||
@@ -12,3 +12,4 @@ export { default as accountsApi } from './accounts'
|
||||
export { default as adminApi } from './admin'
|
||||
export { treeMarkdownApi } from './treeMarkdown'
|
||||
export { default as pinnedFlowsApi } from './pinnedFlows'
|
||||
export { default as analyticsApi } from './analytics'
|
||||
|
||||
308
frontend/src/components/analytics/FlowAnalyticsPanel.tsx
Normal file
308
frontend/src/components/analytics/FlowAnalyticsPanel.tsx
Normal file
@@ -0,0 +1,308 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Loader2, Star } from 'lucide-react'
|
||||
import {
|
||||
AreaChart,
|
||||
Area,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
} from 'recharts'
|
||||
import { analyticsApi } from '@/api'
|
||||
import { cn } from '@/lib/utils'
|
||||
import type { FlowAnalyticsResponse, AnalyticsPeriod } from '@/types'
|
||||
|
||||
const CHART_COLORS = {
|
||||
resolved: '#34d399',
|
||||
escalated: '#f87171',
|
||||
workaround: '#fbbf24',
|
||||
unresolved: '#94a3b8',
|
||||
}
|
||||
|
||||
const PERIOD_OPTIONS: { value: AnalyticsPeriod; label: string }[] = [
|
||||
{ value: '7d', label: 'Last 7 days' },
|
||||
{ value: '30d', label: 'Last 30 days' },
|
||||
{ value: '90d', label: 'Last 90 days' },
|
||||
]
|
||||
|
||||
interface FlowAnalyticsPanelProps {
|
||||
treeId: string
|
||||
}
|
||||
|
||||
export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
|
||||
const [period, setPeriod] = useState<AnalyticsPeriod>('30d')
|
||||
const [data, setData] = useState<FlowAnalyticsResponse | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true)
|
||||
setError(false)
|
||||
analyticsApi
|
||||
.getFlowAnalytics(treeId, period)
|
||||
.then(setData)
|
||||
.catch(() => {
|
||||
setError(true)
|
||||
setData(null)
|
||||
})
|
||||
.finally(() => setLoading(false))
|
||||
}, [treeId, period])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (error || !data) {
|
||||
return (
|
||||
<div className="text-center py-12 text-muted-foreground">
|
||||
No analytics data available for this flow.
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const { summary, avg_csat, total_ratings, time_series, step_feedback, recent_comments } = data
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Period selector */}
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold text-foreground">Flow Analytics</h3>
|
||||
<select
|
||||
value={period}
|
||||
onChange={(e) => setPeriod(e.target.value as AnalyticsPeriod)}
|
||||
className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-ring"
|
||||
>
|
||||
{PERIOD_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Summary stat cards */}
|
||||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
|
||||
<StatCard label="Sessions" value={summary.total_sessions.toLocaleString()} />
|
||||
<StatCard
|
||||
label="Completion"
|
||||
value={`${(summary.completion_rate * 100).toFixed(0)}%`}
|
||||
/>
|
||||
<StatCard
|
||||
label="Median Time"
|
||||
value={`${summary.median_duration_minutes} min`}
|
||||
/>
|
||||
<StatCard
|
||||
label="CSAT"
|
||||
value={avg_csat != null ? `${avg_csat.toFixed(1)}/5` : 'N/A'}
|
||||
subtitle={total_ratings > 0 ? `${total_ratings} rating${total_ratings !== 1 ? 's' : ''}` : undefined}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Area chart - Sessions over time */}
|
||||
{time_series.length > 0 && (
|
||||
<div className="bg-card border border-border rounded-xl p-4">
|
||||
<p className="text-sm font-semibold text-foreground mb-3">Sessions Over Time</p>
|
||||
<ResponsiveContainer width="100%" height={180}>
|
||||
<AreaChart data={time_series}>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
stroke="hsl(var(--border))"
|
||||
vertical={false}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 11 }}
|
||||
tickLine={false}
|
||||
axisLine={{ stroke: 'hsl(var(--border))' }}
|
||||
tickFormatter={(value) => {
|
||||
const d = new Date(String(value))
|
||||
return `${d.getMonth() + 1}/${d.getDate()}`
|
||||
}}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 11 }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
allowDecimals={false}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: 'hsl(var(--card))',
|
||||
border: '1px solid hsl(var(--border))',
|
||||
borderRadius: '8px',
|
||||
color: 'hsl(var(--foreground))',
|
||||
fontSize: '13px',
|
||||
}}
|
||||
labelFormatter={(value) => {
|
||||
const d = new Date(String(value))
|
||||
return d.toLocaleDateString(undefined, {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="resolved"
|
||||
stackId="1"
|
||||
stroke={CHART_COLORS.resolved}
|
||||
fill={CHART_COLORS.resolved}
|
||||
fillOpacity={0.3}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="escalated"
|
||||
stackId="1"
|
||||
stroke={CHART_COLORS.escalated}
|
||||
fill={CHART_COLORS.escalated}
|
||||
fillOpacity={0.3}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="workaround"
|
||||
stackId="1"
|
||||
stroke={CHART_COLORS.workaround}
|
||||
fill={CHART_COLORS.workaround}
|
||||
fillOpacity={0.3}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="unresolved"
|
||||
stackId="1"
|
||||
stroke={CHART_COLORS.unresolved}
|
||||
fill={CHART_COLORS.unresolved}
|
||||
fillOpacity={0.3}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
|
||||
{/* Chart legend */}
|
||||
<div className="flex items-center gap-4 mt-2 justify-center">
|
||||
{Object.entries(CHART_COLORS).map(([key, color]) => (
|
||||
<div key={key} className="flex items-center gap-1.5">
|
||||
<div
|
||||
className="h-2 w-2 rounded-full"
|
||||
style={{ backgroundColor: color }}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground capitalize">
|
||||
{key}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step Feedback Table with Dropoff Metrics */}
|
||||
{step_feedback.length > 0 && (
|
||||
<div className="bg-card border border-border rounded-xl p-4">
|
||||
<p className="text-sm font-semibold text-foreground mb-3">Step Performance</p>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-border">
|
||||
<th className="text-left py-2 pr-4 text-foreground font-medium">Step</th>
|
||||
<th className="text-right py-2 pr-4 text-foreground font-medium">Visits</th>
|
||||
<th className="text-right py-2 pr-4 text-foreground font-medium">Dropoffs</th>
|
||||
<th className="text-right py-2 text-foreground font-medium">Dropoff Rate</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{step_feedback.map((step) => (
|
||||
<tr
|
||||
key={step.node_id}
|
||||
className={cn(
|
||||
'border-b border-border last:border-0',
|
||||
step.dropoff_rate > 0.2 && 'bg-red-400/5'
|
||||
)}
|
||||
>
|
||||
<td className="py-2 pr-4 text-muted-foreground truncate max-w-[200px]">
|
||||
{step.node_title}
|
||||
</td>
|
||||
<td className="py-2 pr-4 text-right text-muted-foreground">
|
||||
{step.visit_count}
|
||||
</td>
|
||||
<td className="py-2 pr-4 text-right text-muted-foreground">
|
||||
{step.dropoff_count}
|
||||
</td>
|
||||
<td
|
||||
className={cn(
|
||||
'py-2 text-right font-medium',
|
||||
step.dropoff_rate > 0.2 ? 'text-red-400' : 'text-muted-foreground'
|
||||
)}
|
||||
>
|
||||
{(step.dropoff_rate * 100).toFixed(1)}%
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Recent Comments (Anonymous) */}
|
||||
{recent_comments.length > 0 && (
|
||||
<div className="bg-card border border-border rounded-xl p-4">
|
||||
<p className="text-sm font-semibold text-foreground mb-3">Recent Feedback</p>
|
||||
<div className="space-y-3">
|
||||
{recent_comments.map((item, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-start gap-3 border-b border-border/50 pb-3 last:border-0 last:pb-0"
|
||||
>
|
||||
<div className="flex items-center gap-0.5 shrink-0 pt-0.5">
|
||||
{[1, 2, 3, 4, 5].map((v) => (
|
||||
<Star
|
||||
key={v}
|
||||
size={12}
|
||||
className={cn(
|
||||
v <= item.rating
|
||||
? 'fill-yellow-400 text-yellow-400'
|
||||
: 'fill-none text-muted-foreground'
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
{item.comment && (
|
||||
<p className="text-sm text-foreground">{item.comment}</p>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
{new Date(item.created_at).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function StatCard({
|
||||
label,
|
||||
value,
|
||||
subtitle,
|
||||
}: {
|
||||
label: string
|
||||
value: string | number
|
||||
subtitle?: string
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-card border border-border rounded-xl p-4">
|
||||
<p className="text-xs text-muted-foreground">{label}</p>
|
||||
<p className="text-xl font-bold text-foreground mt-1">{value}</p>
|
||||
{subtitle && (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">{subtitle}</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useNavigate, useLocation } from 'react-router-dom'
|
||||
import { LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, Users, Settings, PanelLeftClose, PanelLeftOpen } from 'lucide-react'
|
||||
import { LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, BarChart3, Users, Settings, PanelLeftClose, PanelLeftOpen } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { useUserPreferencesStore } from '@/store/userPreferencesStore'
|
||||
import { CategoryList } from '@/components/sidebar/CategoryList'
|
||||
@@ -123,6 +123,7 @@ export function Sidebar() {
|
||||
<NavItem href="/sessions" icon={Clock} label="Sessions" badge={activeSessionCount || undefined} collapsed />
|
||||
<NavItem href="/shares" icon={FileText} label="Exports" collapsed />
|
||||
<NavItem href="/step-library" icon={Bookmark} label="Step Library" collapsed />
|
||||
<NavItem href="/analytics" icon={BarChart3} label="Analytics" collapsed />
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
@@ -150,6 +151,7 @@ export function Sidebar() {
|
||||
<NavItem href="/sessions" icon={Clock} label="Sessions" badge={activeSessionCount || undefined} />
|
||||
<NavItem href="/shares" icon={FileText} label="Exports" />
|
||||
<NavItem href="/step-library" icon={Bookmark} label="Step Library" badge="dot" />
|
||||
<NavItem href="/analytics" icon={BarChart3} label="Analytics" />
|
||||
</div>
|
||||
|
||||
<div className="border-b border-[hsl(var(--border-subtle))]" />
|
||||
|
||||
118
frontend/src/components/session/CSATModal.tsx
Normal file
118
frontend/src/components/session/CSATModal.tsx
Normal file
@@ -0,0 +1,118 @@
|
||||
import { useState } from 'react'
|
||||
import { Star } from 'lucide-react'
|
||||
import { Modal } from '@/components/common/Modal'
|
||||
import { analyticsApi } from '@/api'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface CSATModalProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
sessionId: string
|
||||
}
|
||||
|
||||
const RATED_SESSIONS_KEY = 'rf-rated-sessions'
|
||||
|
||||
function getRatedSessions(): string[] {
|
||||
try {
|
||||
return JSON.parse(localStorage.getItem(RATED_SESSIONS_KEY) || '[]')
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
function markSessionRated(sessionId: string) {
|
||||
const rated = getRatedSessions()
|
||||
rated.push(sessionId)
|
||||
localStorage.setItem(RATED_SESSIONS_KEY, JSON.stringify(rated.slice(-100)))
|
||||
}
|
||||
|
||||
export function hasBeenRated(sessionId: string): boolean {
|
||||
return getRatedSessions().includes(sessionId)
|
||||
}
|
||||
|
||||
export function CSATModal({ isOpen, onClose, sessionId }: CSATModalProps) {
|
||||
const [rating, setRating] = useState(0)
|
||||
const [hoveredRating, setHoveredRating] = useState(0)
|
||||
const [comment, setComment] = useState('')
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (rating === 0 || submitting) return
|
||||
setSubmitting(true)
|
||||
try {
|
||||
await analyticsApi.rateSession(sessionId, rating, comment || undefined)
|
||||
markSessionRated(sessionId)
|
||||
onClose()
|
||||
} catch {
|
||||
// Silently fail — still close
|
||||
onClose()
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSkip = () => {
|
||||
markSessionRated(sessionId)
|
||||
onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={handleSkip} title="How was this flow?" size="sm">
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Your feedback helps flow authors improve troubleshooting paths.
|
||||
</p>
|
||||
|
||||
{/* Star rating */}
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
{[1, 2, 3, 4, 5].map((value) => (
|
||||
<button
|
||||
key={value}
|
||||
onClick={() => setRating(value)}
|
||||
onMouseEnter={() => setHoveredRating(value)}
|
||||
onMouseLeave={() => setHoveredRating(0)}
|
||||
className="p-1 transition-colors"
|
||||
>
|
||||
<Star
|
||||
size={28}
|
||||
className={cn(
|
||||
'transition-colors',
|
||||
(hoveredRating || rating) >= value
|
||||
? 'fill-yellow-400 text-yellow-400'
|
||||
: 'fill-none text-muted-foreground'
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Comment */}
|
||||
<textarea
|
||||
value={comment}
|
||||
onChange={(e) => setComment(e.target.value)}
|
||||
placeholder="Any comments? (optional)"
|
||||
maxLength={500}
|
||||
rows={3}
|
||||
className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20 resize-none"
|
||||
/>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center justify-between">
|
||||
<button
|
||||
onClick={handleSkip}
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
Skip
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={rating === 0 || submitting}
|
||||
className="rounded-lg bg-gradient-brand px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-primary/20 hover:opacity-90 transition-opacity disabled:opacity-50"
|
||||
>
|
||||
{submitting ? 'Submitting...' : 'Submit'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
77
frontend/src/components/session/StepFeedback.tsx
Normal file
77
frontend/src/components/session/StepFeedback.tsx
Normal file
@@ -0,0 +1,77 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { ThumbsUp, ThumbsDown } from 'lucide-react'
|
||||
import { analyticsApi } from '@/api'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface StepFeedbackProps {
|
||||
stepId: string
|
||||
sessionId: string
|
||||
}
|
||||
|
||||
const HINT_KEY = 'rf-step-feedback-hint-dismissed'
|
||||
|
||||
export function StepFeedback({ stepId, sessionId }: StepFeedbackProps) {
|
||||
const [feedback, setFeedback] = useState<boolean | null>(null)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [showHint, setShowHint] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (!localStorage.getItem(HINT_KEY)) {
|
||||
setShowHint(true)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleFeedback = async (wasHelpful: boolean) => {
|
||||
if (submitting) return
|
||||
setSubmitting(true)
|
||||
try {
|
||||
const newValue = feedback === wasHelpful ? null : wasHelpful
|
||||
if (newValue !== null) {
|
||||
await analyticsApi.submitStepFeedback(stepId, sessionId, newValue)
|
||||
}
|
||||
setFeedback(newValue)
|
||||
if (showHint) {
|
||||
setShowHint(false)
|
||||
localStorage.setItem(HINT_KEY, '1')
|
||||
}
|
||||
} catch {
|
||||
// Silently fail — feedback is non-critical
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
{showHint && (
|
||||
<span className="text-xs text-muted-foreground">Was this step helpful?</span>
|
||||
)}
|
||||
<button
|
||||
onClick={() => handleFeedback(true)}
|
||||
disabled={submitting}
|
||||
className={cn(
|
||||
'rounded-md p-1.5 transition-colors',
|
||||
feedback === true
|
||||
? 'text-emerald-400 bg-emerald-400/10'
|
||||
: 'text-muted-foreground hover:text-emerald-400 hover:bg-accent'
|
||||
)}
|
||||
title="Helpful"
|
||||
>
|
||||
<ThumbsUp size={14} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleFeedback(false)}
|
||||
disabled={submitting}
|
||||
className={cn(
|
||||
'rounded-md p-1.5 transition-colors',
|
||||
feedback === false
|
||||
? 'text-red-400 bg-red-400/10'
|
||||
: 'text-muted-foreground hover:text-red-400 hover:bg-accent'
|
||||
)}
|
||||
title="Not helpful"
|
||||
>
|
||||
<ThumbsDown size={14} />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
348
frontend/src/pages/MyAnalyticsPage.tsx
Normal file
348
frontend/src/pages/MyAnalyticsPage.tsx
Normal file
@@ -0,0 +1,348 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { BarChart3, Loader2, Target, Clock, TrendingUp, CheckCircle } from 'lucide-react'
|
||||
import {
|
||||
AreaChart,
|
||||
Area,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
} from 'recharts'
|
||||
import { analyticsApi } from '@/api'
|
||||
import { usePermissions } from '@/hooks/usePermissions'
|
||||
import type { PersonalAnalyticsResponse, AnalyticsPeriod } from '@/types'
|
||||
|
||||
const OUTCOME_COLORS: Record<string, string> = {
|
||||
resolved: '#34d399',
|
||||
escalated: '#f87171',
|
||||
workaround: '#fbbf24',
|
||||
unresolved: '#94a3b8',
|
||||
}
|
||||
|
||||
const PERIOD_OPTIONS: { value: AnalyticsPeriod; label: string }[] = [
|
||||
{ value: '7d', label: 'Last 7 days' },
|
||||
{ value: '30d', label: 'Last 30 days' },
|
||||
{ value: '90d', label: 'Last 90 days' },
|
||||
]
|
||||
|
||||
export default function MyAnalyticsPage() {
|
||||
const { isAccountOwner, isSuperAdmin } = usePermissions()
|
||||
const [period, setPeriod] = useState<AnalyticsPeriod>('30d')
|
||||
const [data, setData] = useState<PersonalAnalyticsResponse | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true)
|
||||
analyticsApi
|
||||
.getPersonalAnalytics(period)
|
||||
.then(setData)
|
||||
.catch(console.error)
|
||||
.finally(() => setLoading(false))
|
||||
}, [period])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[60vh]">
|
||||
<Loader2 size={32} className="animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[60vh]">
|
||||
<p className="text-muted-foreground">Failed to load analytics data.</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const { summary, time_series, top_flows } = data
|
||||
const outcomeBreakdown = summary.outcome_breakdown
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6 max-w-7xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<span title="My Analytics">
|
||||
<BarChart3 size={24} className="text-foreground" />
|
||||
</span>
|
||||
<h1 className="text-2xl font-bold text-foreground">My Analytics</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
{(isAccountOwner || isSuperAdmin) && (
|
||||
<Link
|
||||
to="/analytics"
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
Team Analytics
|
||||
</Link>
|
||||
)}
|
||||
<select
|
||||
value={period}
|
||||
onChange={(e) => setPeriod(e.target.value as AnalyticsPeriod)}
|
||||
className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-ring"
|
||||
>
|
||||
{PERIOD_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stat Cards */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<StatCard
|
||||
icon={TrendingUp}
|
||||
label="My Sessions"
|
||||
value={summary.total_sessions.toLocaleString()}
|
||||
/>
|
||||
<StatCard
|
||||
icon={Target}
|
||||
label="My Completion Rate"
|
||||
value={`${(summary.completion_rate * 100).toFixed(1)}%`}
|
||||
/>
|
||||
<StatCard
|
||||
icon={Clock}
|
||||
label="Median Duration"
|
||||
value={`${summary.median_duration_minutes} min`}
|
||||
/>
|
||||
<StatCard
|
||||
icon={CheckCircle}
|
||||
label="Outcomes Resolved"
|
||||
value={outcomeBreakdown.resolved.toLocaleString()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Area Chart — Sessions over Time */}
|
||||
<div className="bg-card border border-border rounded-xl p-6">
|
||||
<h2 className="text-sm font-semibold text-foreground mb-4">
|
||||
My Sessions Over Time
|
||||
</h2>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<AreaChart data={time_series}>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
stroke="hsl(var(--border))"
|
||||
vertical={false}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
|
||||
tickLine={false}
|
||||
axisLine={{ stroke: 'hsl(var(--border))' }}
|
||||
tickFormatter={(value: string) => {
|
||||
const d = new Date(value)
|
||||
return `${d.getMonth() + 1}/${d.getDate()}`
|
||||
}}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
allowDecimals={false}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: 'hsl(var(--card))',
|
||||
border: '1px solid hsl(var(--border))',
|
||||
borderRadius: '8px',
|
||||
color: 'hsl(var(--foreground))',
|
||||
fontSize: '13px',
|
||||
}}
|
||||
labelFormatter={(value) => {
|
||||
const d = new Date(String(value))
|
||||
return d.toLocaleDateString(undefined, {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="resolved"
|
||||
stackId="1"
|
||||
stroke={OUTCOME_COLORS.resolved}
|
||||
fill={OUTCOME_COLORS.resolved}
|
||||
fillOpacity={0.3}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="escalated"
|
||||
stackId="1"
|
||||
stroke={OUTCOME_COLORS.escalated}
|
||||
fill={OUTCOME_COLORS.escalated}
|
||||
fillOpacity={0.3}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="workaround"
|
||||
stackId="1"
|
||||
stroke={OUTCOME_COLORS.workaround}
|
||||
fill={OUTCOME_COLORS.workaround}
|
||||
fillOpacity={0.3}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="unresolved"
|
||||
stackId="1"
|
||||
stroke={OUTCOME_COLORS.unresolved}
|
||||
fill={OUTCOME_COLORS.unresolved}
|
||||
fillOpacity={0.3}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
|
||||
{/* Chart legend */}
|
||||
<div className="flex items-center gap-6 mt-3 justify-center">
|
||||
{Object.entries(OUTCOME_COLORS).map(([key, color]) => (
|
||||
<div key={key} className="flex items-center gap-1.5">
|
||||
<div
|
||||
className="h-2.5 w-2.5 rounded-full"
|
||||
style={{ backgroundColor: color }}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground capitalize">
|
||||
{key}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Two-Column: Top Flows & Outcome Distribution */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* My Top Flows */}
|
||||
<div className="bg-card border border-border rounded-xl p-6">
|
||||
<h2 className="text-sm font-semibold text-foreground mb-4">
|
||||
My Top Flows
|
||||
</h2>
|
||||
{top_flows.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No flow data for this period.</p>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-border">
|
||||
<th className="text-left py-2 text-foreground font-medium">
|
||||
Name
|
||||
</th>
|
||||
<th className="text-right py-2 text-foreground font-medium">
|
||||
Sessions
|
||||
</th>
|
||||
<th className="text-right py-2 text-foreground font-medium">
|
||||
Completion
|
||||
</th>
|
||||
<th className="text-right py-2 text-foreground font-medium">
|
||||
Median
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{top_flows.map((flow) => (
|
||||
<tr
|
||||
key={flow.tree_id}
|
||||
className="border-b border-border last:border-0"
|
||||
>
|
||||
<td className="py-2 text-muted-foreground truncate max-w-[200px]">
|
||||
{flow.name}
|
||||
</td>
|
||||
<td className="py-2 text-right text-muted-foreground">
|
||||
{flow.sessions}
|
||||
</td>
|
||||
<td className="py-2 text-right text-muted-foreground">
|
||||
{(flow.completion_rate * 100).toFixed(1)}%
|
||||
</td>
|
||||
<td className="py-2 text-right text-muted-foreground">
|
||||
{flow.median_duration_minutes} min
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Outcome Distribution */}
|
||||
<div className="bg-card border border-border rounded-xl p-6">
|
||||
<h2 className="text-sm font-semibold text-foreground mb-4">
|
||||
Outcome Distribution
|
||||
</h2>
|
||||
{summary.total_sessions === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No session data for this period.</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{(
|
||||
Object.entries(outcomeBreakdown) as [string, number][]
|
||||
).map(([outcome, count]) => {
|
||||
const total = Object.values(outcomeBreakdown).reduce(
|
||||
(sum, v) => sum + v,
|
||||
0
|
||||
)
|
||||
const pct = total > 0 ? (count / total) * 100 : 0
|
||||
|
||||
return (
|
||||
<div key={outcome}>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className="h-2.5 w-2.5 rounded-full flex-shrink-0"
|
||||
style={{
|
||||
backgroundColor:
|
||||
OUTCOME_COLORS[outcome] ?? '#94a3b8',
|
||||
}}
|
||||
/>
|
||||
<span className="text-sm text-muted-foreground capitalize">
|
||||
{outcome}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-sm text-foreground font-medium">
|
||||
{count} ({pct.toFixed(1)}%)
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 rounded-full bg-border overflow-hidden">
|
||||
<div
|
||||
className="h-full rounded-full transition-all duration-500"
|
||||
style={{
|
||||
width: `${pct}%`,
|
||||
backgroundColor:
|
||||
OUTCOME_COLORS[outcome] ?? '#94a3b8',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function StatCard({
|
||||
icon: Icon,
|
||||
label,
|
||||
value,
|
||||
}: {
|
||||
icon: React.ComponentType<{ size?: number; className?: string }>
|
||||
label: string
|
||||
value: string
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-card border border-border rounded-xl p-6">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Icon size={16} className="text-muted-foreground" />
|
||||
<span className="text-sm text-muted-foreground">{label}</span>
|
||||
</div>
|
||||
<p className="text-3xl font-bold text-foreground">{value}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -11,6 +11,8 @@ import { ProgressBar } from '@/components/procedural/ProgressBar'
|
||||
import { CompletionSummary } from '@/components/procedural/CompletionSummary'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { toast } from '@/lib/toast'
|
||||
import { StepFeedback } from '@/components/session/StepFeedback'
|
||||
import { CSATModal, hasBeenRated } from '@/components/session/CSATModal'
|
||||
|
||||
interface StepState {
|
||||
notes: string
|
||||
@@ -35,6 +37,7 @@ export function ProceduralNavigationPage() {
|
||||
const [completedAt, setCompletedAt] = useState<string>('')
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true)
|
||||
const [paramsOpen, setParamsOpen] = useState(false)
|
||||
const [showCsatModal, setShowCsatModal] = useState(false)
|
||||
const [elapsedMinutes, setElapsedMinutes] = useState(0)
|
||||
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
|
||||
|
||||
@@ -244,6 +247,9 @@ export function ProceduralNavigationPage() {
|
||||
})
|
||||
setCompletedAt(completedTime)
|
||||
setIsComplete(true)
|
||||
if (!hasBeenRated(session.id)) {
|
||||
setShowCsatModal(true)
|
||||
}
|
||||
} else {
|
||||
setCurrentStepIndex(currentStepIndex + 1)
|
||||
}
|
||||
@@ -274,6 +280,10 @@ export function ProceduralNavigationPage() {
|
||||
})
|
||||
}
|
||||
|
||||
const handleCsatClose = () => {
|
||||
setShowCsatModal(false)
|
||||
}
|
||||
|
||||
// Loading state
|
||||
if (isLoading) {
|
||||
return (
|
||||
@@ -406,9 +416,23 @@ export function ProceduralNavigationPage() {
|
||||
isLast={currentStepIndex === procedureSteps.length - 1}
|
||||
/>
|
||||
)}
|
||||
{session && currentStep && (
|
||||
<div className="mt-3 flex justify-end">
|
||||
<StepFeedback stepId={currentStep.id} sessionId={session.id} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CSAT Modal */}
|
||||
{session && (
|
||||
<CSATModal
|
||||
isOpen={showCsatModal}
|
||||
onClose={handleCsatClose}
|
||||
sessionId={session.id}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Parameters popover */}
|
||||
{paramsOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||||
|
||||
366
frontend/src/pages/TeamAnalyticsPage.tsx
Normal file
366
frontend/src/pages/TeamAnalyticsPage.tsx
Normal file
@@ -0,0 +1,366 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { BarChart3, Loader2, Users, Target, Clock, TrendingUp, ShieldX } from 'lucide-react'
|
||||
import {
|
||||
AreaChart,
|
||||
Area,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
} from 'recharts'
|
||||
import { analyticsApi } from '@/api'
|
||||
import { usePermissions } from '@/hooks/usePermissions'
|
||||
import type { TeamAnalyticsResponse, AnalyticsPeriod } from '@/types'
|
||||
|
||||
const CHART_COLORS = {
|
||||
resolved: '#34d399',
|
||||
escalated: '#f87171',
|
||||
workaround: '#fbbf24',
|
||||
unresolved: '#94a3b8',
|
||||
}
|
||||
|
||||
const PERIOD_OPTIONS: { value: AnalyticsPeriod; label: string }[] = [
|
||||
{ value: '7d', label: 'Last 7 days' },
|
||||
{ value: '30d', label: 'Last 30 days' },
|
||||
{ value: '90d', label: 'Last 90 days' },
|
||||
]
|
||||
|
||||
export default function TeamAnalyticsPage() {
|
||||
const { isAccountOwner, isSuperAdmin } = usePermissions()
|
||||
const [period, setPeriod] = useState<AnalyticsPeriod>('30d')
|
||||
const [data, setData] = useState<TeamAnalyticsResponse | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
if (!isAccountOwner && !isSuperAdmin) return
|
||||
|
||||
setLoading(true)
|
||||
analyticsApi
|
||||
.getTeamAnalytics(period)
|
||||
.then(setData)
|
||||
.catch(console.error)
|
||||
.finally(() => setLoading(false))
|
||||
}, [period, isAccountOwner, isSuperAdmin])
|
||||
|
||||
// Permission guard
|
||||
if (!isAccountOwner && !isSuperAdmin) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-[60vh] gap-4 p-6">
|
||||
<ShieldX size={48} className="text-muted-foreground" />
|
||||
<h2 className="text-xl font-semibold text-foreground">Access Denied</h2>
|
||||
<p className="text-muted-foreground text-center max-w-md">
|
||||
Team Analytics is only available to account owners and administrators.
|
||||
You can view your personal stats instead.
|
||||
</p>
|
||||
<Link
|
||||
to="/analytics/me"
|
||||
className="mt-2 inline-flex items-center gap-2 rounded-lg bg-white text-black px-4 py-2 text-sm font-medium hover:bg-white/90 transition-colors"
|
||||
>
|
||||
<TrendingUp size={16} />
|
||||
View My Stats
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[60vh]">
|
||||
<Loader2 size={32} className="animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[60vh]">
|
||||
<p className="text-muted-foreground">Failed to load analytics data.</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const { summary, time_series, top_flows, top_engineers } = data
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6 max-w-7xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<span title="Team Analytics">
|
||||
<BarChart3 size={24} className="text-foreground" />
|
||||
</span>
|
||||
<h1 className="text-2xl font-bold text-foreground">Team Analytics</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<Link
|
||||
to="/analytics/me"
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
My Stats
|
||||
</Link>
|
||||
<select
|
||||
value={period}
|
||||
onChange={(e) => setPeriod(e.target.value as AnalyticsPeriod)}
|
||||
className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-ring"
|
||||
>
|
||||
{PERIOD_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stat Cards */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<StatCard
|
||||
icon={TrendingUp}
|
||||
label="Total Sessions"
|
||||
value={summary.total_sessions.toLocaleString()}
|
||||
/>
|
||||
<StatCard
|
||||
icon={Target}
|
||||
label="Completion Rate"
|
||||
value={`${(summary.completion_rate * 100).toFixed(1)}%`}
|
||||
/>
|
||||
<StatCard
|
||||
icon={Clock}
|
||||
label="Median Duration"
|
||||
value={`${summary.median_duration_minutes} min`}
|
||||
/>
|
||||
<StatCard
|
||||
icon={Users}
|
||||
label="Active Engineers"
|
||||
value={summary.active_engineers.toLocaleString()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Area Chart — Sessions over Time */}
|
||||
<div className="bg-card border border-border rounded-xl p-6">
|
||||
<h2 className="text-sm font-semibold text-foreground mb-4">
|
||||
Sessions Over Time
|
||||
</h2>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<AreaChart data={time_series}>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
stroke="hsl(var(--border))"
|
||||
vertical={false}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
|
||||
tickLine={false}
|
||||
axisLine={{ stroke: 'hsl(var(--border))' }}
|
||||
tickFormatter={(value: string) => {
|
||||
const d = new Date(value)
|
||||
return `${d.getMonth() + 1}/${d.getDate()}`
|
||||
}}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
allowDecimals={false}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: 'hsl(var(--card))',
|
||||
border: '1px solid hsl(var(--border))',
|
||||
borderRadius: '8px',
|
||||
color: 'hsl(var(--foreground))',
|
||||
fontSize: '13px',
|
||||
}}
|
||||
labelFormatter={(value) => {
|
||||
const d = new Date(String(value))
|
||||
return d.toLocaleDateString(undefined, {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="resolved"
|
||||
stackId="1"
|
||||
stroke={CHART_COLORS.resolved}
|
||||
fill={CHART_COLORS.resolved}
|
||||
fillOpacity={0.3}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="escalated"
|
||||
stackId="1"
|
||||
stroke={CHART_COLORS.escalated}
|
||||
fill={CHART_COLORS.escalated}
|
||||
fillOpacity={0.3}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="workaround"
|
||||
stackId="1"
|
||||
stroke={CHART_COLORS.workaround}
|
||||
fill={CHART_COLORS.workaround}
|
||||
fillOpacity={0.3}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="unresolved"
|
||||
stackId="1"
|
||||
stroke={CHART_COLORS.unresolved}
|
||||
fill={CHART_COLORS.unresolved}
|
||||
fillOpacity={0.3}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
|
||||
{/* Chart legend */}
|
||||
<div className="flex items-center gap-6 mt-3 justify-center">
|
||||
{Object.entries(CHART_COLORS).map(([key, color]) => (
|
||||
<div key={key} className="flex items-center gap-1.5">
|
||||
<div
|
||||
className="h-2.5 w-2.5 rounded-full"
|
||||
style={{ backgroundColor: color }}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground capitalize">
|
||||
{key}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Two-Column: Top Flows & Top Engineers */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Top Flows */}
|
||||
<div className="bg-card border border-border rounded-xl p-6">
|
||||
<h2 className="text-sm font-semibold text-foreground mb-4">
|
||||
Top Flows
|
||||
</h2>
|
||||
{top_flows.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No flow data for this period.</p>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-border">
|
||||
<th className="text-left py-2 text-foreground font-medium">
|
||||
Name
|
||||
</th>
|
||||
<th className="text-right py-2 text-foreground font-medium">
|
||||
Sessions
|
||||
</th>
|
||||
<th className="text-right py-2 text-foreground font-medium">
|
||||
Completion
|
||||
</th>
|
||||
<th className="text-right py-2 text-foreground font-medium">
|
||||
Median
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{top_flows.map((flow) => (
|
||||
<tr
|
||||
key={flow.tree_id}
|
||||
className="border-b border-border last:border-0"
|
||||
>
|
||||
<td className="py-2 text-muted-foreground truncate max-w-[200px]">
|
||||
{flow.name}
|
||||
</td>
|
||||
<td className="py-2 text-right text-muted-foreground">
|
||||
{flow.sessions}
|
||||
</td>
|
||||
<td className="py-2 text-right text-muted-foreground">
|
||||
{(flow.completion_rate * 100).toFixed(1)}%
|
||||
</td>
|
||||
<td className="py-2 text-right text-muted-foreground">
|
||||
{flow.median_duration_minutes} min
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Top Engineers */}
|
||||
<div className="bg-card border border-border rounded-xl p-6">
|
||||
<h2 className="text-sm font-semibold text-foreground mb-4">
|
||||
Top Engineers
|
||||
</h2>
|
||||
{top_engineers.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No engineer data for this period.</p>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-border">
|
||||
<th className="text-left py-2 text-foreground font-medium">
|
||||
Name
|
||||
</th>
|
||||
<th className="text-right py-2 text-foreground font-medium">
|
||||
Sessions
|
||||
</th>
|
||||
<th className="text-right py-2 text-foreground font-medium">
|
||||
Completion
|
||||
</th>
|
||||
<th className="text-right py-2 text-foreground font-medium">
|
||||
Median
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{top_engineers.map((eng) => (
|
||||
<tr
|
||||
key={eng.user_id}
|
||||
className="border-b border-border last:border-0"
|
||||
>
|
||||
<td className="py-2 text-muted-foreground truncate max-w-[200px]">
|
||||
{eng.name}
|
||||
</td>
|
||||
<td className="py-2 text-right text-muted-foreground">
|
||||
{eng.sessions}
|
||||
</td>
|
||||
<td className="py-2 text-right text-muted-foreground">
|
||||
{(eng.completion_rate * 100).toFixed(1)}%
|
||||
</td>
|
||||
<td className="py-2 text-right text-muted-foreground">
|
||||
{eng.median_duration_minutes} min
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function StatCard({
|
||||
icon: Icon,
|
||||
label,
|
||||
value,
|
||||
}: {
|
||||
icon: React.ComponentType<{ size?: number; className?: string }>
|
||||
label: string
|
||||
value: string
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-card border border-border rounded-xl p-6">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Icon size={16} className="text-muted-foreground" />
|
||||
<span className="text-sm text-muted-foreground">{label}</span>
|
||||
</div>
|
||||
<p className="text-3xl font-bold text-foreground">{value}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { useParams, useNavigate, useBlocker } from 'react-router-dom'
|
||||
import { useStore } from 'zustand'
|
||||
import { Undo2, Redo2, Save, CheckCircle2, Monitor, FileText, Code2, LayoutList } from 'lucide-react'
|
||||
import { Undo2, Redo2, Save, CheckCircle2, Monitor, FileText, Code2, LayoutList, BarChart3 } from 'lucide-react'
|
||||
import { getMonacoEditor } from '@/components/tree-editor/code-mode'
|
||||
import { treesApi } from '@/api/trees'
|
||||
import { treeMarkdownApi } from '@/api/treeMarkdown'
|
||||
@@ -13,6 +13,7 @@ import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts'
|
||||
import { usePermissions } from '@/hooks/usePermissions'
|
||||
import { cn, safeGetItem } from '@/lib/utils'
|
||||
import { toast } from '@/lib/toast'
|
||||
import { FlowAnalyticsPanel } from '@/components/analytics/FlowAnalyticsPanel'
|
||||
|
||||
export function TreeEditorPage() {
|
||||
const { id } = useParams<{ id: string }>()
|
||||
@@ -46,6 +47,7 @@ export function TreeEditorPage() {
|
||||
|
||||
const [showDraftPrompt, setShowDraftPrompt] = useState(false)
|
||||
const [treeStatus, setTreeStatus] = useState<TreeStatus>('draft')
|
||||
const [showAnalytics, setShowAnalytics] = useState(false)
|
||||
|
||||
// Mobile detection
|
||||
const [isMobile, setIsMobile] = useState(false)
|
||||
@@ -538,6 +540,23 @@ export function TreeEditorPage() {
|
||||
|
||||
<div className="mx-2 h-6 w-px bg-border" />
|
||||
|
||||
{/* Analytics toggle (only for existing trees) */}
|
||||
{isEditMode && (
|
||||
<button
|
||||
onClick={() => setShowAnalytics(!showAnalytics)}
|
||||
title="Toggle flow analytics panel"
|
||||
className={cn(
|
||||
'flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium transition-colors',
|
||||
showAnalytics
|
||||
? 'bg-accent text-foreground'
|
||||
: 'bg-card text-muted-foreground hover:bg-accent hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
<BarChart3 className="h-4 w-4" />
|
||||
Analytics
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Validate */}
|
||||
<button
|
||||
onClick={handleManualValidate}
|
||||
@@ -594,6 +613,13 @@ export function TreeEditorPage() {
|
||||
|
||||
{/* Main Editor */}
|
||||
<TreeEditorLayout isMobile={isMobile} />
|
||||
|
||||
{/* Flow Analytics Panel (collapsible) */}
|
||||
{showAnalytics && id && (
|
||||
<div className="border-t border-border p-6 overflow-y-auto max-h-[50vh]">
|
||||
<FlowAnalyticsPanel treeId={id} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -14,6 +14,8 @@ import { Plus, CheckCircle, ArrowRight, Clock, Terminal, Clipboard, Check, Copy,
|
||||
import { toast } from '@/lib/toast'
|
||||
import { Modal } from '@/components/common/Modal'
|
||||
import { ShareSessionModal } from '@/components/session/ShareSessionModal'
|
||||
import { CSATModal, hasBeenRated } from '@/components/session/CSATModal'
|
||||
import { StepFeedback } from '@/components/session/StepFeedback'
|
||||
import { buildSessionShareUrl, getLatestActiveShareForSession } from '@/lib/sessionShare'
|
||||
|
||||
interface LocationState {
|
||||
@@ -52,6 +54,7 @@ export function TreeNavigationPage() {
|
||||
const [isCopyingForTicket, setIsCopyingForTicket] = useState(false)
|
||||
const [showSharePopover, setShowSharePopover] = useState(false)
|
||||
const [showShareModal, setShowShareModal] = useState(false)
|
||||
const [showCsatModal, setShowCsatModal] = useState(false)
|
||||
const [copiedShareLink, setCopiedShareLink] = useState(false)
|
||||
const [isCopyingShareLink, setIsCopyingShareLink] = useState(false)
|
||||
const sharePopoverRef = useRef<HTMLDivElement>(null)
|
||||
@@ -195,6 +198,13 @@ export function TreeNavigationPage() {
|
||||
setCompletionSource('standard')
|
||||
}
|
||||
|
||||
const handleCsatClose = () => {
|
||||
setShowCsatModal(false)
|
||||
if (session) {
|
||||
navigate(`/sessions/${session.id}`)
|
||||
}
|
||||
}
|
||||
|
||||
// Custom step flow (creation, post-step actions, continuation, branching, forking)
|
||||
const customStepFlow = useCustomStepFlow({
|
||||
tree,
|
||||
@@ -450,6 +460,8 @@ export function TreeNavigationPage() {
|
||||
setPendingCompletionDecision(null)
|
||||
if (completionSource === 'custom' && customStepFlow.customSteps.length > 0) {
|
||||
customStepFlow.setShowForkModal(true)
|
||||
} else if (!hasBeenRated(session.id)) {
|
||||
setShowCsatModal(true)
|
||||
} else {
|
||||
navigate(`/sessions/${session.id}`)
|
||||
}
|
||||
@@ -1089,6 +1101,13 @@ export function TreeNavigationPage() {
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Step Feedback */}
|
||||
{session && (currentNode || currentCustomStep) && (
|
||||
<div className="mt-3 flex justify-end border-t border-border pt-3">
|
||||
<StepFeedback stepId={currentCustomStep?.id || currentNodeId} sessionId={session.id} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Notes */}
|
||||
<div className="mt-6 border-t border-border pt-4">
|
||||
<label className="block text-sm font-medium text-foreground">
|
||||
@@ -1180,6 +1199,14 @@ export function TreeNavigationPage() {
|
||||
isSubmitting={isCompleting}
|
||||
/>
|
||||
|
||||
{session && (
|
||||
<CSATModal
|
||||
isOpen={showCsatModal}
|
||||
onClose={handleCsatClose}
|
||||
sessionId={session.id}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Keyboard Shortcuts Modal */}
|
||||
<Modal
|
||||
isOpen={shortcutsModalOpen}
|
||||
|
||||
@@ -27,6 +27,8 @@ const ProceduralNavigationPage = lazy(() => import('@/pages/ProceduralNavigation
|
||||
const SessionHistoryPage = lazy(() => import('@/pages/SessionHistoryPage'))
|
||||
const SessionDetailPage = lazy(() => import('@/pages/SessionDetailPage'))
|
||||
const MySharesPage = lazy(() => import('@/pages/MySharesPage'))
|
||||
const TeamAnalyticsPage = lazy(() => import('@/pages/TeamAnalyticsPage'))
|
||||
const MyAnalyticsPage = lazy(() => import('@/pages/MyAnalyticsPage'))
|
||||
const AccountSettingsPage = lazy(() => import('@/pages/AccountSettingsPage'))
|
||||
// Admin pages
|
||||
const AdminLayout = lazy(() => import('@/components/admin/AdminLayout'))
|
||||
@@ -198,6 +200,22 @@ export const router = createBrowserRouter([
|
||||
</Suspense>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: 'analytics',
|
||||
element: (
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<TeamAnalyticsPage />
|
||||
</Suspense>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: 'analytics/me',
|
||||
element: (
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<MyAnalyticsPage />
|
||||
</Suspense>
|
||||
),
|
||||
},
|
||||
// Admin routes
|
||||
{
|
||||
path: 'admin',
|
||||
|
||||
82
frontend/src/types/analytics.ts
Normal file
82
frontend/src/types/analytics.ts
Normal file
@@ -0,0 +1,82 @@
|
||||
export interface OutcomeBreakdown {
|
||||
resolved: number
|
||||
escalated: number
|
||||
workaround: number
|
||||
unresolved: number
|
||||
}
|
||||
|
||||
export interface AnalyticsSummary {
|
||||
total_sessions: number
|
||||
completed_sessions: number
|
||||
completion_rate: number
|
||||
median_duration_minutes: number
|
||||
active_engineers: number
|
||||
outcome_breakdown: OutcomeBreakdown
|
||||
}
|
||||
|
||||
export interface TimeSeriesPoint {
|
||||
date: string
|
||||
sessions: number
|
||||
resolved: number
|
||||
escalated: number
|
||||
workaround: number
|
||||
unresolved: number
|
||||
}
|
||||
|
||||
export interface TopFlow {
|
||||
tree_id: string
|
||||
name: string
|
||||
sessions: number
|
||||
completion_rate: number
|
||||
median_duration_minutes: number
|
||||
avg_csat?: number
|
||||
}
|
||||
|
||||
export interface TopEngineer {
|
||||
user_id: string
|
||||
name: string
|
||||
sessions: number
|
||||
completion_rate: number
|
||||
median_duration_minutes: number
|
||||
}
|
||||
|
||||
export interface TeamAnalyticsResponse {
|
||||
summary: AnalyticsSummary
|
||||
time_series: TimeSeriesPoint[]
|
||||
top_flows: TopFlow[]
|
||||
top_engineers: TopEngineer[]
|
||||
}
|
||||
|
||||
export interface PersonalAnalyticsResponse {
|
||||
summary: AnalyticsSummary
|
||||
time_series: TimeSeriesPoint[]
|
||||
top_flows: TopFlow[]
|
||||
}
|
||||
|
||||
export interface StepFeedbackSummary {
|
||||
node_id: string
|
||||
node_title: string
|
||||
helpful_yes: number
|
||||
helpful_no: number
|
||||
helpful_rate: number
|
||||
visit_count: number
|
||||
dropoff_count: number
|
||||
dropoff_rate: number
|
||||
}
|
||||
|
||||
export interface FlowRatingItem {
|
||||
rating: number
|
||||
comment?: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export interface FlowAnalyticsResponse {
|
||||
summary: AnalyticsSummary
|
||||
avg_csat?: number
|
||||
total_ratings: number
|
||||
time_series: TimeSeriesPoint[]
|
||||
step_feedback: StepFeedbackSummary[]
|
||||
recent_comments: FlowRatingItem[]
|
||||
}
|
||||
|
||||
export type AnalyticsPeriod = '7d' | '30d' | '90d'
|
||||
@@ -9,6 +9,7 @@ export * from './folder'
|
||||
export * from './step'
|
||||
export type { Account, Subscription, PlanLimits, SubscriptionDetails, AccountInvite, AccountMember } from './account'
|
||||
export * from './admin'
|
||||
export * from './analytics'
|
||||
|
||||
// API response wrapper types
|
||||
export interface PaginatedResponse<T> {
|
||||
|
||||
Reference in New Issue
Block a user