add assignment v2 UI

app/javascript/dashboard/store/modules/assignmentMetrics/actions.js

@@ -0,0 +1,137 @@
+import assignmentMetricsAPI from '../../../api/assignmentMetrics';
+
+export const actions = {
+  getMetrics: async ({ commit, state }) => {
+    commit('setUIFlag', { isFetching: true });
+    try {
+      const response = await assignmentMetricsAPI.get(state.filters);
+      commit('setOverviewMetrics', response.data.overview || {});
+      commit('setAssignmentTrends', response.data.trends || []);
+    } catch (error) {
+      throw new Error(error);
+    } finally {
+      commit('setUIFlag', { isFetching: false });
+    }
+  },
+
+  getAgentHistory: async ({ commit, state }) => {
+    commit('setUIFlag', { isFetchingHistory: true });
+    try {
+      const response = await assignmentMetricsAPI.getAllAgentsHistory(
+        state.filters
+      );
+      commit('setAgentHistory', response.data.agent_history || []);
+    } catch (error) {
+      throw new Error(error);
+    } finally {
+      commit('setUIFlag', { isFetchingHistory: false });
+    }
+  },
+
+  getAgentHistoryById: async ({ commit, state }, userId) => {
+    commit('setUIFlag', { isFetchingHistory: true });
+    try {
+      const response = await assignmentMetricsAPI.getAgentHistory(
+        userId,
+        state.filters
+      );
+      return response.data;
+    } catch (error) {
+      throw new Error(error);
+    } finally {
+      commit('setUIFlag', { isFetchingHistory: false });
+    }
+  },
+
+  getPolicyPerformance: async ({ commit, state }) => {
+    commit('setUIFlag', { isFetchingPerformance: true });
+    try {
+      const response = await assignmentMetricsAPI.getPolicyPerformance(
+        state.filters
+      );
+      commit('setPolicyPerformance', response.data.policy_performance || []);
+    } catch (error) {
+      throw new Error(error);
+    } finally {
+      commit('setUIFlag', { isFetchingPerformance: false });
+    }
+  },
+
+  getAgentUtilization: async ({ commit, state }) => {
+    commit('setUIFlag', { isFetchingUtilization: true });
+    try {
+      const response = await assignmentMetricsAPI.getAgentUtilization(
+        state.filters
+      );
+      commit('setAgentUtilization', response.data.agent_utilization || []);
+    } catch (error) {
+      throw new Error(error);
+    } finally {
+      commit('setUIFlag', { isFetchingUtilization: false });
+    }
+  },
+
+  getAssignmentDistribution: async ({ commit, state }) => {
+    commit('setUIFlag', { isFetchingDistribution: true });
+    try {
+      const response = await assignmentMetricsAPI.get(state.filters);
+      commit(
+        'setAssignmentDistribution',
+        response.data.assignment_distribution || {}
+      );
+    } catch (error) {
+      throw new Error(error);
+    } finally {
+      commit('setUIFlag', { isFetchingDistribution: false });
+    }
+  },
+
+  exportReport: async ({ commit, state }, type) => {
+    commit('setUIFlag', { isExporting: true });
+    try {
+      const response = await assignmentMetricsAPI.exportReport(
+        type,
+        state.filters
+      );
+
+      // Create download link
+      const url = window.URL.createObjectURL(new Blob([response.data]));
+      const link = document.createElement('a');
+      link.href = url;
+      link.setAttribute(
+        'download',
+        `assignment-${type}-report-${Date.now()}.csv`
+      );
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+      window.URL.revokeObjectURL(url);
+
+      return true;
+    } catch (error) {
+      throw new Error(error);
+    } finally {
+      commit('setUIFlag', { isExporting: false });
+    }
+  },
+
+  setFilters: ({ commit, dispatch }, filters) => {
+    commit('setFilters', filters);
+    // Refresh all data with new filters
+    dispatch('getMetrics');
+    dispatch('getAgentHistory');
+    dispatch('getPolicyPerformance');
+    dispatch('getAgentUtilization');
+    dispatch('getAssignmentDistribution');
+  },
+
+  refreshAllMetrics: ({ dispatch }) => {
+    return Promise.all([
+      dispatch('getMetrics'),
+      dispatch('getAgentHistory'),
+      dispatch('getPolicyPerformance'),
+      dispatch('getAgentUtilization'),
+      dispatch('getAssignmentDistribution'),
+    ]);
+  },
+};

app/javascript/dashboard/store/modules/assignmentMetrics/getters.js

@@ -0,0 +1,62 @@
+export const getters = {
+  getMetrics: state => state.metrics,
+  getOverviewMetrics: state => state.metrics.overview,
+  getAgentHistory: state => state.metrics.agentHistory,
+  getPolicyPerformance: state => state.metrics.policyPerformance,
+  getAgentUtilization: state => state.metrics.agentUtilization,
+  getAssignmentDistribution: state => state.metrics.assignmentDistribution,
+  getAssignmentTrends: state => state.metrics.assignmentTrends,
+  getFilters: state => state.filters,
+  getUIFlags: state => state.uiFlags,
+
+  getTopPerformingAgents: state => {
+    return [...state.metrics.agentHistory]
+      .sort((a, b) => b.assignments_handled - a.assignments_handled)
+      .slice(0, 5);
+  },
+
+  getTopPerformingPolicies: state => {
+    return [...state.metrics.policyPerformance]
+      .sort((a, b) => b.success_rate - a.success_rate)
+      .slice(0, 5);
+  },
+
+  getAverageUtilization: state => {
+    const utilization = state.metrics.agentUtilization;
+    if (!utilization.length) return 0;
+
+    const totalUtilization = utilization.reduce(
+      (sum, agent) => sum + agent.utilization_percentage,
+      0
+    );
+    return (totalUtilization / utilization.length).toFixed(2);
+  },
+
+  getCalculatedTrends: state => {
+    const history = state.metrics.agentHistory;
+    if (!history.length) return [];
+
+    // Group by date and calculate trends
+    const trendMap = {};
+    history.forEach(entry => {
+      const date = entry.date;
+      if (!trendMap[date]) {
+        trendMap[date] = {
+          date,
+          total_assignments: 0,
+          avg_response_time: 0,
+          count: 0,
+        };
+      }
+      trendMap[date].total_assignments += entry.assignments_handled;
+      trendMap[date].avg_response_time += entry.avg_response_time;
+      trendMap[date].count += 1;
+    });
+
+    return Object.values(trendMap).map(trend => ({
+      date: trend.date,
+      total_assignments: trend.total_assignments,
+      avg_response_time: trend.avg_response_time / trend.count,
+    }));
+  },
+};

app/javascript/dashboard/store/modules/assignmentMetrics/index.js

@@ -0,0 +1,37 @@
+import { getters } from './getters';
+import { actions } from './actions';
+import { mutations } from './mutations';
+
+const state = {
+  metrics: {
+    overview: {},
+    agentHistory: [],
+    policyPerformance: [],
+    agentUtilization: [],
+    assignmentDistribution: {},
+    assignmentTrends: [],
+  },
+  filters: {
+    startDate: null,
+    endDate: null,
+    agentIds: [],
+    policyIds: [],
+    groupBy: 'day',
+  },
+  uiFlags: {
+    isFetching: false,
+    isFetchingHistory: false,
+    isFetchingPerformance: false,
+    isFetchingUtilization: false,
+    isFetchingDistribution: false,
+    isExporting: false,
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};

app/javascript/dashboard/store/modules/assignmentMetrics/mutations.js

@@ -0,0 +1,39 @@
+export const mutations = {
+  setUIFlag(state, data) {
+    state.uiFlags = {
+      ...state.uiFlags,
+      ...data,
+    };
+  },
+
+  setFilters(state, filters) {
+    state.filters = {
+      ...state.filters,
+      ...filters,
+    };
+  },
+
+  setOverviewMetrics(state, metrics) {
+    state.metrics.overview = metrics;
+  },
+
+  setAgentHistory(state, history) {
+    state.metrics.agentHistory = history;
+  },
+
+  setPolicyPerformance(state, performance) {
+    state.metrics.policyPerformance = performance;
+  },
+
+  setAgentUtilization(state, utilization) {
+    state.metrics.agentUtilization = utilization;
+  },
+
+  setAssignmentDistribution(state, distribution) {
+    state.metrics.assignmentDistribution = distribution;
+  },
+
+  setAssignmentTrends(state, trends) {
+    state.metrics.assignmentTrends = trends;
+  },
+};