(self["webpackChunkapp"] = self["webpackChunkapp"] || []).push([["src_app_pages_home_home_module_ts"],{

/***/ 10935:
/*!***************************************************!*\
  !*** ./src/app/pages/home/home-routing.module.ts ***!
  \***************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   HomePageRoutingModule: () => (/* binding */ HomePageRoutingModule)
/* harmony export */ });
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! tslib */ 24398);
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @angular/core */ 37580);
/* harmony import */ var _angular_router__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @angular/router */ 95072);
/* harmony import */ var _home_page__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./home.page */ 66393);




const routes = [{
  path: '',
  component: _home_page__WEBPACK_IMPORTED_MODULE_0__.HomePage
}];
let HomePageRoutingModule = class HomePageRoutingModule {};
HomePageRoutingModule = (0,tslib__WEBPACK_IMPORTED_MODULE_1__.__decorate)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_2__.NgModule)({
  imports: [_angular_router__WEBPACK_IMPORTED_MODULE_3__.RouterModule.forChild(routes)],
  exports: [_angular_router__WEBPACK_IMPORTED_MODULE_3__.RouterModule]
})], HomePageRoutingModule);


/***/ }),

/***/ 96998:
/*!*******************************************!*\
  !*** ./src/app/pages/home/home.module.ts ***!
  \*******************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   HomePageModule: () => (/* binding */ HomePageModule)
/* harmony export */ });
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! tslib */ 24398);
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @angular/core */ 37580);
/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @angular/common */ 60316);
/* harmony import */ var _ionic_angular__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @ionic/angular */ 21507);
/* harmony import */ var _angular_forms__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @angular/forms */ 34456);
/* harmony import */ var _home_page__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./home.page */ 66393);
/* harmony import */ var _home_routing_module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./home-routing.module */ 10935);
/* harmony import */ var src_app_components_shared_module__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! src/app/components/shared.module */ 47774);








let HomePageModule = class HomePageModule {};
HomePageModule = (0,tslib__WEBPACK_IMPORTED_MODULE_3__.__decorate)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_4__.NgModule)({
  imports: [_angular_common__WEBPACK_IMPORTED_MODULE_5__.CommonModule, _angular_forms__WEBPACK_IMPORTED_MODULE_6__.FormsModule, _angular_forms__WEBPACK_IMPORTED_MODULE_6__.ReactiveFormsModule, _ionic_angular__WEBPACK_IMPORTED_MODULE_7__.IonicModule, _home_routing_module__WEBPACK_IMPORTED_MODULE_1__.HomePageRoutingModule, src_app_components_shared_module__WEBPACK_IMPORTED_MODULE_2__.SharedModule],
  declarations: [_home_page__WEBPACK_IMPORTED_MODULE_0__.HomePage]
})], HomePageModule);


/***/ }),

/***/ 66393:
/*!*****************************************!*\
  !*** ./src/app/pages/home/home.page.ts ***!
  \*****************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   HomePage: () => (/* binding */ HomePage)
/* harmony export */ });
/* harmony import */ var _workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js */ 89204);
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! tslib */ 24398);
/* harmony import */ var _home_page_html_ngResource__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./home.page.html?ngResource */ 68395);
/* harmony import */ var _home_page_scss_ngResource__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./home.page.scss?ngResource */ 52743);
/* harmony import */ var _home_page_scss_ngResource__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_home_page_scss_ngResource__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var src_app_util_baseHelper__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! src/app/util/baseHelper */ 76434);
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @angular/core */ 37580);
/* harmony import */ var src_app_services_report_api_service__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! src/app/services/report_api.service */ 55763);
/* harmony import */ var _ionic_angular__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @ionic/angular */ 4059);
/* harmony import */ var src_app_services_connectivity_service__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! src/app/services/connectivity.service */ 65065);

var _HomePage;



/* eslint-disable @typescript-eslint/member-ordering */





let HomePage = (_HomePage = class HomePage {
  get loading() {
    if (this.isStoreKeeper) {
      return this.loadingStockReport;
    } else if (this.isSCManager) {
      return this.loadingSCDashboard;
    }
    return this.loadingDashboard;
  }
  ionViewDidEnter() {
    this.b.menuOpen();
  }
  constructor(b, reportApi, platform, connectivity) {
    var _this$user, _this$user2;
    this.b = b;
    this.reportApi = reportApi;
    this.platform = platform;
    this.connectivity = connectivity;
    this.menuConfig = [];
    this.filteredMenuConfig = [];
    this.isOnline = true;
    // Store keeper data
    this.stockReportData = [];
    this.dateRangeType = 'today';
    this.loadingStockReport = false;
    this.isStoreKeeper = false;
    this.isSCManager = false;
    // SC Manager data
    this.scStatistics = [];
    this.loadingSCDashboard = false;
    // Dashboard data (for all users except store keepers and SC managers)
    this.dashboardData = null;
    this.loadingDashboard = false;
    this.user = this.b.getCurrentUser();
    this.isStoreKeeper = ((_this$user = this.user) === null || _this$user === void 0 || (_this$user = _this$user.user) === null || _this$user === void 0 ? void 0 : _this$user.user_type) === 'Store Keeper';
    this.isSCManager = ((_this$user2 = this.user) === null || _this$user2 === void 0 || (_this$user2 = _this$user2.user) === null || _this$user2 === void 0 ? void 0 : _this$user2.user_type) === 'SC Manager';
    if (this.user && this.user.user) {
      this.menuConfig = this.b.getMenuConfig(this.user.user);
      this.filteredMenuConfig = [...this.menuConfig];
    } else {
      this.menuConfig = [];
      this.filteredMenuConfig = [];
    }
    // Set date range for all users
    this.setDateRange('today');
  }
  ngOnInit() {
    var _this = this;
    return (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
      _this.load();
      if (_this.isStoreKeeper) {
        yield _this.loadStorekeeperStockReport();
      } else if (_this.isSCManager) {
        yield _this.loadSCManagerDashboard();
      } else {
        yield _this.loadDashboard();
      }
      yield _this.setupNetworkListener();
    })();
  }
  load() {
    return (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {})();
  } // Previous user comparison logic removed
  cancel() {}
  refreshData() {
    var _this2 = this;
    return (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
      yield _this2.loadDashboard();
    })();
  }
  handleRefresh(event) {
    var _this3 = this;
    return (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
      try {
        if (_this3.isStoreKeeper) {
          yield _this3.loadStorekeeperStockReport();
        } else if (_this3.isSCManager) {
          yield _this3.loadSCManagerDashboard();
        } else {
          yield _this3.loadDashboard();
        }
      } catch (error) {} finally {
        event.target.complete();
      }
    })();
  }
  getCategoryRowClass(title) {
    return '';
  }
  setupNetworkListener() {
    var _this4 = this;
    return (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
      // Check if our target server is reachable
      _this4.isOnline = yield _this4.connectivity.checkServerConnectivity(false);
      // Initial menu update
      _this4.updateMenuBasedOnConnectivity();
      // Poll server connectivity periodically
      setInterval(/*#__PURE__*/(0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
        const previousStatus = _this4.isOnline;
        _this4.isOnline = yield _this4.connectivity.checkServerConnectivity(false);
        if (previousStatus !== _this4.isOnline) {
          _this4.updateMenuBasedOnConnectivity();
        }
      }), 30000); // Check every 30 seconds
    })();
  }
  updateMenuBasedOnConnectivity() {
    if (!this.menuConfig || this.menuConfig.length === 0) {
      this.filteredMenuConfig = [];
      return;
    }
    if (this.isOnline) {
      // Show all menu items when online
      this.filteredMenuConfig = [...this.menuConfig];
    } else {
      // Show only community assessments when offline
      this.filteredMenuConfig = this.menuConfig.filter(item => item.url === '/offline-survey-list');
    }
  }
  getTodayDateString() {
    return new Date().toISOString().split('T')[0];
  }
  setDateRange(type) {
    this.dateRangeType = type;
    const today = new Date();
    switch (type) {
      case 'today':
        this.reportStartDate = this.formatDate(today);
        this.reportEndDate = this.formatDate(today);
        break;
      case 'week':
        // Week runs from Sunday to today
        const currentDay = today.getDay(); // 0 = Sunday, 1 = Monday, ..., 6 = Saturday
        const sunday = new Date(today);
        sunday.setDate(today.getDate() - currentDay); // Go back to Sunday of current week
        this.reportStartDate = this.formatDate(sunday);
        this.reportEndDate = this.formatDate(today);
        break;
      case 'month':
        // This month: from 1st day of current month to today
        const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
        this.reportStartDate = this.formatDate(firstDayOfMonth);
        this.reportEndDate = this.formatDate(today);
        break;
      case '6months':
        // Last 6 months including current month: from 1st day of the month 5 months ago to today
        const fiveMonthsAgo = new Date(today);
        fiveMonthsAgo.setMonth(today.getMonth() - 5);
        const firstDayOf5MonthsAgo = new Date(fiveMonthsAgo.getFullYear(), fiveMonthsAgo.getMonth(), 1);
        this.reportStartDate = this.formatDate(firstDayOf5MonthsAgo);
        this.reportEndDate = this.formatDate(today);
        break;
      case 'year':
        // This year: from 1st January of current year to today
        const firstDayOfYear = new Date(today.getFullYear(), 0, 1);
        this.reportStartDate = this.formatDate(firstDayOfYear);
        this.reportEndDate = this.formatDate(today);
        break;
      case 'custom':
        // Don't auto-set dates for custom, let user select
        if (!this.reportStartDate) {
          this.reportStartDate = this.formatDate(today);
        }
        if (!this.reportEndDate) {
          this.reportEndDate = this.formatDate(today);
        }
        break;
    }
    // Auto-load report for non-custom selections
    if (type !== 'custom') {
      if (this.isStoreKeeper) {
        void this.loadStorekeeperStockReport();
      } else if (this.isSCManager) {
        void this.loadSCManagerDashboard();
      } else {
        void this.loadDashboard();
      }
    }
  }
  formatDate(date) {
    // Avoid timezone issues by formatting manually
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  }
  loadStorekeeperStockReport() {
    var _this5 = this;
    return (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
      if (!_this5.reportStartDate || !_this5.reportEndDate) {
        return;
      }
      try {
        _this5.loadingStockReport = true;
        const response = yield _this5.reportApi.getStorekeeperDailyStock(_this5.reportStartDate, _this5.reportEndDate);
        if (response !== null && response !== void 0 && response.success) {
          var _response$data;
          _this5.stockReportData = ((_response$data = response.data) === null || _response$data === void 0 ? void 0 : _response$data.stock_report) || [];
        } else {
          _this5.stockReportData = [];
        }
      } catch (error) {
        _this5.stockReportData = [];
      } finally {
        _this5.loadingStockReport = false;
      }
    })();
  }
  onDateRangeChange() {
    // When user manually changes dates, switch to custom mode
    this.dateRangeType = 'custom';
  }
  loadDashboard() {
    var _this6 = this;
    return (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
      if (!_this6.reportStartDate || !_this6.reportEndDate) {
        return;
      }
      try {
        _this6.loadingDashboard = true;
        const response = yield _this6.reportApi.getDashboard(_this6.reportStartDate, _this6.reportEndDate);
        if (response !== null && response !== void 0 && response.success) {
          _this6.dashboardData = response.data;
        } else {
          _this6.dashboardData = null;
        }
      } catch (error) {
        _this6.dashboardData = null;
      } finally {
        _this6.loadingDashboard = false;
      }
    })();
  }
  /**
   * Check if the current user should see measurement information
   * Only Measurer and Facility Supervisor roles can see this section
   */
  shouldShowMeasurementInfo() {
    if (!this.user || !this.user.user || !this.user.user.roles) {
      return false;
    }
    const allowedRoles = ['Measurer', 'Facility Supervisor'];
    // Check if user has any of the allowed roles
    return this.user.user.roles.some(role => allowedRoles.includes(role.title));
  }
  /**
   * Get measurement count by title from the measurement array
   */
  getMeasurementCount(title) {
    if (!this.dashboardData || !this.dashboardData.measurement || !Array.isArray(this.dashboardData.measurement)) {
      return 0;
    }
    const measurement = this.dashboardData.measurement.find(item => item.title === title);
    return measurement ? measurement.count : 0;
  }
  get measurementSummary() {
    return [{
      title: 'Total Measurement',
      key: 'Total Measurement',
      colorClass: 'measurement-total',
      icon: 'stats-chart-outline'
    }, {
      title: 'Boy',
      key: 'Boy',
      colorClass: 'measurement-boy',
      icon: 'male-outline'
    }, {
      title: 'Girl',
      key: 'Girl',
      colorClass: 'measurement-girl',
      icon: 'female-outline'
    }, {
      title: 'SAM Identified',
      key: 'SAM Identified',
      colorClass: 'measurement-sam',
      icon: 'flame-outline'
    }, {
      title: 'MAM Identified',
      key: 'MAM Identified',
      colorClass: 'measurement-mam',
      icon: 'medkit-outline'
    }, {
      title: 'Normal Case',
      key: 'Normal Case',
      colorClass: 'measurement-normal',
      icon: 'happy-outline'
    }, {
      title: 'Wasting (WFH < -2SD)',
      key: 'Wasting (WFH < -2SD)',
      colorClass: 'measurement-wasting',
      icon: 'fitness-outline'
    }, {
      title: 'Stunting (HAZ < -2SD)',
      key: 'Stunting (HAZ < -2SD)',
      colorClass: 'measurement-stunting',
      icon: 'accessibility-outline'
    }, {
      title: 'Underweight (WAZ < -2SD)',
      key: 'Underweight (WAZ < -2SD)',
      colorClass: 'measurement-underweight',
      icon: 'scale-outline'
    }];
  }
  /**
   * Check if the current user should see PBW measurement information
   * Only PBW - Point and Facility Supervisor roles can see this section
   */
  shouldShowPbwMeasurementInfo() {
    if (!this.user || !this.user.user || !this.user.user.roles) {
      return false;
    }
    const allowedRoles = ['PBW - Point', 'Facility Supervisor'];
    // Check if user has any of the allowed roles
    return this.user.user.roles.some(role => allowedRoles.includes(role.title));
  }
  /**
   * Get PBW measurement count by title from the pbw_measurement array
   */
  getPbwMeasurementCount(title) {
    if (!this.dashboardData || !this.dashboardData.pbw_measurement || !Array.isArray(this.dashboardData.pbw_measurement)) {
      return 0;
    }
    const measurement = this.dashboardData.pbw_measurement.find(item => item.title === title);
    return measurement ? measurement.count : 0;
  }
  get pbwMeasurementSummary() {
    return [{
      title: 'Total PBW Measurement',
      key: 'Total PBW Measurement',
      colorClass: 'measurement-total',
      icon: 'stats-chart-outline'
    }, {
      title: 'MUAC < 21 cm',
      key: 'MUAC < 21 cm',
      colorClass: 'measurement-sam',
      icon: 'alert-circle-outline'
    }, {
      title: 'MUAC 21 - 22.9 cm',
      key: 'MUAC 21 - 22.9 cm',
      colorClass: 'measurement-mam',
      icon: 'warning-outline'
    }, {
      title: 'MUAC ≥ 23 cm',
      key: 'MUAC ≥ 23 cm',
      colorClass: 'measurement-normal',
      icon: 'checkmark-circle-outline'
    }, {
      title: 'MAM Identified',
      key: 'MAM Identified',
      colorClass: 'measurement-mam',
      icon: 'medkit-outline'
    }, {
      title: 'Normal Case',
      key: 'Normal Case',
      colorClass: 'measurement-normal',
      icon: 'happy-outline'
    }];
  }
  get gmpTargets() {
    if (!this.dashboardData || !Array.isArray(this.dashboardData.gmp)) {
      return [];
    }
    return this.dashboardData.gmp;
  }
  getGmpAchievementPercent(row) {
    if (!row || !row.target) {
      return row !== null && row !== void 0 && row.achievement ? 100 : 0;
    }
    const percent = row.achievement / row.target * 100;
    return Math.max(0, Math.min(100, percent));
  }
  /**
   * Determine if user has access to the nurse dashboard card
   */
  canAccessNurseDashboard() {
    if (!this.user || !this.user.user || !this.user.user.roles) {
      return false;
    }
    const allowedRoles = ['Nurse', 'Facility Supervisor'];
    return this.user.user.roles.some(role => allowedRoles.includes(role.title));
  }
  /**
   * Nurse dashboard is only visible online for nurses and facility supervisors
   */
  shouldShowNurseDashboard() {
    return this.canAccessNurseDashboard() && this.isOnline;
  }
  /**
   * Nurse metrics that are simple counters (no breakdown)
   */
  get nurseSummaryMetrics() {
    if (!this.dashboardData || !Array.isArray(this.dashboardData.nurse)) {
      return [];
    }
    return this.dashboardData.nurse.filter(item => typeof (item === null || item === void 0 ? void 0 : item.count) === 'number' && (!item.breakdown || item.breakdown.length === 0));
  }
  filterNurseSummaryByKeyword(keyword) {
    if (!keyword) {
      return [];
    }
    const lowerKeyword = keyword.toLowerCase();
    return this.nurseSummaryMetrics.filter(item => ((item === null || item === void 0 ? void 0 : item.title) || '').toLowerCase().includes(lowerKeyword));
  }
  get nurseOtpSummaryMetrics() {
    return this.filterNurseSummaryByKeyword('otp');
  }
  get nurseTsfpSummaryMetrics() {
    return this.filterNurseSummaryByKeyword('tsfp');
  }
  get nurseOtherSummaryMetrics() {
    return this.nurseSummaryMetrics.filter(item => {
      const title = ((item === null || item === void 0 ? void 0 : item.title) || '').toLowerCase();
      return !title.includes('otp') && !title.includes('tsfp');
    });
  }
  /**
   * Nurse metrics with detailed breakdown arrays
   */
  get nurseBreakdownGroups() {
    if (!this.dashboardData || !Array.isArray(this.dashboardData.nurse)) {
      return [];
    }
    return this.dashboardData.nurse.filter(item => Array.isArray(item === null || item === void 0 ? void 0 : item.breakdown) && item.breakdown.length > 0);
  }
  filterBreakdownGroupsByKeyword(keyword) {
    if (!keyword) {
      return [];
    }
    const normalized = keyword.toLowerCase();
    return this.nurseBreakdownGroups.filter(group => ((group === null || group === void 0 ? void 0 : group.title) || '').toLowerCase().includes(normalized));
  }
  get nurseOtpBreakdownGroups() {
    return this.filterBreakdownGroupsByKeyword('otp');
  }
  get nurseTsfpBreakdownGroups() {
    return this.filterBreakdownGroupsByKeyword('tsfp');
  }
  get nurseOtherBreakdownGroups() {
    const normalizedGroups = this.nurseBreakdownGroups;
    return normalizedGroups.filter(group => {
      const title = ((group === null || group === void 0 ? void 0 : group.title) || '').toLowerCase();
      return !title.includes('otp') && !title.includes('tsfp');
    });
  }
  /**
   * Sum the counts for a breakdown list
   */
  getNurseBreakdownTotal(breakdown) {
    if (!Array.isArray(breakdown)) {
      return 0;
    }
    return breakdown.reduce((total, current) => total + ((current === null || current === void 0 ? void 0 : current.count) || 0), 0);
  }
  /**
   * Provide contextual icons for nurse metrics
   */
  getNurseMetricIcon(title) {
    if (!title) {
      return 'medkit-outline';
    }
    const normalized = title.toLowerCase();
    if (normalized.includes('admission')) {
      return 'log-in-outline';
    }
    if (normalized.includes('discharge')) {
      return 'exit-outline';
    }
    if (normalized.includes('follow')) {
      return 'repeat-outline';
    }
    if (normalized.includes('in care')) {
      return 'people-outline';
    }
    if (normalized.includes('criteria')) {
      return 'list-circle-outline';
    }
    return 'medical-outline';
  }
  getNurseProgramClass(title) {
    if (!title) {
      return 'nurse-card-general';
    }
    const normalized = title.toLowerCase();
    if (normalized.includes('otp')) {
      return 'otp-card';
    }
    if (normalized.includes('tsfp')) {
      return 'tsfp-card';
    }
    return 'nurse-card-general';
  }
  trackByTitle(index, item) {
    return (item === null || item === void 0 ? void 0 : item.title) || index;
  }
  trackByKey(index, item) {
    return (item === null || item === void 0 ? void 0 : item.key) || index;
  }
  /**
   * IYCF Counselor visibility helpers
   */
  canAccessMiycnDashboard() {
    if (!this.user || !this.user.user || !this.user.user.roles) {
      return false;
    }
    const allowedRoles = ['IYCF-Counselor', 'Facility Supervisor'];
    return this.user.user.roles.some(role => allowedRoles.includes(role.title));
  }
  shouldShowMiycnDashboard() {
    return this.canAccessMiycnDashboard() && this.isOnline;
  }
  get miycnMetrics() {
    if (!this.dashboardData || !Array.isArray(this.dashboardData.miycn)) {
      return [];
    }
    return this.dashboardData.miycn;
  }
  hasMiycnMetrics() {
    return this.miycnMetrics.length > 0;
  }
  /**
   * PBW visibility helpers
   */
  canAccessPbwDashboard() {
    if (!this.user || !this.user.user || !this.user.user.roles) {
      return false;
    }
    const allowedRoles = ['PBW - Point', 'Facility Supervisor'];
    return this.user.user.roles.some(role => allowedRoles.includes(role.title));
  }
  shouldShowPbwDashboard() {
    return this.canAccessPbwDashboard() && this.isOnline;
  }
  get pbwMetrics() {
    if (!this.dashboardData || !Array.isArray(this.dashboardData.pbw)) {
      return [];
    }
    return this.dashboardData.pbw;
  }
  hasPbwMetrics() {
    return this.pbwMetrics.length > 0;
  }
  /**
   * PBW metrics that are simple counters (no breakdown)
   */
  get pbwSummaryMetrics() {
    return this.pbwMetrics.filter(item => typeof (item === null || item === void 0 ? void 0 : item.count) === 'number' && (!item.breakdown || item.breakdown.length === 0));
  }
  filterPbwSummaryByKeyword(keyword) {
    if (!keyword) {
      return [];
    }
    const lowerKeyword = keyword.toLowerCase();
    return this.pbwSummaryMetrics.filter(item => ((item === null || item === void 0 ? void 0 : item.title) || '').toLowerCase().includes(lowerKeyword));
  }
  get pbwBsfpSummaryMetrics() {
    return this.filterPbwSummaryByKeyword('bsfp');
  }
  get pbwTsfpSummaryMetrics() {
    return this.filterPbwSummaryByKeyword('tsfp');
  }
  get pbwOtherSummaryMetrics() {
    return this.pbwSummaryMetrics.filter(item => {
      const title = ((item === null || item === void 0 ? void 0 : item.title) || '').toLowerCase();
      return !title.includes('bsfp') && !title.includes('tsfp');
    });
  }
  /**
   * PBW metrics with detailed breakdown arrays
   */
  get pbwBreakdownGroups() {
    return this.pbwMetrics.filter(item => Array.isArray(item === null || item === void 0 ? void 0 : item.breakdown) && item.breakdown.length > 0);
  }
  filterPbwBreakdownGroupsByKeyword(keyword) {
    if (!keyword) {
      return [];
    }
    const normalized = keyword.toLowerCase();
    return this.pbwBreakdownGroups.filter(group => ((group === null || group === void 0 ? void 0 : group.title) || '').toLowerCase().includes(normalized));
  }
  get pbwBsfpBreakdownGroups() {
    return this.filterPbwBreakdownGroupsByKeyword('bsfp');
  }
  get pbwTsfpBreakdownGroups() {
    return this.filterPbwBreakdownGroupsByKeyword('tsfp');
  }
  get pbwOtherBreakdownGroups() {
    const normalizedGroups = this.pbwBreakdownGroups;
    return normalizedGroups.filter(group => {
      const title = ((group === null || group === void 0 ? void 0 : group.title) || '').toLowerCase();
      return !title.includes('bsfp') && !title.includes('tsfp');
    });
  }
  /**
   * Sum the counts for a PBW breakdown list
   */
  getPbwBreakdownTotal(breakdown) {
    if (!Array.isArray(breakdown)) {
      return 0;
    }
    return breakdown.reduce((total, current) => total + ((current === null || current === void 0 ? void 0 : current.count) || 0), 0);
  }
  /**
   * Provide contextual icons for PBW metrics
   */
  getPbwMetricIcon(title) {
    if (!title) {
      return 'woman-outline';
    }
    const normalized = title.toLowerCase();
    if (normalized.includes('admission')) {
      return 'log-in-outline';
    }
    if (normalized.includes('discharge')) {
      return 'exit-outline';
    }
    if (normalized.includes('follow')) {
      return 'repeat-outline';
    }
    if (normalized.includes('in care')) {
      return 'people-outline';
    }
    if (normalized.includes('criteria')) {
      return 'list-circle-outline';
    }
    return 'heart-outline';
  }
  getPbwProgramClass(title) {
    if (!title) {
      return 'pbw-card-general';
    }
    const normalized = title.toLowerCase();
    if (normalized.includes('bsfp')) {
      return 'bsfp-card';
    }
    if (normalized.includes('tsfp')) {
      return 'tsfp-card';
    }
    return 'pbw-card-general';
  }
  /**
   * Check if the current user should see disability information
   * Only Facility Supervisor role can see this section
   */
  shouldShowDisabilityInfo() {
    if (!this.user || !this.user.user || !this.user.user.roles) {
      return false;
    }
    return this.user.user.roles.some(role => role.title === 'Facility Supervisor');
  }
  /**
   * Get disability information metrics
   */
  get disabilityMetrics() {
    if (!this.dashboardData || !this.dashboardData.disability) {
      return [];
    }
    return [{
      title: 'Child with Disability',
      count: this.dashboardData.disability.child || 0,
      icon: 'people-outline',
      colorClass: 'disability-child'
    }, {
      title: 'PLW with Disability',
      count: this.dashboardData.disability.plw || 0,
      icon: 'woman-outline',
      colorClass: 'disability-plw'
    }];
  }
  hasDisabilityData() {
    return this.disabilityMetrics.length > 0 && this.disabilityMetrics.some(metric => metric.count > 0);
  }
  /**
   * Check if the current user should see general information
   * Only Facility Supervisor role can see this section
   */
  shouldShowGeneralInfo() {
    if (!this.user || !this.user.user || !this.user.user.roles) {
      return false;
    }
    return this.user.user.roles.some(role => role.title === 'Facility Supervisor');
  }
  /**
   * Check if the current user should see distribution summary
   * Only Distributor role can see this section
   */
  shouldShowDistribution() {
    if (!this.user || !this.user.user || !this.user.user.roles) {
      return false;
    }
    const allowedRoles = ['Distributor', 'Facility Supervisor'];
    // Check if user has any of the allowed roles
    return this.user.user.roles.some(role => allowedRoles.includes(role.title));
  }
  loadSCManagerDashboard() {
    var _this7 = this;
    return (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
      if (!_this7.reportStartDate || !_this7.reportEndDate) {
        return;
      }
      try {
        _this7.loadingSCDashboard = true;
        const response = yield _this7.reportApi.getSCManagerDashboard(_this7.reportStartDate, _this7.reportEndDate);
        if (response !== null && response !== void 0 && response.success) {
          var _response$data2;
          _this7.scStatistics = ((_response$data2 = response.data) === null || _response$data2 === void 0 ? void 0 : _response$data2.statistics) || [];
        } else {
          _this7.scStatistics = [];
        }
      } catch (error) {
        _this7.scStatistics = [];
      } finally {
        _this7.loadingSCDashboard = false;
      }
    })();
  }
}, _HomePage.ctorParameters = () => [{
  type: src_app_util_baseHelper__WEBPACK_IMPORTED_MODULE_3__.BaseHelper
}, {
  type: src_app_services_report_api_service__WEBPACK_IMPORTED_MODULE_4__.ReportAPIService
}, {
  type: _ionic_angular__WEBPACK_IMPORTED_MODULE_6__.Platform
}, {
  type: src_app_services_connectivity_service__WEBPACK_IMPORTED_MODULE_5__.ConnectivityService
}], _HomePage);
HomePage = (0,tslib__WEBPACK_IMPORTED_MODULE_7__.__decorate)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_8__.Component)({
  selector: 'app-home',
  template: _home_page_html_ngResource__WEBPACK_IMPORTED_MODULE_1__,
  styles: [(_home_page_scss_ngResource__WEBPACK_IMPORTED_MODULE_2___default())]
})], HomePage);


/***/ }),

/***/ 55763:
/*!************************************************!*\
  !*** ./src/app/services/report_api.service.ts ***!
  \************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   ReportAPIService: () => (/* binding */ ReportAPIService)
/* harmony export */ });
/* harmony import */ var _workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js */ 89204);
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! tslib */ 24398);
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @angular/core */ 37580);
/* harmony import */ var _api_base_service__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./api_base.service */ 70014);
/* harmony import */ var src_environments_environment__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! src/environments/environment */ 45312);
/* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! rxjs/operators */ 70271);
/* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! rxjs/operators */ 61318);


/* eslint-disable @typescript-eslint/naming-convention */




let ReportAPIService = class ReportAPIService extends _api_base_service__WEBPACK_IMPORTED_MODULE_1__.APIBaseService {
  constructor() {
    super(...arguments);
    this.namespace = 'report';
  }
  getDashboard(startDate, endDate) {
    var _this = this;
    return (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
      let url = `${src_environments_environment__WEBPACK_IMPORTED_MODULE_2__.domain}/${_this.namespace}/dashboard`;
      if (startDate && endDate) {
        url += `?start_date=${startDate}&end_date=${endDate}`;
      } else if (startDate) {
        // If only start date provided, use it for both
        url += `?start_date=${startDate}&end_date=${startDate}`;
      }
      const options = _this.getHeader();
      return _this.http.get(url, options).pipe((0,rxjs_operators__WEBPACK_IMPORTED_MODULE_3__.map)(results => results), (0,rxjs_operators__WEBPACK_IMPORTED_MODULE_4__.catchError)(error => _this.errorHandle(error))).toPromise();
    })();
  }
  getStorekeeperDailyStock(startDate, endDate) {
    var _this2 = this;
    return (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
      let url = `${src_environments_environment__WEBPACK_IMPORTED_MODULE_2__.domain}/${_this2.namespace}/storekeeper-daily-stock`;
      if (startDate && endDate) {
        url += `?start_date=${startDate}&end_date=${endDate}`;
      } else if (startDate) {
        // If only start date provided, use it for both
        url += `?start_date=${startDate}&end_date=${startDate}`;
      }
      const options = _this2.getHeader();
      return _this2.http.get(url, options).pipe((0,rxjs_operators__WEBPACK_IMPORTED_MODULE_3__.map)(results => results), (0,rxjs_operators__WEBPACK_IMPORTED_MODULE_4__.catchError)(error => _this2.errorHandle(error))).toPromise();
    })();
  }
  getSCManagerDashboard(startDate, endDate) {
    var _this3 = this;
    return (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
      let url = `${src_environments_environment__WEBPACK_IMPORTED_MODULE_2__.domain}/${_this3.namespace}/sc-manager-dashboard`;
      if (startDate && endDate) {
        url += `?start_date=${startDate}&end_date=${endDate}`;
      } else if (startDate) {
        // If only start date provided, use it for both
        url += `?start_date=${startDate}&end_date=${startDate}`;
      }
      const options = _this3.getHeader();
      return _this3.http.get(url, options).pipe((0,rxjs_operators__WEBPACK_IMPORTED_MODULE_3__.map)(results => results), (0,rxjs_operators__WEBPACK_IMPORTED_MODULE_4__.catchError)(error => _this3.errorHandle(error))).toPromise();
    })();
  }
};
ReportAPIService = (0,tslib__WEBPACK_IMPORTED_MODULE_5__.__decorate)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_6__.Injectable)({
  providedIn: 'root'
})], ReportAPIService);


/***/ }),

/***/ 52743:
/*!******************************************************!*\
  !*** ./src/app/pages/home/home.page.scss?ngResource ***!
  \******************************************************/
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

// Imports
var ___CSS_LOADER_API_SOURCEMAP_IMPORT___ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/sourceMaps.js */ 53142);
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ 35950);
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);
// Module
___CSS_LOADER_EXPORT___.push([module.id, `:host {
  --ion-color-light: #f8f9fa;
  --ion-color-primary: #3880ff;
  --ion-color-secondary: #eb5daa;
  --ion-color-tertiary: #7854e4;
  --ion-color-success: #39c0b0;
  --ion-color-warning: #ffce00;
  --ion-color-danger: #f04141;
  --ion-color-dark: #222428;
  --ion-color-purple: #a32e80;
  --card-border-radius: 16px;
  --card-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

ion-header ion-toolbar {
  --background: #ffffff;
  --border-width: 0;
}

ion-title {
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 18px;
}

.profile-container {
  margin-top: 16px;
}

.profile-card {
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-box-shadow);
  overflow: hidden;
}

.profile-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px;
}

.profile-info {
  flex: 1;
}

.username {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
}

.user-type {
  color: var(--ion-color-medium);
  margin: 0 0 8px;
  font-size: 14px;
}

.user-title {
  font-size: 16px;
  margin: 0 0 8px;
  font-weight: 600;
}

.profile-avatar {
  width: 70px;
  height: 95px;
  --border-radius: 15px;
  background: var(--ion-color-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  margin: 24px 0 12px;
  color: var(--ion-color-dark);
}

.stat-card {
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-box-shadow);
  margin: 0px 4px;
  height: 100%;
  min-height: 80px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.stat-content {
  display: flex;
  align-items: center;
  padding: 5px;
  height: 100%;
}

.stat-icon {
  font-size: 36px;
  margin-right: 16px;
  color: rgba(255, 255, 255, 0.9);
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stat-number {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 6px 0;
  color: white;
  line-height: 1;
}

.stat-label {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.3;
  font-weight: 500;
}

.menu-card {
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-box-shadow);
  margin: 0;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.menu-card:active {
  transform: scale(0.97);
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0px 0px;
  text-align: center;
  height: 100%;
}

.menu-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(var(--ion-color-primary-rgb), 0.1);
  margin-bottom: 12px;
}

.menu-icon-container ion-icon {
  font-size: 26px;
}

.menu-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}

/* Responsive Design */
@media (max-width: 576px) {
  .stat-card {
    margin: 4px 2px;
    min-height: 100px;
  }
  .stat-content {
    padding: 0px;
    flex-direction: column;
    text-align: center;
  }
  .stat-number {
    font-size: 22px;
  }
  .stat-label {
    font-size: 11px;
    line-height: 1.2;
  }
  .stat-icon {
    font-size: 24px;
    margin-right: 0;
    margin-bottom: 6px;
    min-width: auto;
  }
  .menu-icon-container {
    width: 48px;
    height: 48px;
  }
  .menu-icon-container ion-icon {
    font-size: 22px;
  }
}
/* Nurse Dashboard Styles */
.nurse-dashboard-card {
  margin-top: 1.5rem;
}

.nurse-online-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
}
.nurse-online-indicator ion-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  text-transform: uppercase;
}
.nurse-online-indicator span {
  color: var(--ion-color-medium);
  font-size: 0.85rem;
}

.nurse-summary-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.nurse-summary-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.nurse-program-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--ion-color-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.nurse-program-label ion-icon {
  font-size: 1.2rem;
}
.nurse-program-label.otp-label {
  color: var(--ion-color-danger);
}
.nurse-program-label.tsfp-label {
  color: var(--ion-color-warning);
}
.nurse-program-label.bsfp-label {
  color: var(--ion-color-success);
}

.nurse-breakdown-wrapper {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.nurse-breakdown-category {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.breakdown-group-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ion-color-dark);
}
.breakdown-group-label ion-icon {
  font-size: 1.2rem;
}
.breakdown-group-label.otp-label {
  color: var(--ion-color-danger);
}
.breakdown-group-label.tsfp-label {
  color: var(--ion-color-warning);
}
.breakdown-group-label.bsfp-label {
  color: var(--ion-color-success);
}

.nurse-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.nurse-summary-card {
  border-radius: 16px;
  padding: 16px;
  background: white;
  border: 1px solid rgba(var(--ion-color-primary-rgb), 0.15);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nurse-summary-card.otp-card {
  background: linear-gradient(135deg, rgba(240, 65, 65, 0.15), rgba(232, 88, 88, 0.35));
  border-color: rgba(var(--ion-color-danger-rgb), 0.4);
}
.nurse-summary-card.otp-card .summary-card-header ion-icon,
.nurse-summary-card.otp-card .summary-card-value {
  color: var(--ion-color-danger);
}
.nurse-summary-card.tsfp-card {
  background: linear-gradient(135deg, rgba(255, 206, 0, 0.2), rgba(255, 184, 0, 0.35));
  border-color: rgba(var(--ion-color-warning-rgb), 0.45);
}
.nurse-summary-card.tsfp-card .summary-card-header ion-icon,
.nurse-summary-card.tsfp-card .summary-card-value {
  color: var(--ion-color-warning);
}
.nurse-summary-card.bsfp-card {
  background: linear-gradient(135deg, rgba(57, 192, 176, 0.15), rgba(57, 192, 176, 0.3));
  border-color: rgba(var(--ion-color-success-rgb), 0.4);
}
.nurse-summary-card.bsfp-card .summary-card-header ion-icon,
.nurse-summary-card.bsfp-card .summary-card-value {
  color: var(--ion-color-success);
}
.nurse-summary-card.nurse-card-general, .nurse-summary-card.pbw-card-general {
  background: linear-gradient(135deg, rgba(120, 84, 228, 0.08), rgba(120, 84, 228, 0.2));
  border-color: rgba(var(--ion-color-tertiary-rgb), 0.4);
}
.nurse-summary-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.summary-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ion-color-dark);
}
.summary-card-header ion-icon {
  font-size: 22px;
  color: var(--ion-color-primary);
}

.summary-card-title {
  font-size: 0.95rem;
}

.summary-card-value {
  margin-top: 12px;
  font-size: 2rem;
  font-weight: 700;
  color: var(--ion-color-dark);
}

.nurse-breakdown-section {
  margin-top: 1.5rem;
}

.breakdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.breakdown-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  color: var(--ion-color-dark);
}
.breakdown-title ion-icon {
  font-size: 1.3rem;
}

.nurse-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.nurse-breakdown-card {
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 12px 14px;
  background: rgba(var(--ion-color-primary-rgb), 0.02);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.breakdown-label {
  font-size: 0.85rem;
  color: var(--ion-color-medium);
}

.breakdown-count {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ion-color-primary);
}

.nurse-offline-card {
  margin-top: 1rem;
}
.nurse-offline-card .offline-notice {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nurse-offline-card .offline-notice ion-icon {
  font-size: 2.5rem;
}
.nurse-offline-card .offline-notice h3 {
  margin: 0 0 4px 0;
  font-size: 1rem;
  color: var(--ion-color-dark);
}
.nurse-offline-card .offline-notice p {
  margin: 0;
  color: var(--ion-color-medium);
  font-size: 0.85rem;
}

@media (max-width: 992px) {
  .nurse-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 576px) {
  .nurse-summary-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .summary-card-value {
    font-size: 1.5rem;
  }
  .nurse-breakdown-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}
.miycn-dashboard-card {
  margin-top: 1.5rem;
}

.miycn-online-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
}
.miycn-online-indicator ion-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  text-transform: uppercase;
}
.miycn-online-indicator span {
  color: var(--ion-color-medium);
  font-size: 0.85rem;
}

.miycn-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.miycn-summary-card {
  border-radius: 16px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(var(--ion-color-tertiary-rgb), 0.1), rgba(var(--ion-color-tertiary-rgb), 0.2));
  border: 1px solid rgba(var(--ion-color-tertiary-rgb), 0.4);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.miycn-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ion-color-dark);
}

.miycn-card-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ion-color-tertiary);
}

.counselor-offline-card, .pbw-offline-card {
  margin-top: 1rem;
}
.counselor-offline-card .offline-notice, .pbw-offline-card .offline-notice {
  display: flex;
  align-items: center;
  gap: 12px;
}
.counselor-offline-card .offline-notice ion-icon, .pbw-offline-card .offline-notice ion-icon {
  font-size: 2.5rem;
}
.counselor-offline-card .offline-notice h3, .pbw-offline-card .offline-notice h3 {
  margin: 0 0 4px 0;
  font-size: 1rem;
  color: var(--ion-color-dark);
}
.counselor-offline-card .offline-notice p, .pbw-offline-card .offline-notice p {
  margin: 0;
  color: var(--ion-color-medium);
  font-size: 0.85rem;
}

.pbw-dashboard-card {
  margin-top: 1.5rem;
}

@media (max-width: 576px) {
  .miycn-summary-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .miycn-card-value {
    font-size: 1.6rem;
  }
}
/* For very small screens (< 400px) */
@media (max-width: 400px) {
  .stat-content {
    padding: 8px;
  }
  .stat-number {
    font-size: 20px;
  }
  .stat-label {
    font-size: 10px;
  }
  .stat-icon {
    font-size: 20px;
    margin-bottom: 4px;
  }
}
@media (max-width: 768px) {
  .stat-card {
    margin: 0px 2px;
  }
}
/* Better color contrast for warning cards */
.stat-card[color=warning] .stat-number,
.stat-card[color=warning] .stat-label,
.stat-card[color=warning] .stat-icon {
  color: #333 !important;
}

/* Improved hover effects for different card colors */
.stat-card[color=primary]:hover {
  box-shadow: 0 8px 24px rgba(56, 128, 255, 0.3);
}

.stat-card[color=secondary]:hover {
  box-shadow: 0 8px 24px rgba(235, 93, 170, 0.3);
}

.stat-card[color=tertiary]:hover {
  box-shadow: 0 8px 24px rgba(120, 84, 228, 0.3);
}

.stat-card[color=success]:hover {
  box-shadow: 0 8px 24px rgba(57, 192, 176, 0.3);
}

.stat-card[color=warning]:hover {
  box-shadow: 0 8px 24px rgba(255, 206, 0, 0.3);
}

.stat-card[color=danger]:hover {
  box-shadow: 0 8px 24px rgba(240, 65, 65, 0.3);
}

.stat-card[color=purple]:hover {
  box-shadow: 0 8px 24px rgba(163, 46, 128, 0.3);
}

/* Filters Card Styles */
.filters-card {
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.filters-card ion-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
}
.filters-card ion-card-subtitle {
  margin-top: 0.5rem;
  color: var(--ion-color-medium);
  font-size: 0.9rem;
}

.form-item {
  margin-bottom: 16px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.form-item ion-label {
  font-weight: 500;
  color: var(--ion-color-dark);
}
.form-item ion-icon[slot=start] {
  margin-inline-end: 12px;
}
.form-item ion-select,
.form-item ion-input {
  width: 100%;
}

.refresh-button {
  height: 44px;
  font-weight: 600;
  --border-radius: 8px;
  --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-top: 8px;
}

.quick-select-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.quick-select-buttons ion-button {
  height: 40px;
  font-size: 0.85rem;
  font-weight: 600;
  --border-radius: 8px;
  --border-width: 2px;
  transition: all 0.2s ease;
}
.quick-select-buttons ion-button[color=primary] {
  --background: var(--ion-color-primary);
  --color: white;
  --border-color: var(--ion-color-primary);
}
.quick-select-buttons ion-button[color=medium] {
  --background: transparent;
  --color: var(--ion-color-medium);
  --border-color: rgba(0, 0, 0, 0.12);
}
.quick-select-buttons ion-button ion-icon {
  font-size: 18px;
}

/* Responsive Grid for Quick Select Buttons on Large Screens */
@media (min-width: 992px) {
  .quick-select-buttons {
    grid-template-columns: repeat(6, 1fr);
  }
}
/* Date Range Display Above Table */
.date-range-display {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.date-range-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(var(--ion-color-primary-rgb), 0.08), rgba(var(--ion-color-primary-rgb), 0.04));
  border: 2px solid rgba(var(--ion-color-primary-rgb), 0.2);
  border-radius: 12px;
  padding: 14px 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}
.date-range-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  border-color: rgba(var(--ion-color-primary-rgb), 0.35);
}
.date-range-badge ion-icon {
  font-size: 24px;
  color: var(--ion-color-primary);
  flex-shrink: 0;
}
.date-range-badge .date-range-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ion-color-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.date-range-badge .date-range-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ion-color-dark);
  white-space: nowrap;
}
.date-range-badge .items-count-badge {
  font-size: 0.9rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
}

/* Stats Container Spacing */
.stats-container {
  margin-top: 16px;
}

/* Dashboard Table Styles */
.dashboard-table-container {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--ion-color-light);
  margin-top: 1rem;
}

.dashboard-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
.dashboard-table th {
  background-color: var(--ion-color-light);
  color: var(--ion-color-primary);
  font-weight: 600;
  padding: 12px 16px;
  text-align: center;
  border-bottom: 2px solid var(--ion-color-medium);
  font-size: 0.85rem;
  white-space: nowrap;
}
.dashboard-table th:first-child {
  text-align: left;
  width: 75%;
}
.dashboard-table th:nth-child(2) {
  text-align: center;
  width: 25%;
}
.dashboard-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ion-color-light);
  font-size: 0.85rem;
  text-align: center;
  vertical-align: middle;
}
.dashboard-table td.serial-number {
  font-weight: 600;
  color: var(--ion-color-primary);
}
.dashboard-table td.category-title {
  font-weight: 500;
  color: var(--ion-color-dark);
  text-align: left;
}
.dashboard-table td.total-count .count-value, .dashboard-table td.today-count .count-value, .dashboard-table td.target-count .count-value, .dashboard-table td.achievement-count .count-value, .dashboard-table td.progress-count .count-value {
  font-weight: 600;
  font-size: 1rem;
  color: var(--ion-color-success);
}
.dashboard-table td.total-count .count-value.highlight-today, .dashboard-table td.today-count .count-value.highlight-today, .dashboard-table td.target-count .count-value.highlight-today, .dashboard-table td.achievement-count .count-value.highlight-today, .dashboard-table td.progress-count .count-value.highlight-today {
  color: var(--ion-color-success);
  background-color: rgba(var(--ion-color-success-rgb), 0.15);
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 700;
  display: inline-block;
}
.dashboard-table td.target-count .count-value {
  color: var(--ion-color-primary);
  font-weight: 600;
}
.dashboard-table td.achievement-count .count-value {
  color: var(--ion-color-success);
  font-weight: 700;
}
.dashboard-table td.progress-count .count-value {
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
}
.dashboard-table td.progress-count .count-value.progress-excellent {
  color: #2dd36f;
  background-color: rgba(45, 211, 111, 0.15);
}
.dashboard-table td.progress-count .count-value.progress-good {
  color: #3880ff;
  background-color: rgba(56, 128, 255, 0.15);
}
.dashboard-table td.progress-count .count-value.progress-moderate {
  color: #ffc409;
  background-color: rgba(255, 196, 9, 0.15);
}
.dashboard-table td.progress-count .count-value.progress-low {
  color: #eb445a;
  background-color: rgba(235, 68, 90, 0.15);
}
.dashboard-table tbody tr {
  transition: all 0.2s ease;
}
.dashboard-table tbody tr:hover {
  background-color: var(--ion-color-light-tint);
}
.dashboard-table tbody tr:last-child td {
  border-bottom: none;
}

.stock-table-container {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--ion-color-light);
  margin-top: 1rem;
}

.stock-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.stock-table th {
  background-color: var(--ion-color-light);
  color: var(--ion-color-primary);
  font-weight: 600;
  padding: 10px 6px;
  text-align: center;
  border-bottom: 2px solid var(--ion-color-medium);
  font-size: 0.85rem;
  white-space: nowrap;
}
.stock-table th:nth-child(2) {
  text-align: left;
}
.stock-table td {
  padding: 10px 6px;
  border-bottom: 1px solid var(--ion-color-light);
  font-size: 0.85rem;
  vertical-align: middle;
  text-align: center;
}
.stock-table td.serial-number {
  font-weight: 600;
  color: var(--ion-color-primary);
}
.stock-table td.item-title {
  text-align: left;
  font-weight: 500;
  color: var(--ion-color-dark);
}
.stock-table td.unit {
  font-weight: 500;
  color: var(--ion-color-medium);
}
.stock-table td.numeric {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.stock-table td.numeric.supply-in {
  color: var(--ion-color-success);
}
.stock-table td.numeric.supply-out {
  color: var(--ion-color-warning);
}
.stock-table td.numeric.closing {
  color: var(--ion-color-tertiary);
}
.stock-table td.numeric.available-stock {
  color: var(--ion-color-primary);
  font-weight: 700;
}
.stock-table td.numeric.used-percentage .count-value {
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
}
.stock-table td.numeric.used-percentage .count-value.progress-excellent {
  color: #2dd36f;
  background-color: rgba(45, 211, 111, 0.15);
}
.stock-table td.numeric.used-percentage .count-value.progress-good {
  color: #3880ff;
  background-color: rgba(56, 128, 255, 0.15);
}
.stock-table td.numeric.used-percentage .count-value.progress-moderate {
  color: #ffc409;
  background-color: rgba(255, 196, 9, 0.15);
}
.stock-table td.numeric.used-percentage .count-value.progress-low {
  color: #eb445a;
  background-color: rgba(235, 68, 90, 0.15);
}
.stock-table tbody tr {
  transition: all 0.2s ease;
}
.stock-table tbody tr:hover {
  background-color: var(--ion-color-light-tint);
}
.stock-table tbody tr:last-child td {
  border-bottom: none;
}

@media (max-width: 768px) {
  .stock-table {
    min-width: 600px;
  }
  .stock-table th, .stock-table td {
    padding: 8px 4px;
    font-size: 0.8rem;
  }
  .dashboard-table {
    min-width: 500px;
  }
  .dashboard-table th, .dashboard-table td {
    padding: 8px 4px;
    font-size: 0.8rem;
  }
  .dashboard-table td.total-count .count-value, .dashboard-table td.today-count .count-value {
    font-size: 0.95rem;
  }
  .dashboard-table td.total-count .count-value.highlight-today, .dashboard-table td.today-count .count-value.highlight-today {
    padding: 3px 8px;
  }
}
@media (max-width: 576px) {
  .stock-table {
    min-width: 500px;
  }
  .stock-table th, .stock-table td {
    padding: 6px 3px;
    font-size: 0.75rem;
  }
  .dashboard-table {
    min-width: 400px;
  }
  .dashboard-table th, .dashboard-table td {
    padding: 6px 3px;
    font-size: 0.75rem;
  }
  .dashboard-table td.total-count .count-value, .dashboard-table td.today-count .count-value {
    font-size: 0.9rem;
  }
  .dashboard-table td.total-count .count-value.highlight-today, .dashboard-table td.today-count .count-value.highlight-today {
    padding: 2px 6px;
  }
}
.section-header {
  margin-bottom: 1.5rem;
}
.section-header .section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ion-color-dark);
  margin: 0 0 0.5rem 0;
}
.section-header .section-subtitle {
  color: var(--ion-color-medium);
  margin: 0;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.section-header .section-subtitle ion-icon {
  font-size: 1rem;
}

.empty-state {
  text-align: center;
  padding: 3rem 2rem;
}
.empty-state ion-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}
.empty-state h3 {
  color: var(--ion-color-dark);
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}
.empty-state p {
  color: var(--ion-color-medium);
  margin: 0;
  font-size: 0.9rem;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
}
.loading-container ion-spinner {
  margin-bottom: 1rem;
}
.loading-container p {
  color: var(--ion-color-medium);
  margin: 0;
}

/* Additional Responsive Design for Section Headers */
@media (max-width: 768px) {
  .section-header .section-title {
    font-size: 1.25rem;
  }
  .section-header .section-subtitle {
    font-size: 0.8rem;
  }
}
@media (max-width: 768px) {
  .filters-card ion-card-title {
    font-size: 16px;
  }
  .filters-card ion-card-subtitle {
    font-size: 0.85rem;
  }
  .form-item {
    margin-bottom: 12px;
  }
  .form-item ion-label {
    font-size: 0.9rem;
  }
  .refresh-button {
    height: 42px;
    font-size: 0.9rem;
  }
  .quick-select-buttons {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 14px;
  }
  .quick-select-buttons ion-button {
    height: 38px;
    font-size: 0.8rem;
  }
  .quick-select-buttons ion-button ion-icon {
    font-size: 16px;
  }
  .date-range-badge {
    padding: 12px 16px;
    gap: 10px;
  }
  .date-range-badge ion-icon {
    font-size: 20px;
  }
  .date-range-badge .date-range-label {
    font-size: 0.85rem;
  }
  .date-range-badge .date-range-value {
    font-size: 1rem;
  }
  .date-range-badge .items-count-badge {
    font-size: 0.85rem;
    padding: 5px 10px;
  }
}
@media (max-width: 480px) {
  .section-header .section-title {
    font-size: 1.1rem;
  }
  .section-header .section-subtitle {
    font-size: 0.75rem;
  }
  .filters-card ion-card-title {
    font-size: 15px;
  }
  .filters-card ion-card-subtitle {
    font-size: 0.8rem;
  }
  .form-item {
    margin-bottom: 10px;
  }
  .form-item ion-label {
    font-size: 0.85rem;
  }
  .form-item ion-icon[slot=start] {
    font-size: 18px;
  }
  .refresh-button {
    height: 40px;
    font-size: 0.85rem;
  }
  .quick-select-buttons {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    margin-bottom: 12px;
  }
  .quick-select-buttons ion-button {
    height: 36px;
    font-size: 0.7rem;
  }
  .quick-select-buttons ion-button ion-icon {
    font-size: 16px;
  }
  .quick-select-buttons ion-button span {
    font-size: 0.7rem;
    white-space: nowrap;
  }
  .quick-select-buttons ion-button::part(native) {
    padding-left: 4px;
    padding-right: 4px;
  }
  .date-range-display {
    margin-bottom: 12px;
  }
  .date-range-badge {
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    text-align: center;
  }
  .date-range-badge ion-icon {
    font-size: 22px;
  }
  .date-range-badge .date-range-label {
    font-size: 0.75rem;
  }
  .date-range-badge .date-range-value {
    font-size: 0.9rem;
    white-space: normal;
    word-break: break-word;
  }
  .date-range-badge .items-count-badge {
    font-size: 0.8rem;
    padding: 4px 10px;
  }
}
/* Measurement Information Styles */
.measurement-grid {
  margin-top: 1rem;
}

.measurement-box {
  --measurement-accent: var(--ion-color-primary);
  --measurement-accent-rgb: 56, 128, 255;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: linear-gradient(135deg, rgba(var(--measurement-accent-rgb), 0.08), rgba(var(--measurement-accent-rgb), 0.02));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.measurement-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.measurement-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(var(--measurement-accent-rgb), 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--measurement-accent);
}

.measurement-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.measurement-label {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--ion-color-medium);
  text-transform: uppercase;
}

.measurement-value {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--measurement-accent);
  line-height: 1;
}

.disability-child .measurement-label,
.disability-plw .measurement-label {
  color: var(--measurement-accent);
}

.measurement-total {
  --measurement-accent: #4a7ac2;
  --measurement-accent-rgb: 74, 122, 194;
}

.measurement-boy {
  --measurement-accent: #31b77c;
  --measurement-accent-rgb: 49, 183, 124;
}

.measurement-girl {
  --measurement-accent: #ec6ba4;
  --measurement-accent-rgb: 236, 107, 164;
}

.measurement-sam {
  --measurement-accent: #e45858;
  --measurement-accent-rgb: 228, 88, 88;
}

.measurement-mam {
  --measurement-accent: #f3a712;
  --measurement-accent-rgb: 243, 167, 18;
}

.measurement-normal {
  --measurement-accent: #43c466;
  --measurement-accent-rgb: 67, 196, 102;
}

.measurement-wasting {
  --measurement-accent: #ff7b3f;
  --measurement-accent-rgb: 255, 123, 63;
}

.measurement-stunting {
  --measurement-accent: #7b5ed1;
  --measurement-accent-rgb: 123, 94, 209;
}

.measurement-underweight {
  --measurement-accent: #2aa4b1;
  --measurement-accent-rgb: 42, 164, 177;
}

.disability-child {
  --measurement-accent: #6a4c93;
  --measurement-accent-rgb: 106, 76, 147;
}

.disability-plw {
  --measurement-accent: #8e44ad;
  --measurement-accent-rgb: 142, 68, 173;
}

@media (max-width: 768px) {
  .measurement-box {
    padding: 0.85rem 0.9rem;
  }
}
@media (max-width: 576px) {
  .measurement-box {
    flex-direction: row;
  }
}
@media (max-width: 400px) {
  .measurement-box {
    padding: 0.75rem;
  }
}
.gmp-table-container {
  margin-top: 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 1rem;
  background: rgba(var(--ion-color-primary-rgb), 0.02);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.gmp-table-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.gmp-table-header ion-icon {
  font-size: 1.8rem;
}
.gmp-table-header .gmp-table-title {
  margin: 0;
  font-weight: 600;
  color: var(--ion-color-dark);
}
.gmp-table-header .gmp-table-subtitle {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ion-color-medium);
}

.gmp-table {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gmp-table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 0.75rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.gmp-table-row--head {
  background: rgba(var(--ion-color-primary-rgb), 0.08);
  box-shadow: none;
  font-weight: 600;
  color: var(--ion-color-primary);
}

.gmp-cell {
  font-size: 0.9rem;
  color: var(--ion-color-dark);
}

.gmp-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--ion-color-dark);
}
.gmp-progress span {
  min-width: 3ch;
  text-align: right;
}

.gmp-progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(var(--ion-color-primary-rgb), 0.15);
  border-radius: 999px;
  overflow: hidden;
}

.gmp-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ion-color-success), var(--ion-color-primary));
  transition: width 0.3s ease;
}

@media (max-width: 768px) {
  .gmp-table-row {
    grid-template-columns: 1fr 0.8fr 0.8fr;
    grid-template-areas: "title title title" "target achievement progress";
  }
  .gmp-table-row .gmp-title {
    grid-area: title;
    font-weight: 600;
  }
  .gmp-table-row .gmp-target {
    grid-area: target;
  }
  .gmp-table-row .gmp-achievement {
    grid-area: achievement;
  }
  .gmp-table-row .gmp-progress {
    grid-area: progress;
  }
}
/* Responsive Design for Measurement Boxes */
@media (max-width: 768px) {
  .measurement-box {
    min-height: 75px;
    padding: 0.75rem 0.625rem;
  }
  .measurement-box .measurement-value {
    font-size: 1.5rem;
  }
  .measurement-box .measurement-label {
    font-size: 0.8rem;
  }
}
@media (max-width: 576px) {
  .measurement-box {
    min-height: 70px;
    padding: 0.625rem 0.5rem;
  }
  .measurement-box .measurement-value {
    font-size: 1.375rem;
    margin-bottom: 0.25rem;
  }
  .measurement-box .measurement-label {
    font-size: 0.75rem;
  }
}
@media (max-width: 400px) {
  .measurement-box {
    min-height: 65px;
    padding: 0.5rem 0.375rem;
  }
  .measurement-box .measurement-value {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
  }
  .measurement-box .measurement-label {
    font-size: 0.7rem;
  }
}`, "",{"version":3,"sources":["webpack://./src/app/pages/home/home.page.scss"],"names":[],"mappings":"AAAA;EACE,0BAAA;EACA,4BAAA;EACA,8BAAA;EACA,6BAAA;EACA,4BAAA;EACA,4BAAA;EACA,2BAAA;EACA,yBAAA;EACA,2BAAA;EACA,0BAAA;EACA,iDAAA;AACF;;AAEA;EACE,qBAAA;EACA,iBAAA;AACF;;AAEA;EACE,gBAAA;EACA,mBAAA;EACA,eAAA;AACF;;AAEA;EACE,gBAAA;AACF;;AAEA;EACE,wCAAA;EACA,kCAAA;EACA,gBAAA;AACF;;AAEA;EACE,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,YAAA;AACF;;AAEA;EACE,OAAA;AACF;;AAEA;EACE,eAAA;EACA,gBAAA;EACA,eAAA;AACF;;AAEA;EACE,8BAAA;EACA,eAAA;EACA,eAAA;AACF;;AAEA;EACE,eAAA;EACA,eAAA;EACA,gBAAA;AACF;;AAEA;EACE,WAAA;EACA,YAAA;EACA,qBAAA;EACA,kCAAA;EACA,wCAAA;AACF;;AAEA;EACE,eAAA;EACA,gBAAA;EACA,mBAAA;EACA,4BAAA;AACF;;AAEA;EACE,wCAAA;EACA,kCAAA;EACA,eAAA;EACA,YAAA;EACA,gBAAA;EACA,qDAAA;AACF;;AAEA;EACE,2BAAA;EACA,0CAAA;AACF;;AAEA;EACE,aAAA;EACA,mBAAA;EACA,YAAA;EACA,YAAA;AACF;;AAEA;EACE,eAAA;EACA,kBAAA;EACA,+BAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;AACF;;AAEA;EACE,OAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;AACF;;AAEA;EACE,eAAA;EACA,gBAAA;EACA,iBAAA;EACA,YAAA;EACA,cAAA;AACF;;AAEA;EACE,SAAA;EACA,eAAA;EACA,+BAAA;EACA,gBAAA;EACA,gBAAA;AACF;;AAEA;EACE,wCAAA;EACA,kCAAA;EACA,SAAA;EACA,YAAA;EACA,kBAAA;EACA,gBAAA;EACA,yBAAA;EACA,eAAA;AACF;;AAEA;EACE,sBAAA;AACF;;AAEA;EACE,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;EACA,gBAAA;EACA,k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","sourcesContent":[":host {\n  --ion-color-light: #f8f9fa;\n  --ion-color-primary: #3880ff;\n  --ion-color-secondary: #eb5daa;\n  --ion-color-tertiary: #7854e4;\n  --ion-color-success: #39c0b0;\n  --ion-color-warning: #ffce00;\n  --ion-color-danger: #f04141;\n  --ion-color-dark: #222428;\n  --ion-color-purple: #a32e80;\n  --card-border-radius: 16px;\n  --card-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);\n}\n\nion-header ion-toolbar {\n  --background: #ffffff;\n  --border-width: 0;\n}\n\nion-title {\n  font-weight: 600;\n  letter-spacing: 1px;\n  font-size: 18px;\n}\n\n.profile-container {\n  margin-top: 16px;\n}\n\n.profile-card {\n  border-radius: var(--card-border-radius);\n  box-shadow: var(--card-box-shadow);\n  overflow: hidden;\n}\n\n.profile-content {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 6px;\n}\n\n.profile-info {\n  flex: 1;\n}\n\n.username {\n  font-size: 20px;\n  font-weight: 700;\n  margin: 0 0 4px;\n}\n\n.user-type {\n  color: var(--ion-color-medium);\n  margin: 0 0 8px;\n  font-size: 14px;\n}\n\n.user-title {\n  font-size: 16px;\n  margin: 0 0 8px;\n  font-weight: 600;\n}\n\n.profile-avatar {\n  width: 70px;\n  height: 95px;\n  --border-radius: 15px;\n  background: var(--ion-color-light);\n  box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.section-title {\n  font-size: 18px;\n  font-weight: 600;\n  margin: 24px 0 12px;\n  color: var(--ion-color-dark);\n}\n\n.stat-card {\n  border-radius: var(--card-border-radius);\n  box-shadow: var(--card-box-shadow);\n  margin: 0px 4px;\n  height: 100%;\n  min-height: 80px;\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n\n.stat-card:hover {\n  transform: translateY(-3px);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);\n}\n\n.stat-content {\n  display: flex;\n  align-items: center;\n  padding: 5px;\n  height: 100%;\n}\n\n.stat-icon {\n  font-size: 36px;\n  margin-right: 16px;\n  color: rgba(255, 255, 255, 0.9);\n  min-width: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.stat-text {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.stat-number {\n  font-size: 32px;\n  font-weight: 700;\n  margin: 0 0 6px 0;\n  color: white;\n  line-height: 1;\n}\n\n.stat-label {\n  margin: 0;\n  font-size: 14px;\n  color: rgba(255, 255, 255, 0.9);\n  line-height: 1.3;\n  font-weight: 500;\n}\n\n.menu-card {\n  border-radius: var(--card-border-radius);\n  box-shadow: var(--card-box-shadow);\n  margin: 0;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n  transition: all 0.3s ease;\n  cursor: pointer;\n}\n\n.menu-card:active {\n  transform: scale(0.97);\n}\n\n.menu-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 0px 0px;\n  text-align: center;\n  height: 100%;\n}\n\n.menu-icon-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  background: rgba(var(--ion-color-primary-rgb), 0.1);\n  margin-bottom: 12px;\n}\n\n.menu-icon-container ion-icon {\n  font-size: 26px;\n}\n\n.menu-title {\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 1.2;\n}\n\n/* Responsive Design */\n@media (max-width: 576px) {\n  .stat-card {\n    margin: 4px 2px;\n    min-height: 100px;\n  }\n\n  .stat-content {\n    padding: 0px;\n    flex-direction: column;\n    text-align: center;\n  }\n\n  .stat-number {\n    font-size: 22px;\n  }\n\n  .stat-label {\n    font-size: 11px;\n    line-height: 1.2;\n  }\n\n  .stat-icon {\n    font-size: 24px;\n    margin-right: 0;\n    margin-bottom: 6px;\n    min-width: auto;\n  }\n\n  .menu-icon-container {\n    width: 48px;\n    height: 48px;\n  }\n\n  .menu-icon-container ion-icon {\n    font-size: 22px;\n  }\n}\n\n/* Nurse Dashboard Styles */\n.nurse-dashboard-card {\n  margin-top: 1.5rem;\n}\n\n.nurse-online-indicator {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 1rem;\n\n  ion-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-weight: 600;\n    text-transform: uppercase;\n  }\n\n  span {\n    color: var(--ion-color-medium);\n    font-size: 0.85rem;\n  }\n}\n\n.nurse-summary-section {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n}\n\n.nurse-summary-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.nurse-program-label {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-weight: 600;\n  color: var(--ion-color-dark);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n\n  ion-icon {\n    font-size: 1.2rem;\n  }\n\n  &.otp-label {\n    color: var(--ion-color-danger);\n  }\n\n  &.tsfp-label {\n    color: var(--ion-color-warning);\n  }\n\n  &.bsfp-label {\n    color: var(--ion-color-success);\n  }\n}\n\n.nurse-breakdown-wrapper {\n  margin-top: 1.5rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n}\n\n.nurse-breakdown-category {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.breakdown-group-label {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--ion-color-dark);\n\n  ion-icon {\n    font-size: 1.2rem;\n  }\n\n  &.otp-label {\n    color: var(--ion-color-danger);\n  }\n\n  &.tsfp-label {\n    color: var(--ion-color-warning);\n  }\n\n  &.bsfp-label {\n    color: var(--ion-color-success);\n  }\n}\n\n.nurse-summary-grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: 12px;\n}\n\n.nurse-summary-card {\n  border-radius: 16px;\n  padding: 16px;\n  background: white;\n  border: 1px solid rgba(var(--ion-color-primary-rgb), 0.15);\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\n\n  &.otp-card {\n    background: linear-gradient(135deg, rgba(240, 65, 65, 0.15), rgba(232, 88, 88, 0.35));\n    border-color: rgba(var(--ion-color-danger-rgb), 0.4);\n\n    .summary-card-header ion-icon,\n    .summary-card-value {\n      color: var(--ion-color-danger);\n    }\n  }\n\n  &.tsfp-card {\n    background: linear-gradient(135deg, rgba(255, 206, 0, 0.2), rgba(255, 184, 0, 0.35));\n    border-color: rgba(var(--ion-color-warning-rgb), 0.45);\n\n    .summary-card-header ion-icon,\n    .summary-card-value {\n      color: var(--ion-color-warning);\n    }\n  }\n\n  &.bsfp-card {\n    background: linear-gradient(135deg, rgba(57, 192, 176, 0.15), rgba(57, 192, 176, 0.3));\n    border-color: rgba(var(--ion-color-success-rgb), 0.4);\n\n    .summary-card-header ion-icon,\n    .summary-card-value {\n      color: var(--ion-color-success);\n    }\n  }\n\n  &.nurse-card-general, &.pbw-card-general {\n    background: linear-gradient(135deg, rgba(120, 84, 228, 0.08), rgba(120, 84, 228, 0.2));\n    border-color: rgba(var(--ion-color-tertiary-rgb), 0.4);\n  }\n\n  &:hover {\n    transform: translateY(-4px);\n    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);\n  }\n}\n\n.summary-card-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 600;\n  color: var(--ion-color-dark);\n\n  ion-icon {\n    font-size: 22px;\n    color: var(--ion-color-primary);\n  }\n}\n\n.summary-card-title {\n  font-size: 0.95rem;\n}\n\n.summary-card-value {\n  margin-top: 12px;\n  font-size: 2rem;\n  font-weight: 700;\n  color: var(--ion-color-dark);\n}\n\n.nurse-breakdown-section {\n  margin-top: 1.5rem;\n}\n\n.breakdown-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  flex-wrap: wrap;\n  margin-bottom: 0.75rem;\n}\n\n.breakdown-title {\n  display: flex;\n  align-items: center;\n  gap: 0.45rem;\n  font-weight: 600;\n  color: var(--ion-color-dark);\n\n  ion-icon {\n    font-size: 1.3rem;\n  }\n}\n\n.nurse-breakdown-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));\n  gap: 10px;\n}\n\n.nurse-breakdown-card {\n  border-radius: 12px;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  padding: 12px 14px;\n  background: rgba(var(--ion-color-primary-rgb), 0.02);\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);\n}\n\n.breakdown-label {\n  font-size: 0.85rem;\n  color: var(--ion-color-medium);\n}\n\n.breakdown-count {\n  font-size: 1.15rem;\n  font-weight: 700;\n  color: var(--ion-color-primary);\n}\n\n\n.nurse-offline-card {\n  margin-top: 1rem;\n\n  .offline-notice {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n\n    ion-icon {\n      font-size: 2.5rem;\n    }\n\n    h3 {\n      margin: 0 0 4px 0;\n      font-size: 1rem;\n      color: var(--ion-color-dark);\n    }\n\n    p {\n      margin: 0;\n      color: var(--ion-color-medium);\n      font-size: 0.85rem;\n    }\n  }\n}\n\n@media (max-width: 992px) {\n  .nurse-summary-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n\n@media (max-width: 576px) {\n  .nurse-summary-grid {\n    grid-template-columns: repeat(1, minmax(0, 1fr));\n  }\n\n  .summary-card-value {\n    font-size: 1.5rem;\n  }\n\n  .nurse-breakdown-grid {\n    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n  }\n}\n\n.miycn-dashboard-card {\n  margin-top: 1.5rem;\n}\n\n.miycn-online-indicator {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 1rem;\n\n  ion-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-weight: 600;\n    text-transform: uppercase;\n  }\n\n  span {\n    color: var(--ion-color-medium);\n    font-size: 0.85rem;\n  }\n}\n\n.miycn-summary-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 12px;\n}\n\n.miycn-summary-card {\n  border-radius: 16px;\n  padding: 16px;\n  background: linear-gradient(135deg, rgba(var(--ion-color-tertiary-rgb), 0.1), rgba(var(--ion-color-tertiary-rgb), 0.2));\n  border: 1px solid rgba(var(--ion-color-tertiary-rgb), 0.4);\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.miycn-card-title {\n  font-size: 0.95rem;\n  font-weight: 600;\n  color: var(--ion-color-dark);\n}\n\n.miycn-card-value {\n  font-size: 2rem;\n  font-weight: 700;\n  color: var(--ion-color-tertiary);\n}\n\n.counselor-offline-card, .pbw-offline-card {\n  margin-top: 1rem;\n\n  .offline-notice {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n\n    ion-icon {\n      font-size: 2.5rem;\n    }\n\n    h3 {\n      margin: 0 0 4px 0;\n      font-size: 1rem;\n      color: var(--ion-color-dark);\n    }\n\n    p {\n      margin: 0;\n      color: var(--ion-color-medium);\n      font-size: 0.85rem;\n    }\n  }\n}\n\n.pbw-dashboard-card {\n  margin-top: 1.5rem;\n}\n\n@media (max-width: 576px) {\n  .miycn-summary-grid {\n    grid-template-columns: repeat(1, minmax(0, 1fr));\n  }\n\n  .miycn-card-value {\n    font-size: 1.6rem;\n  }\n}\n\n/* For very small screens (< 400px) */\n@media (max-width: 400px) {\n  .stat-content {\n    padding: 8px;\n  }\n\n  .stat-number {\n    font-size: 20px;\n  }\n\n  .stat-label {\n    font-size: 10px;\n  }\n\n  .stat-icon {\n    font-size: 20px;\n    margin-bottom: 4px;\n  }\n}\n\n@media (max-width: 768px) {\n  .stat-card {\n    margin: 0px 2px;\n  }\n}\n\n/* Better color contrast for warning cards */\n.stat-card[color=\"warning\"] .stat-number,\n.stat-card[color=\"warning\"] .stat-label,\n.stat-card[color=\"warning\"] .stat-icon {\n  color: #333 !important;\n}\n\n/* Improved hover effects for different card colors */\n.stat-card[color=\"primary\"]:hover {\n  box-shadow: 0 8px 24px rgba(56, 128, 255, 0.3);\n}\n\n.stat-card[color=\"secondary\"]:hover {\n  box-shadow: 0 8px 24px rgba(235, 93, 170, 0.3);\n}\n\n.stat-card[color=\"tertiary\"]:hover {\n  box-shadow: 0 8px 24px rgba(120, 84, 228, 0.3);\n}\n\n.stat-card[color=\"success\"]:hover {\n  box-shadow: 0 8px 24px rgba(57, 192, 176, 0.3);\n}\n\n.stat-card[color=\"warning\"]:hover {\n  box-shadow: 0 8px 24px rgba(255, 206, 0, 0.3);\n}\n\n.stat-card[color=\"danger\"]:hover {\n  box-shadow: 0 8px 24px rgba(240, 65, 65, 0.3);\n}\n\n.stat-card[color=\"purple\"]:hover {\n  box-shadow: 0 8px 24px rgba(163, 46, 128, 0.3);\n}\n\n/* Filters Card Styles */\n.filters-card {\n  margin-bottom: 20px;\n  border-radius: 12px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\n  overflow: hidden;\n\n  ion-card-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 18px;\n    font-weight: 600;\n  }\n\n  ion-card-subtitle {\n    margin-top: 0.5rem;\n    color: var(--ion-color-medium);\n    font-size: 0.9rem;\n  }\n}\n\n.form-item {\n  margin-bottom: 16px;\n  border-radius: 8px;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n\n  ion-label {\n    font-weight: 500;\n    color: var(--ion-color-dark);\n  }\n\n  ion-icon[slot=\"start\"] {\n    margin-inline-end: 12px;\n  }\n\n  ion-select,\n  ion-input {\n    width: 100%;\n  }\n}\n\n.refresh-button {\n  height: 44px;\n  font-weight: 600;\n  --border-radius: 8px;\n  --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  margin-top: 8px;\n}\n\n.quick-select-buttons {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 8px;\n  margin-bottom: 16px;\n\n  ion-button {\n    height: 40px;\n    font-size: 0.85rem;\n    font-weight: 600;\n    --border-radius: 8px;\n    --border-width: 2px;\n    transition: all 0.2s ease;\n\n    &[color=\"primary\"] {\n      --background: var(--ion-color-primary);\n      --color: white;\n      --border-color: var(--ion-color-primary);\n    }\n\n    &[color=\"medium\"] {\n      --background: transparent;\n      --color: var(--ion-color-medium);\n      --border-color: rgba(0, 0, 0, 0.12);\n    }\n\n    ion-icon {\n      font-size: 18px;\n    }\n  }\n}\n\n/* Responsive Grid for Quick Select Buttons on Large Screens */\n@media (min-width: 992px) {\n  .quick-select-buttons {\n    grid-template-columns: repeat(6, 1fr);\n  }\n}\n\n/* Date Range Display Above Table */\n.date-range-display {\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.date-range-badge {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  background: linear-gradient(135deg, rgba(var(--ion-color-primary-rgb), 0.08), rgba(var(--ion-color-primary-rgb), 0.04));\n  border: 2px solid rgba(var(--ion-color-primary-rgb), 0.2);\n  border-radius: 12px;\n  padding: 14px 20px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);\n  transition: all 0.3s ease;\n\n  &:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);\n    border-color: rgba(var(--ion-color-primary-rgb), 0.35);\n  }\n\n  ion-icon {\n    font-size: 24px;\n    color: var(--ion-color-primary);\n    flex-shrink: 0;\n  }\n\n  .date-range-label {\n    font-size: 0.9rem;\n    font-weight: 600;\n    color: var(--ion-color-medium);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n  }\n\n  .date-range-value {\n    font-size: 1.1rem;\n    font-weight: 700;\n    color: var(--ion-color-dark);\n    white-space: nowrap;\n  }\n\n  .items-count-badge {\n    font-size: 0.9rem;\n    font-weight: 700;\n    padding: 6px 12px;\n    border-radius: 8px;\n  }\n}\n\n/* Stats Container Spacing */\n.stats-container {\n  margin-top: 16px;\n}\n\n/* Dashboard Table Styles */\n.dashboard-table-container {\n  overflow-x: auto;\n  border-radius: 8px;\n  border: 1px solid var(--ion-color-light);\n  margin-top: 1rem;\n}\n\n.dashboard-table {\n  width: 100%;\n  border-collapse: collapse;\n  table-layout: auto;\n\n  th {\n    background-color: var(--ion-color-light);\n    color: var(--ion-color-primary);\n    font-weight: 600;\n    padding: 12px 16px;\n    text-align: center;\n    border-bottom: 2px solid var(--ion-color-medium);\n    font-size: 0.85rem;\n    white-space: nowrap;\n\n    &:first-child {\n      text-align: left;\n      width: 75%;\n    }\n\n    &:nth-child(2) {\n      text-align: center;\n      width: 25%;\n    }\n  }\n\n  td {\n    padding: 12px 16px;\n    border-bottom: 1px solid var(--ion-color-light);\n    font-size: 0.85rem;\n    text-align: center;\n    vertical-align: middle;\n\n    &.serial-number {\n      font-weight: 600;\n      color: var(--ion-color-primary);\n    }\n\n    &.category-title {\n      font-weight: 500;\n      color: var(--ion-color-dark);\n      text-align: left;\n    }\n\n    &.total-count, &.today-count, &.target-count, &.achievement-count, &.progress-count {\n      .count-value {\n        font-weight: 600;\n        font-size: 1rem;\n        color: var(--ion-color-success);\n\n        &.highlight-today {\n          color: var(--ion-color-success);\n          background-color: rgba(var(--ion-color-success-rgb), 0.15);\n          padding: 4px 10px;\n          border-radius: 6px;\n          font-weight: 700;\n          display: inline-block;\n        }\n      }\n    }\n\n    &.target-count {\n      .count-value {\n        color: var(--ion-color-primary);\n        font-weight: 600;\n      }\n    }\n\n    &.achievement-count {\n      .count-value {\n        color: var(--ion-color-success);\n        font-weight: 700;\n      }\n    }\n\n    &.progress-count {\n      .count-value {\n        font-weight: 700;\n        padding: 4px 10px;\n        border-radius: 6px;\n        display: inline-block;\n\n        &.progress-excellent {\n          color: #2dd36f;\n          background-color: rgba(45, 211, 111, 0.15);\n        }\n\n        &.progress-good {\n          color: #3880ff;\n          background-color: rgba(56, 128, 255, 0.15);\n        }\n\n        &.progress-moderate {\n          color: #ffc409;\n          background-color: rgba(255, 196, 9, 0.15);\n        }\n\n        &.progress-low {\n          color: #eb445a;\n          background-color: rgba(235, 68, 90, 0.15);\n        }\n      }\n    }\n  }\n\n  tbody tr {\n    transition: all 0.2s ease;\n\n    &:hover {\n      background-color: var(--ion-color-light-tint);\n    }\n\n    &:last-child td {\n      border-bottom: none;\n    }\n  }\n}\n\n.stock-table-container {\n  overflow-x: auto;\n  border-radius: 8px;\n  border: 1px solid var(--ion-color-light);\n  margin-top: 1rem;\n}\n\n.stock-table {\n  width: 100%;\n  border-collapse: collapse;\n  min-width: 720px;\n\n  th {\n    background-color: var(--ion-color-light);\n    color: var(--ion-color-primary);\n    font-weight: 600;\n    padding: 10px 6px;\n    text-align: center;\n    border-bottom: 2px solid var(--ion-color-medium);\n    font-size: 0.85rem;\n    white-space: nowrap;\n\n    &:nth-child(2) {\n      text-align: left;\n    }\n  }\n\n  td {\n    padding: 10px 6px;\n    border-bottom: 1px solid var(--ion-color-light);\n    font-size: 0.85rem;\n    vertical-align: middle;\n    text-align: center;\n\n    &.serial-number {\n      font-weight: 600;\n      color: var(--ion-color-primary);\n    }\n\n    &.item-title {\n      text-align: left;\n      font-weight: 500;\n      color: var(--ion-color-dark);\n    }\n\n    &.unit {\n      font-weight: 500;\n      color: var(--ion-color-medium);\n    }\n\n    &.numeric {\n      font-variant-numeric: tabular-nums;\n      font-weight: 600;\n\n      &.supply-in {\n        color: var(--ion-color-success);\n      }\n\n      &.supply-out {\n        color: var(--ion-color-warning);\n      }\n\n      &.closing {\n        color: var(--ion-color-tertiary);\n      }\n\n      &.available-stock {\n        color: var(--ion-color-primary);\n        font-weight: 700;\n      }\n\n      &.used-percentage {\n        .count-value {\n          font-weight: 700;\n          padding: 4px 10px;\n          border-radius: 6px;\n          display: inline-block;\n\n          &.progress-excellent {\n            color: #2dd36f;\n            background-color: rgba(45, 211, 111, 0.15);\n          }\n\n          &.progress-good {\n            color: #3880ff;\n            background-color: rgba(56, 128, 255, 0.15);\n          }\n\n          &.progress-moderate {\n            color: #ffc409;\n            background-color: rgba(255, 196, 9, 0.15);\n          }\n\n          &.progress-low {\n            color: #eb445a;\n            background-color: rgba(235, 68, 90, 0.15);\n          }\n        }\n      }\n    }\n  }\n\n  tbody tr {\n    transition: all 0.2s ease;\n\n    &:hover {\n      background-color: var(--ion-color-light-tint);\n    }\n\n    &:last-child td {\n      border-bottom: none;\n    }\n  }\n}\n\n@media (max-width: 768px) {\n  .stock-table {\n    min-width: 600px;\n\n    th, td {\n      padding: 8px 4px;\n      font-size: 0.8rem;\n    }\n  }\n\n  .dashboard-table {\n    min-width: 500px;\n\n    th, td {\n      padding: 8px 4px;\n      font-size: 0.8rem;\n    }\n\n    td.total-count, td.today-count {\n      .count-value {\n        font-size: 0.95rem;\n\n        &.highlight-today {\n          padding: 3px 8px;\n        }\n      }\n    }\n  }\n}\n\n@media (max-width: 576px) {\n  .stock-table {\n    min-width: 500px;\n\n    th, td {\n      padding: 6px 3px;\n      font-size: 0.75rem;\n    }\n  }\n\n  .dashboard-table {\n    min-width: 400px;\n\n    th, td {\n      padding: 6px 3px;\n      font-size: 0.75rem;\n    }\n\n    td.total-count, td.today-count {\n      .count-value {\n        font-size: 0.9rem;\n\n        &.highlight-today {\n          padding: 2px 6px;\n        }\n      }\n    }\n  }\n}\n\n.section-header {\n  margin-bottom: 1.5rem;\n\n  .section-title {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-size: 1.5rem;\n    font-weight: 600;\n    color: var(--ion-color-dark);\n    margin: 0 0 0.5rem 0;\n  }\n\n  .section-subtitle {\n    color: var(--ion-color-medium);\n    margin: 0;\n    font-size: 0.9rem;\n    display: flex;\n    align-items: center;\n    gap: 0.4rem;\n\n    ion-icon {\n      font-size: 1rem;\n    }\n  }\n}\n\n.empty-state {\n  text-align: center;\n  padding: 3rem 2rem;\n\n  ion-icon {\n    font-size: 4rem;\n    margin-bottom: 1rem;\n  }\n\n  h3 {\n    color: var(--ion-color-dark);\n    margin-bottom: 0.5rem;\n    font-size: 1.25rem;\n  }\n\n  p {\n    color: var(--ion-color-medium);\n    margin: 0;\n    font-size: 0.9rem;\n  }\n}\n\n.loading-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 3rem 2rem;\n  text-align: center;\n\n  ion-spinner {\n    margin-bottom: 1rem;\n  }\n\n  p {\n    color: var(--ion-color-medium);\n    margin: 0;\n  }\n}\n\n/* Additional Responsive Design for Section Headers */\n@media (max-width: 768px) {\n  .section-header .section-title {\n    font-size: 1.25rem;\n  }\n\n  .section-header .section-subtitle {\n    font-size: 0.8rem;\n  }\n}\n\n@media (max-width: 768px) {\n  .filters-card {\n    ion-card-title {\n      font-size: 16px;\n    }\n\n    ion-card-subtitle {\n      font-size: 0.85rem;\n    }\n  }\n\n  .form-item {\n    margin-bottom: 12px;\n\n    ion-label {\n      font-size: 0.9rem;\n    }\n  }\n\n  .refresh-button {\n    height: 42px;\n    font-size: 0.9rem;\n  }\n\n  .quick-select-buttons {\n    grid-template-columns: repeat(3, 1fr);\n    gap: 6px;\n    margin-bottom: 14px;\n\n    ion-button {\n      height: 38px;\n      font-size: 0.8rem;\n\n      ion-icon {\n        font-size: 16px;\n      }\n    }\n  }\n\n  .date-range-badge {\n    padding: 12px 16px;\n    gap: 10px;\n\n    ion-icon {\n      font-size: 20px;\n    }\n\n    .date-range-label {\n      font-size: 0.85rem;\n    }\n\n    .date-range-value {\n      font-size: 1rem;\n    }\n\n    .items-count-badge {\n      font-size: 0.85rem;\n      padding: 5px 10px;\n    }\n  }\n}\n\n@media (max-width: 480px) {\n  .section-header .section-title {\n    font-size: 1.1rem;\n  }\n\n  .section-header .section-subtitle {\n    font-size: 0.75rem;\n  }\n\n  .filters-card {\n    ion-card-title {\n      font-size: 15px;\n    }\n\n    ion-card-subtitle {\n      font-size: 0.8rem;\n    }\n  }\n\n  .form-item {\n    margin-bottom: 10px;\n\n    ion-label {\n      font-size: 0.85rem;\n    }\n\n    ion-icon[slot=\"start\"] {\n      font-size: 18px;\n    }\n  }\n\n  .refresh-button {\n    height: 40px;\n    font-size: 0.85rem;\n  }\n\n  .quick-select-buttons {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 4px;\n    margin-bottom: 12px;\n\n    ion-button {\n      height: 36px;\n      font-size: 0.7rem;\n\n      ion-icon {\n        font-size: 16px;\n      }\n\n      span {\n        font-size: 0.7rem;\n        white-space: nowrap;\n      }\n\n      &::part(native) {\n        padding-left: 4px;\n        padding-right: 4px;\n      }\n    }\n  }\n\n  .date-range-display {\n    margin-bottom: 12px;\n  }\n\n  .date-range-badge {\n    flex-direction: column;\n    gap: 8px;\n    padding: 12px 14px;\n    text-align: center;\n\n    ion-icon {\n      font-size: 22px;\n    }\n\n    .date-range-label {\n      font-size: 0.75rem;\n    }\n\n    .date-range-value {\n      font-size: 0.9rem;\n      white-space: normal;\n      word-break: break-word;\n    }\n\n    .items-count-badge {\n      font-size: 0.8rem;\n      padding: 4px 10px;\n    }\n  }\n}\n\n/* Measurement Information Styles */\n.measurement-grid {\n  margin-top: 1rem;\n}\n\n.measurement-box {\n  --measurement-accent: var(--ion-color-primary);\n  --measurement-accent-rgb: 56, 128, 255;\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 1rem 1.1rem;\n  border-radius: 16px;\n  border: 1px solid rgba(0, 0, 0, 0.06);\n  background: linear-gradient(135deg, rgba(var(--measurement-accent-rgb), 0.08), rgba(var(--measurement-accent-rgb), 0.02));\n  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\n\n  &:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);\n  }\n}\n\n.measurement-icon {\n  width: 48px;\n  height: 48px;\n  border-radius: 12px;\n  background: rgba(var(--measurement-accent-rgb), 0.15);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.4rem;\n  color: var(--measurement-accent);\n}\n\n.measurement-content {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.measurement-label {\n  margin: 0;\n  font-size: 0.85rem;\n  font-weight: 600;\n  letter-spacing: 0.4px;\n  color: var(--ion-color-medium);\n  text-transform: uppercase;\n}\n\n.measurement-value {\n  margin: 0;\n  font-size: 1.9rem;\n  font-weight: 700;\n  color: var(--measurement-accent);\n  line-height: 1;\n}\n\n.disability-child,\n.disability-plw {\n  .measurement-label {\n    color: var(--measurement-accent);\n  }\n}\n\n.measurement-total {\n  --measurement-accent: #4a7ac2;\n  --measurement-accent-rgb: 74, 122, 194;\n}\n\n.measurement-boy {\n  --measurement-accent: #31b77c;\n  --measurement-accent-rgb: 49, 183, 124;\n}\n\n.measurement-girl {\n  --measurement-accent: #ec6ba4;\n  --measurement-accent-rgb: 236, 107, 164;\n}\n\n.measurement-sam {\n  --measurement-accent: #e45858;\n  --measurement-accent-rgb: 228, 88, 88;\n}\n\n.measurement-mam {\n  --measurement-accent: #f3a712;\n  --measurement-accent-rgb: 243, 167, 18;\n}\n\n.measurement-normal {\n  --measurement-accent: #43c466;\n  --measurement-accent-rgb: 67, 196, 102;\n}\n\n.measurement-wasting {\n  --measurement-accent: #ff7b3f;\n  --measurement-accent-rgb: 255, 123, 63;\n}\n\n.measurement-stunting {\n  --measurement-accent: #7b5ed1;\n  --measurement-accent-rgb: 123, 94, 209;\n}\n\n.measurement-underweight {\n  --measurement-accent: #2aa4b1;\n  --measurement-accent-rgb: 42, 164, 177;\n}\n\n.disability-child {\n  --measurement-accent: #6a4c93;\n  --measurement-accent-rgb: 106, 76, 147;\n}\n\n.disability-plw {\n  --measurement-accent: #8e44ad;\n  --measurement-accent-rgb: 142, 68, 173;\n}\n\n@media (max-width: 768px) {\n  .measurement-box {\n    padding: 0.85rem 0.9rem;\n  }\n}\n\n@media (max-width: 576px) {\n  .measurement-box {\n    flex-direction: row;\n  }\n}\n\n@media (max-width: 400px) {\n  .measurement-box {\n    padding: 0.75rem;\n  }\n}\n\n.gmp-table-container {\n  margin-top: 1.5rem;\n  border: 1px solid rgba(0, 0, 0, 0.06);\n  border-radius: 12px;\n  padding: 1rem;\n  background: rgba(var(--ion-color-primary-rgb), 0.02);\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);\n}\n\n.gmp-table-header {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  margin-bottom: 0.75rem;\n\n  ion-icon {\n    font-size: 1.8rem;\n  }\n\n  .gmp-table-title {\n    margin: 0;\n    font-weight: 600;\n    color: var(--ion-color-dark);\n  }\n\n  .gmp-table-subtitle {\n    margin: 0;\n    font-size: 0.85rem;\n    color: var(--ion-color-medium);\n  }\n}\n\n.gmp-table {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.gmp-table-row {\n  display: grid;\n  grid-template-columns: 2fr 1fr 1fr 1.5fr;\n  gap: 0.75rem;\n  align-items: center;\n  padding: 0.5rem 0.75rem;\n  border-radius: 8px;\n  background: white;\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);\n\n  &--head {\n    background: rgba(var(--ion-color-primary-rgb), 0.08);\n    box-shadow: none;\n    font-weight: 600;\n    color: var(--ion-color-primary);\n  }\n}\n\n.gmp-cell {\n  font-size: 0.9rem;\n  color: var(--ion-color-dark);\n}\n\n.gmp-progress {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-weight: 600;\n  color: var(--ion-color-dark);\n\n  span {\n    min-width: 3ch;\n    text-align: right;\n  }\n}\n\n.gmp-progress-bar {\n  flex: 1;\n  height: 8px;\n  background: rgba(var(--ion-color-primary-rgb), 0.15);\n  border-radius: 999px;\n  overflow: hidden;\n}\n\n.gmp-progress-fill {\n  height: 100%;\n  border-radius: 999px;\n  background: linear-gradient(90deg, var(--ion-color-success), var(--ion-color-primary));\n  transition: width 0.3s ease;\n}\n\n@media (max-width: 768px) {\n  .gmp-table-row {\n    grid-template-columns: 1fr 0.8fr 0.8fr;\n    grid-template-areas:\n      'title title title'\n      'target achievement progress';\n\n    .gmp-title {\n      grid-area: title;\n      font-weight: 600;\n    }\n\n    .gmp-target {\n      grid-area: target;\n    }\n\n    .gmp-achievement {\n      grid-area: achievement;\n    }\n\n    .gmp-progress {\n      grid-area: progress;\n    }\n  }\n}\n\n/* Responsive Design for Measurement Boxes */\n@media (max-width: 768px) {\n  .measurement-box {\n    min-height: 75px;\n    padding: 0.75rem 0.625rem;\n\n    .measurement-value {\n      font-size: 1.5rem;\n    }\n\n    .measurement-label {\n      font-size: 0.8rem;\n    }\n  }\n}\n\n@media (max-width: 576px) {\n  .measurement-box {\n    min-height: 70px;\n    padding: 0.625rem 0.5rem;\n\n    .measurement-value {\n      font-size: 1.375rem;\n      margin-bottom: 0.25rem;\n    }\n\n    .measurement-label {\n      font-size: 0.75rem;\n    }\n  }\n}\n\n@media (max-width: 400px) {\n  .measurement-box {\n    min-height: 65px;\n    padding: 0.5rem 0.375rem;\n\n    .measurement-value {\n      font-size: 1.25rem;\n      margin-bottom: 0.25rem;\n    }\n\n    .measurement-label {\n      font-size: 0.7rem;\n    }\n  }\n}\n"],"sourceRoot":""}]);
// Exports
module.exports = ___CSS_LOADER_EXPORT___.toString();


/***/ }),

/***/ 68395:
/*!******************************************************!*\
  !*** ./src/app/pages/home/home.page.html?ngResource ***!
  \******************************************************/
/***/ ((module) => {

"use strict";
module.exports = "<ion-header class=\"ion-no-border\">\n  <ion-toolbar color=\"light\">\n    <ion-buttons slot=\"start\">\n      <ion-menu-button color=\"primary\"></ion-menu-button>\n    </ion-buttons>\n    <ion-title class=\"ion-text-center ion-text-uppercase\" color=\"primary\">\n      Dashboard\n    </ion-title>\n    <ion-buttons slot=\"end\" *ngIf=\"user && user.user && user.user.user_type !== 'Store Keeper' && user.user.user_type !== 'SC Manager'\">\n      <ion-button (click)=\"refreshData()\" [disabled]=\"loading\">\n        <ion-icon slot=\"icon-only\" name=\"refresh-outline\" color=\"primary\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content [fullscreen]=\"true\" class=\"ion-padding\">\n\n  <!-- Pull to Refresh -->\n  <ion-refresher slot=\"fixed\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content\n      pullingIcon=\"chevron-down-circle-outline\"\n      pullingText=\"Pull to refresh\"\n      refreshingSpinner=\"circles\"\n      refreshingText=\"Refreshing...\">\n    </ion-refresher-content>\n  </ion-refresher>\n\n  <!-- Store Keeper Stock Summary -->\n  <div class=\"stats-container\" *ngIf=\"user && user.user && user.user.user_type === 'Store Keeper'\">\n    <div class=\"section-header\">\n      <h2 class=\"section-title\">\n        <ion-icon name=\"cube-outline\" color=\"primary\"></ion-icon>\n        Stock Summary\n      </h2>\n      <p class=\"section-subtitle\">Track opening, issued and closing stock for each item</p>\n    </div>\n\n    <ion-card class=\"filters-card\">\n      <ion-card-header>\n        <ion-card-title>\n          <ion-icon name=\"filter-outline\" color=\"primary\"></ion-icon>\n          Report Filters\n        </ion-card-title>\n        <ion-card-subtitle>Select date range to view stock report</ion-card-subtitle>\n      </ion-card-header>\n      <ion-card-content>\n        <!-- Quick Select Buttons -->\n        <div class=\"quick-select-buttons\">\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('today')\"\n            [color]=\"dateRangeType === 'today' ? 'primary' : 'medium'\">\n            <ion-icon name=\"today-outline\" slot=\"start\"></ion-icon>\n            <span>Today</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('week')\"\n            [color]=\"dateRangeType === 'week' ? 'primary' : 'medium'\">\n            <ion-icon name=\"calendar-outline\" slot=\"start\"></ion-icon>\n            <span>This Week</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('month')\"\n            [color]=\"dateRangeType === 'month' ? 'primary' : 'medium'\">\n            <ion-icon name=\"calendar-number-outline\" slot=\"start\"></ion-icon>\n            <span>This Month</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('6months')\"\n            [color]=\"dateRangeType === '6months' ? 'primary' : 'medium'\">\n            <ion-icon name=\"time-outline\" slot=\"start\"></ion-icon>\n            <span>Last 6 Months</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('year')\"\n            [color]=\"dateRangeType === 'year' ? 'primary' : 'medium'\">\n            <ion-icon name=\"calendar-clear-outline\" slot=\"start\"></ion-icon>\n            <span>Last 1 Year</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('custom')\"\n            [color]=\"dateRangeType === 'custom' ? 'primary' : 'medium'\">\n            <ion-icon name=\"options-outline\" slot=\"start\"></ion-icon>\n            <span>Custom</span>\n          </ion-button>\n        </div>\n\n        <!-- Date Range Inputs -->\n        <ion-row>\n          <ion-col size=\"12\" size-md=\"6\">\n            <ion-item class=\"form-item\">\n              <ion-icon slot=\"start\" name=\"calendar-outline\" color=\"primary\"></ion-icon>\n              <ion-label position=\"stacked\">Start Date</ion-label>\n              <ion-input\n                type=\"date\"\n                [(ngModel)]=\"reportStartDate\"\n                (ionChange)=\"onDateRangeChange()\"\n                [disabled]=\"loadingStockReport || dateRangeType !== 'custom'\"\n                placeholder=\"Select start date\">\n              </ion-input>\n            </ion-item>\n          </ion-col>\n          <ion-col size=\"12\" size-md=\"6\">\n            <ion-item class=\"form-item\">\n              <ion-icon slot=\"start\" name=\"calendar-outline\" color=\"primary\"></ion-icon>\n              <ion-label position=\"stacked\">End Date</ion-label>\n              <ion-input\n                type=\"date\"\n                [(ngModel)]=\"reportEndDate\"\n                (ionChange)=\"onDateRangeChange()\"\n                [disabled]=\"loadingStockReport || dateRangeType !== 'custom'\"\n                placeholder=\"Select end date\">\n              </ion-input>\n            </ion-item>\n          </ion-col>\n        </ion-row>\n\n        <!-- Refresh Button -->\n        <ion-row>\n          <ion-col size=\"12\">\n            <ion-button\n              expand=\"block\"\n              color=\"primary\"\n              (click)=\"loadStorekeeperStockReport()\"\n              [disabled]=\"loadingStockReport || !reportStartDate || !reportEndDate\"\n              class=\"refresh-button\">\n              <ion-icon slot=\"start\" name=\"refresh-outline\"></ion-icon>\n              Load Report\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-card-content>\n    </ion-card>\n\n    <ion-card *ngIf=\"loadingStockReport\">\n      <ion-card-content>\n        <div class=\"loading-container\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          <p>Loading stock report...</p>\n        </div>\n      </ion-card-content>\n    </ion-card>\n\n    <!-- Date Range Display -->\n    <div class=\"date-range-display\" *ngIf=\"reportStartDate && reportEndDate && stockReportData && stockReportData.length > 0\">\n      <div class=\"date-range-badge\">\n        <ion-icon name=\"calendar-outline\"></ion-icon>\n        <span class=\"date-range-label\">Report Period:</span>\n        <span class=\"date-range-value\">\n          {{ reportStartDate === reportEndDate\n            ? (reportStartDate | date:'dd MMM yyyy')\n            : (reportStartDate | date:'dd MMM yyyy') + ' - ' + (reportEndDate | date:'dd MMM yyyy')\n          }}\n        </span>\n        <ion-badge color=\"primary\" class=\"items-count-badge\">\n          {{ stockReportData?.length || 0 }} items\n        </ion-badge>\n      </div>\n    </div>\n\n    <ion-card *ngIf=\"!loadingStockReport && stockReportData && stockReportData.length > 0\">\n      <ion-card-content>\n        <div class=\"stock-table-container\">\n          <table class=\"stock-table\">\n            <thead>\n              <tr>\n                <th>#</th>\n                <th>Item</th>\n                <th>Unit</th>\n                <th>Opening</th>\n                <th>Supply In</th>\n                <th>Supply Out</th>\n                <th>Closing</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let item of stockReportData; let i = index\">\n                <td class=\"serial-number\">{{ i + 1 }}</td>\n                <td class=\"item-title\">{{ item.item_name }}</td>\n                <td class=\"unit\">{{ item.unit }}</td>\n                <td class=\"numeric\">{{ item.opening_stock | number:'1.0-2' }}</td>\n                <td class=\"numeric supply-in\">{{ item.supply_in | number:'1.0-2' }}</td>\n                <td class=\"numeric supply-out\">{{ item.supply_out | number:'1.0-2' }}</td>\n                <td class=\"numeric closing\">{{ item.closing_stock | number:'1.0-2' }}</td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </ion-card-content>\n    </ion-card>\n\n    <ion-card *ngIf=\"!loadingStockReport && (!stockReportData || stockReportData.length === 0)\">\n      <ion-card-content>\n        <div class=\"empty-state\">\n          <ion-icon name=\"cube-outline\" color=\"medium\"></ion-icon>\n          <h3>No Stock Data</h3>\n          <p>No stock transactions recorded for the selected date.</p>\n        </div>\n      </ion-card-content>\n    </ion-card>\n  </div>\n\n  <!-- SC Manager Dashboard -->\n  <div class=\"stats-container\" *ngIf=\"user && user.user && user.user.user_type === 'SC Manager'\">\n    <div class=\"section-header\">\n      <h2 class=\"section-title\">\n        <ion-icon name=\"medical-outline\" color=\"primary\"></ion-icon>\n        Stabilization Center Dashboard\n      </h2>\n      <p class=\"section-subtitle\">Monitor admissions, discharges, and patient status</p>\n    </div>\n\n    <ion-card class=\"filters-card\">\n      <ion-card-header>\n        <ion-card-title>\n          <ion-icon name=\"filter-outline\" color=\"primary\"></ion-icon>\n          Report Filters\n        </ion-card-title>\n        <ion-card-subtitle>Select date range to view statistics</ion-card-subtitle>\n      </ion-card-header>\n      <ion-card-content>\n        <!-- Quick Select Buttons -->\n        <div class=\"quick-select-buttons\">\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('today')\"\n            [color]=\"dateRangeType === 'today' ? 'primary' : 'medium'\">\n            <ion-icon name=\"today-outline\" slot=\"start\"></ion-icon>\n            <span>Today</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('week')\"\n            [color]=\"dateRangeType === 'week' ? 'primary' : 'medium'\">\n            <ion-icon name=\"calendar-outline\" slot=\"start\"></ion-icon>\n            <span>This Week</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('month')\"\n            [color]=\"dateRangeType === 'month' ? 'primary' : 'medium'\">\n            <ion-icon name=\"calendar-number-outline\" slot=\"start\"></ion-icon>\n            <span>This Month</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('6months')\"\n            [color]=\"dateRangeType === '6months' ? 'primary' : 'medium'\">\n            <ion-icon name=\"time-outline\" slot=\"start\"></ion-icon>\n            <span>Last 6 Months</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('year')\"\n            [color]=\"dateRangeType === 'year' ? 'primary' : 'medium'\">\n            <ion-icon name=\"calendar-clear-outline\" slot=\"start\"></ion-icon>\n            <span>Last 1 Year</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('custom')\"\n            [color]=\"dateRangeType === 'custom' ? 'primary' : 'medium'\">\n            <ion-icon name=\"options-outline\" slot=\"start\"></ion-icon>\n            <span>Custom</span>\n          </ion-button>\n        </div>\n\n        <!-- Date Range Inputs -->\n        <ion-row>\n          <ion-col size=\"12\" size-md=\"6\">\n            <ion-item class=\"form-item\">\n              <ion-icon slot=\"start\" name=\"calendar-outline\" color=\"primary\"></ion-icon>\n              <ion-label position=\"stacked\">Start Date</ion-label>\n              <ion-input\n                type=\"date\"\n                [(ngModel)]=\"reportStartDate\"\n                (ionChange)=\"onDateRangeChange()\"\n                [disabled]=\"loadingSCDashboard || dateRangeType !== 'custom'\"\n                placeholder=\"Select start date\">\n              </ion-input>\n            </ion-item>\n          </ion-col>\n          <ion-col size=\"12\" size-md=\"6\">\n            <ion-item class=\"form-item\">\n              <ion-icon slot=\"start\" name=\"calendar-outline\" color=\"primary\"></ion-icon>\n              <ion-label position=\"stacked\">End Date</ion-label>\n              <ion-input\n                type=\"date\"\n                [(ngModel)]=\"reportEndDate\"\n                (ionChange)=\"onDateRangeChange()\"\n                [disabled]=\"loadingSCDashboard || dateRangeType !== 'custom'\"\n                placeholder=\"Select end date\">\n              </ion-input>\n            </ion-item>\n          </ion-col>\n        </ion-row>\n\n        <!-- Refresh Button -->\n        <ion-row>\n          <ion-col size=\"12\">\n            <ion-button\n              expand=\"block\"\n              color=\"primary\"\n              (click)=\"loadSCManagerDashboard()\"\n              [disabled]=\"loadingSCDashboard || !reportStartDate || !reportEndDate\"\n              class=\"refresh-button\">\n              <ion-icon slot=\"start\" name=\"refresh-outline\"></ion-icon>\n              Load Dashboard\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-card-content>\n    </ion-card>\n\n    <ion-card *ngIf=\"loadingSCDashboard\">\n      <ion-card-content>\n        <div class=\"loading-container\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          <p>Loading dashboard...</p>\n        </div>\n      </ion-card-content>\n    </ion-card>\n\n    <!-- Date Range Display -->\n    <div class=\"date-range-display\" *ngIf=\"reportStartDate && reportEndDate && scStatistics && scStatistics.length > 0\">\n      <div class=\"date-range-badge\">\n        <ion-icon name=\"calendar-outline\"></ion-icon>\n        <span class=\"date-range-label\">Report Period:</span>\n        <span class=\"date-range-value\">\n          {{ reportStartDate === reportEndDate\n            ? (reportStartDate | date:'dd MMM yyyy')\n            : (reportStartDate | date:'dd MMM yyyy') + ' - ' + (reportEndDate | date:'dd MMM yyyy')\n          }}\n        </span>\n      </div>\n    </div>\n\n    <!-- SC Statistics -->\n    <ion-card *ngIf=\"!loadingSCDashboard && scStatistics && scStatistics.length > 0\">\n      <ion-card-header>\n        <ion-card-title>\n          <ion-icon name=\"medical-outline\" color=\"primary\"></ion-icon>\n          Stabilization Center Statistics\n        </ion-card-title>\n      </ion-card-header>\n      <ion-card-content>\n        <ion-row class=\"measurement-grid\">\n          <ion-col size=\"6\" size-md=\"4\" *ngFor=\"let stat of scStatistics\">\n            <div class=\"measurement-box\" [ngClass]=\"'measurement-' + stat.color\">\n              <div class=\"measurement-value\">\n                {{ stat.count }}\n                <span class=\"measurement-unit\" *ngIf=\"stat.unit\">{{stat.unit}}</span>\n              </div>\n              <div class=\"measurement-label\">\n                <ion-icon [name]=\"stat.icon\" [color]=\"stat.color\"></ion-icon>\n                {{ stat.title }}\n              </div>\n            </div>\n          </ion-col>\n        </ion-row>\n      </ion-card-content>\n    </ion-card>\n\n    <!-- Empty State -->\n    <ion-card *ngIf=\"!loadingSCDashboard && (!scStatistics || scStatistics.length === 0)\">\n      <ion-card-content>\n        <div class=\"empty-state\">\n          <ion-icon name=\"medical-outline\" color=\"medium\"></ion-icon>\n          <h3>No Data</h3>\n          <p>No statistics available for the selected date range.</p>\n        </div>\n      </ion-card-content>\n    </ion-card>\n  </div>\n\n  <!-- Dashboard -->\n  <div class=\"stats-container\" *ngIf=\"user && user.user && user.user.user_type !== 'Store Keeper' && user.user.user_type !== 'SC Manager'\">\n    <div class=\"section-header\">\n      <h2 class=\"section-title\">\n        <ion-icon name=\"stats-chart-outline\" color=\"primary\"></ion-icon>\n        Dashboard\n      </h2>\n      <p class=\"section-subtitle\">Track general information, services, and distributions</p>\n    </div>\n\n    <ion-card class=\"filters-card\">\n      <ion-card-header>\n        <ion-card-title>\n          <ion-icon name=\"filter-outline\" color=\"primary\"></ion-icon>\n          Report Filters\n        </ion-card-title>\n        <ion-card-subtitle>Select date range to view dashboard data</ion-card-subtitle>\n      </ion-card-header>\n      <ion-card-content>\n        <!-- Quick Select Buttons -->\n        <div class=\"quick-select-buttons\">\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('today')\"\n            [color]=\"dateRangeType === 'today' ? 'primary' : 'medium'\">\n            <ion-icon name=\"today-outline\" slot=\"start\"></ion-icon>\n            <span>Today</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('week')\"\n            [color]=\"dateRangeType === 'week' ? 'primary' : 'medium'\">\n            <ion-icon name=\"calendar-outline\" slot=\"start\"></ion-icon>\n            <span>This Week</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('month')\"\n            [color]=\"dateRangeType === 'month' ? 'primary' : 'medium'\">\n            <ion-icon name=\"calendar-number-outline\" slot=\"start\"></ion-icon>\n            <span>This Month</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('6months')\"\n            [color]=\"dateRangeType === '6months' ? 'primary' : 'medium'\">\n            <ion-icon name=\"time-outline\" slot=\"start\"></ion-icon>\n            <span>Last 6 Months</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('year')\"\n            [color]=\"dateRangeType === 'year' ? 'primary' : 'medium'\">\n            <ion-icon name=\"calendar-clear-outline\" slot=\"start\"></ion-icon>\n            <span>Last 1 Year</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('custom')\"\n            [color]=\"dateRangeType === 'custom' ? 'primary' : 'medium'\">\n            <ion-icon name=\"options-outline\" slot=\"start\"></ion-icon>\n            <span>Custom</span>\n          </ion-button>\n        </div>\n\n        <!-- Date Range Inputs -->\n        <ion-row>\n          <ion-col size=\"12\" size-md=\"6\">\n            <ion-item class=\"form-item\">\n              <ion-icon slot=\"start\" name=\"calendar-outline\" color=\"primary\"></ion-icon>\n              <ion-label position=\"stacked\">Start Date</ion-label>\n              <ion-input\n                type=\"date\"\n                [(ngModel)]=\"reportStartDate\"\n                (ionChange)=\"onDateRangeChange()\"\n                [disabled]=\"loadingDashboard || dateRangeType !== 'custom'\"\n                placeholder=\"Select start date\">\n              </ion-input>\n            </ion-item>\n          </ion-col>\n          <ion-col size=\"12\" size-md=\"6\">\n            <ion-item class=\"form-item\">\n              <ion-icon slot=\"start\" name=\"calendar-outline\" color=\"primary\"></ion-icon>\n              <ion-label position=\"stacked\">End Date</ion-label>\n              <ion-input\n                type=\"date\"\n                [(ngModel)]=\"reportEndDate\"\n                (ionChange)=\"onDateRangeChange()\"\n                [disabled]=\"loadingDashboard || dateRangeType !== 'custom'\"\n                placeholder=\"Select end date\">\n              </ion-input>\n            </ion-item>\n          </ion-col>\n        </ion-row>\n\n        <!-- Refresh Button -->\n        <ion-row>\n          <ion-col size=\"12\">\n            <ion-button\n              expand=\"block\"\n              color=\"primary\"\n              (click)=\"loadDashboard()\"\n              [disabled]=\"loadingDashboard || !reportStartDate || !reportEndDate\"\n              class=\"refresh-button\">\n              <ion-icon slot=\"start\" name=\"refresh-outline\"></ion-icon>\n              Load Dashboard\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-card-content>\n    </ion-card>\n\n    <ion-card *ngIf=\"loadingDashboard\">\n      <ion-card-content>\n        <div class=\"loading-container\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          <p>Loading dashboard...</p>\n        </div>\n      </ion-card-content>\n    </ion-card>\n\n    <!-- Date Range Display -->\n    <div class=\"date-range-display\" *ngIf=\"reportStartDate && reportEndDate && dashboardData\">\n      <div class=\"date-range-badge\">\n        <ion-icon name=\"calendar-outline\"></ion-icon>\n        <span class=\"date-range-label\">Report Period:</span>\n        <span class=\"date-range-value\">\n          {{ reportStartDate === reportEndDate\n            ? (reportStartDate | date:'dd MMM yyyy')\n            : (reportStartDate | date:'dd MMM yyyy') + ' - ' + (reportEndDate | date:'dd MMM yyyy')\n          }}\n        </span>\n      </div>\n    </div>\n\n\n    <!-- Section: Measurement Information (for Measurer and Facility Supervisor only) -->\n    <ion-card *ngIf=\"!loadingDashboard && dashboardData && dashboardData.measurement && shouldShowMeasurementInfo()\">\n      <ion-card-header>\n        <ion-card-title>\n          <ion-icon name=\"body-outline\" color=\"primary\"></ion-icon>\n          Anthropometric Measurement Information\n        </ion-card-title>\n      </ion-card-header>\n      <ion-card-content>\n        <ion-row class=\"measurement-grid\">\n          <ion-col size=\"6\" size-md=\"4\" *ngFor=\"let metric of measurementSummary; trackBy: trackByTitle\">\n            <div class=\"measurement-box\" [ngClass]=\"metric.colorClass\">\n              <div class=\"measurement-icon\">\n                <ion-icon [name]=\"metric.icon\"></ion-icon>\n              </div>\n              <div class=\"measurement-content\">\n                <p class=\"measurement-label\">{{ metric.title }}</p>\n                <p class=\"measurement-value\">{{ getMeasurementCount(metric.key) | number }}</p>\n              </div>\n            </div>\n          </ion-col>\n        </ion-row>\n\n        <div class=\"gmp-table-container\" *ngIf=\"gmpTargets.length > 0\">\n          <div class=\"gmp-table-header\">\n            <ion-icon name=\"podium-outline\" color=\"primary\"></ion-icon>\n            <div>\n              <p class=\"gmp-table-title\">Target vs Achievement (Not Applicable for Custom Date range)</p>\n              <p class=\"gmp-table-subtitle\">Tracking growth monitoring performance</p>\n            </div>\n          </div>\n          <div class=\"gmp-table\">\n            <div class=\"gmp-table-row gmp-table-row--head\">\n              <div class=\"gmp-cell gmp-title\">Group</div>\n              <div class=\"gmp-cell gmp-target\">Target</div>\n              <div class=\"gmp-cell gmp-achievement\">Achievement</div>\n              <div class=\"gmp-cell gmp-progress\">Progress</div>\n            </div>\n            <div class=\"gmp-table-row\" *ngFor=\"let row of gmpTargets; trackBy: trackByTitle\">\n              <div class=\"gmp-cell gmp-title\">{{ row.title }}</div>\n              <div class=\"gmp-cell gmp-target\">{{ row.target | number }}</div>\n              <div class=\"gmp-cell gmp-achievement\">{{ row.achievement | number }}</div>\n              <div class=\"gmp-cell gmp-progress\">\n                <div class=\"gmp-progress-bar\">\n                  <div class=\"gmp-progress-fill\" [style.width.%]=\"getGmpAchievementPercent(row)\"></div>\n                </div>\n                <span>{{ getGmpAchievementPercent(row) | number:'1.0-0' }}%</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </ion-card-content>\n    </ion-card>\n\n    <!-- Nurse Dashboard (online only for Nurses & Facility Supervisors) -->\n    <ng-container *ngIf=\"canAccessNurseDashboard()\">\n      <ion-card class=\"nurse-offline-card\" *ngIf=\"!isOnline\">\n        <ion-card-content>\n          <div class=\"offline-notice\">\n            <ion-icon name=\"cloud-offline-outline\" color=\"medium\"></ion-icon>\n            <div>\n              <h3>Nurse dashboard is available online only</h3>\n              <p>Please reconnect to view real-time OTP & TSFP insights.</p>\n            </div>\n          </div>\n        </ion-card-content>\n      </ion-card>\n\n      <ion-card class=\"nurse-dashboard-card\" *ngIf=\"shouldShowNurseDashboard()\">\n        <ion-card-header>\n          <ion-card-title>\n            <ion-icon name=\"medkit-outline\" color=\"primary\"></ion-icon>\n            Nurse Service Information\n          </ion-card-title>\n          <ion-card-subtitle>OTP & TSFP Programme snapshots for clinical follow-up</ion-card-subtitle>\n        </ion-card-header>\n        <ion-card-content>\n          <ng-container *ngIf=\"loadingDashboard; else nurseDataTemplate\">\n            <div class=\"loading-container\">\n              <ion-spinner name=\"crescent\"></ion-spinner>\n              <p>Loading nurse statistics...</p>\n            </div>\n          </ng-container>\n\n          <ng-template #nurseDataTemplate>\n            <ng-container *ngIf=\"nurseSummaryMetrics as nurseSummary\">\n              <ng-container *ngIf=\"nurseBreakdownGroups as nurseBreakdowns\">\n                <div class=\"nurse-summary-section\" *ngIf=\"nurseSummary.length > 0\">\n                  <div class=\"nurse-summary-group\" *ngIf=\"nurseOtpSummaryMetrics.length > 0\">\n                    <div class=\"nurse-program-label otp-label\">\n                      <ion-icon name=\"pulse-outline\"></ion-icon>\n                      <span>OTP Caseload (SAM)</span>\n                    </div>\n                    <div class=\"nurse-summary-grid\">\n                      <div\n                        class=\"nurse-summary-card\"\n                        [ngClass]=\"getNurseProgramClass(metric.title)\"\n                        *ngFor=\"let metric of nurseOtpSummaryMetrics; trackBy: trackByTitle\">\n                        <div class=\"summary-card-header\">\n                          <ion-icon [name]=\"getNurseMetricIcon(metric.title)\"></ion-icon>\n                          <span class=\"summary-card-title\">{{ metric.title }}</span>\n                        </div>\n                        <div class=\"summary-card-value\">{{ metric.count | number }}</div>\n                      </div>\n                    </div>\n                  </div>\n\n                  <div class=\"nurse-summary-group\" *ngIf=\"nurseTsfpSummaryMetrics.length > 0\">\n                    <div class=\"nurse-program-label tsfp-label\">\n                      <ion-icon name=\"nutrition-outline\"></ion-icon>\n                      <span>TSFP Caseload (MAM)</span>\n                    </div>\n                    <div class=\"nurse-summary-grid\">\n                      <div\n                        class=\"nurse-summary-card\"\n                        [ngClass]=\"getNurseProgramClass(metric.title)\"\n                        *ngFor=\"let metric of nurseTsfpSummaryMetrics; trackBy: trackByTitle\">\n                        <div class=\"summary-card-header\">\n                          <ion-icon [name]=\"getNurseMetricIcon(metric.title)\"></ion-icon>\n                          <span class=\"summary-card-title\">{{ metric.title }}</span>\n                        </div>\n                        <div class=\"summary-card-value\">{{ metric.count | number }}</div>\n                      </div>\n                    </div>\n                  </div>\n\n                  <div class=\"nurse-summary-group\" *ngIf=\"nurseOtherSummaryMetrics.length > 0\">\n                    <div class=\"nurse-program-label\">\n                      <ion-icon name=\"stats-chart-outline\"></ion-icon>\n                      <span>Additional Metrics</span>\n                    </div>\n                    <div class=\"nurse-summary-grid\">\n                      <div\n                        class=\"nurse-summary-card\"\n                        [ngClass]=\"getNurseProgramClass(metric.title)\"\n                        *ngFor=\"let metric of nurseOtherSummaryMetrics; trackBy: trackByTitle\">\n                        <div class=\"summary-card-header\">\n                          <ion-icon [name]=\"getNurseMetricIcon(metric.title)\"></ion-icon>\n                          <span class=\"summary-card-title\">{{ metric.title }}</span>\n                        </div>\n                        <div class=\"summary-card-value\">{{ metric.count | number }}</div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n\n                <div class=\"nurse-breakdown-wrapper\" *ngIf=\"nurseBreakdowns.length > 0\">\n                  <ng-container *ngTemplateOutlet=\"breakdownGroupTemplate; context: {\n                    groups: nurseOtpBreakdownGroups,\n                    label: 'OTP Criteria',\n                    icon: 'pulse-outline',\n                    className: 'otp-label'\n                  }\">\n                  </ng-container>\n\n                  <ng-container *ngTemplateOutlet=\"breakdownGroupTemplate; context: {\n                    groups: nurseTsfpBreakdownGroups,\n                    label: 'TSFP Criteria',\n                    icon: 'nutrition-outline',\n                    className: 'tsfp-label'\n                  }\">\n                  </ng-container>\n\n                  <ng-container *ngTemplateOutlet=\"breakdownGroupTemplate; context: {\n                    groups: nurseOtherBreakdownGroups,\n                    label: 'Additional Insights',\n                    icon: 'analytics-outline',\n                    className: ''\n                  }\">\n                  </ng-container>\n                </div>\n\n                <div class=\"empty-state\" *ngIf=\"!nurseSummary.length && !nurseBreakdowns.length && !loadingDashboard\">\n                  <ion-icon name=\"medkit-outline\" color=\"medium\"></ion-icon>\n                  <h3>No nurse statistics</h3>\n                  <p>There are no OTP or TSFP updates for the selected dates.</p>\n                </div>\n              </ng-container>\n            </ng-container>\n          </ng-template>\n\n          <ng-template #breakdownGroupTemplate let-groups=\"groups\" let-label=\"label\" let-icon=\"icon\" let-className=\"className\">\n            <div class=\"nurse-breakdown-category\" *ngIf=\"groups && groups.length > 0\">\n              <div class=\"breakdown-group-label\" [ngClass]=\"className ? className : null\">\n                <ion-icon [name]=\"icon\"></ion-icon>\n                <span>{{ label }}</span>\n              </div>\n              <div class=\"nurse-breakdown-section\" *ngFor=\"let group of groups; trackBy: trackByTitle\">\n                <div class=\"breakdown-header\">\n                  <div class=\"breakdown-title\">\n                    <ion-icon name=\"list-circle-outline\" color=\"primary\"></ion-icon>\n                    <span>{{ group.title }}</span>\n                  </div>\n                  <ion-badge color=\"success\" style=\"font-size: 1.3em;\">\n                    {{ getNurseBreakdownTotal(group.breakdown) }} Total\n                  </ion-badge>\n                </div>\n                <div class=\"nurse-breakdown-grid\">\n                  <div class=\"nurse-breakdown-card\" *ngFor=\"let breakdown of group.breakdown; trackBy: trackByKey\">\n                    <span class=\"breakdown-label\">{{ breakdown.label }}</span>\n                    <span class=\"breakdown-count\">{{ breakdown.count | number }}</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </ion-card-content>\n      </ion-card>\n    </ng-container>\n\n    <!-- Section: PBW Anthropometric Measurement Information (for PBW - Point and Facility Supervisor only) -->\n    <ion-card *ngIf=\"!loadingDashboard && dashboardData && dashboardData.pbw_measurement && shouldShowPbwMeasurementInfo()\">\n      <ion-card-header>\n        <ion-card-title>\n          <ion-icon name=\"body-outline\" color=\"primary\"></ion-icon>\n          PBW Anthropometric Measurement Information\n        </ion-card-title>\n      </ion-card-header>\n      <ion-card-content>\n        <ion-row class=\"measurement-grid\">\n          <ion-col size=\"6\" size-md=\"4\" *ngFor=\"let metric of pbwMeasurementSummary; trackBy: trackByTitle\">\n            <div class=\"measurement-box\" [ngClass]=\"metric.colorClass\">\n              <div class=\"measurement-icon\">\n                <ion-icon [name]=\"metric.icon\"></ion-icon>\n              </div>\n              <div class=\"measurement-content\">\n                <p class=\"measurement-label\">{{ metric.title }}</p>\n                <p class=\"measurement-value\">{{ getPbwMeasurementCount(metric.key) | number }}</p>\n              </div>\n            </div>\n          </ion-col>\n        </ion-row>\n      </ion-card-content>\n    </ion-card>\n\n    <!-- IYCF Counselor Dashboard -->\n    <ng-container *ngIf=\"canAccessMiycnDashboard()\">\n      <ion-card class=\"counselor-offline-card\" *ngIf=\"!isOnline\">\n        <ion-card-content>\n          <div class=\"offline-notice\">\n            <ion-icon name=\"cloud-offline-outline\" color=\"medium\"></ion-icon>\n            <div>\n              <h3>IYCF counselor dashboard is available online only</h3>\n              <p>Reconnect to review latest group sessions and counseling coverage.</p>\n            </div>\n          </div>\n        </ion-card-content>\n      </ion-card>\n\n      <ion-card class=\"miycn-dashboard-card\" *ngIf=\"shouldShowMiycnDashboard()\">\n        <ion-card-header>\n          <ion-card-title>\n            <ion-icon name=\"people-circle-outline\" color=\"primary\"></ion-icon>\n            IYCF Counseling Overview\n          </ion-card-title>\n          <ion-card-subtitle>Track MIYCN sessions, counseling visits, and service reach</ion-card-subtitle>\n        </ion-card-header>\n        <ion-card-content>\n          <ng-container *ngIf=\"loadingDashboard; else miycnDataTemplate\">\n            <div class=\"loading-container\">\n              <ion-spinner name=\"crescent\"></ion-spinner>\n              <p>Loading MIYCN statistics...</p>\n            </div>\n          </ng-container>\n\n          <ng-template #miycnDataTemplate>\n            <div *ngIf=\"hasMiycnMetrics(); else miycnEmptyState\">\n              <div class=\"dashboard-table-container\">\n                <table class=\"dashboard-table\">\n                  <thead>\n                    <tr>\n                      <th>Category</th>\n                      <th>Count</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    <tr *ngFor=\"let metric of miycnMetrics; trackBy: trackByTitle\">\n                      <td class=\"category-title\">{{ metric.title }}</td>\n                      <td class=\"achievement-count\">\n                        <span class=\"count-value\" [ngClass]=\"{'highlight-today': metric.count > 0}\">\n                          {{ metric.count | number }}\n                        </span>\n                      </td>\n                    </tr>\n                  </tbody>\n                </table>\n              </div>\n            </div>\n            <ng-template #miycnEmptyState>\n              <div class=\"empty-state\">\n                <ion-icon name=\"people-circle-outline\" color=\"medium\"></ion-icon>\n                <h3>No MIYCN data</h3>\n                <p>There are no IYCF counseling updates for the selected dates.</p>\n              </div>\n            </ng-template>\n          </ng-template>\n        </ion-card-content>\n      </ion-card>\n    </ng-container>\n\n    <!-- PBW Service Provider Dashboard -->\n    <ng-container *ngIf=\"canAccessPbwDashboard()\">\n      <ion-card class=\"pbw-offline-card\" *ngIf=\"!isOnline\">\n        <ion-card-content>\n          <div class=\"offline-notice\">\n            <ion-icon name=\"cloud-offline-outline\" color=\"medium\"></ion-icon>\n            <div>\n              <h3>PBW dashboard is available online only</h3>\n              <p>Reconnect to review latest BSFP & TSFP PLW services and coverage.</p>\n            </div>\n          </div>\n        </ion-card-content>\n      </ion-card>\n\n      <ion-card class=\"pbw-dashboard-card\" *ngIf=\"shouldShowPbwDashboard()\">\n        <ion-card-header>\n          <ion-card-title>\n            <ion-icon name=\"woman-outline\" color=\"primary\"></ion-icon>\n            PBW Service Information\n          </ion-card-title>\n          <ion-card-subtitle>BSFP & TSFP PLW programme snapshots for service delivery</ion-card-subtitle>\n        </ion-card-header>\n        <ion-card-content>\n          <ng-container *ngIf=\"loadingDashboard; else pbwDataTemplate\">\n            <div class=\"loading-container\">\n              <ion-spinner name=\"crescent\"></ion-spinner>\n              <p>Loading PBW statistics...</p>\n            </div>\n          </ng-container>\n\n          <ng-template #pbwDataTemplate>\n            <ng-container *ngIf=\"pbwSummaryMetrics as pbwSummary\">\n              <ng-container *ngIf=\"pbwBreakdownGroups as pbwBreakdowns\">\n                <div class=\"nurse-summary-section\" *ngIf=\"pbwSummary.length > 0\">\n                  <div class=\"nurse-summary-group\" *ngIf=\"pbwBsfpSummaryMetrics.length > 0\">\n                    <div class=\"nurse-program-label bsfp-label\">\n                      <ion-icon name=\"fitness-outline\"></ion-icon>\n                      <span>BSFP Caseload (PLW)</span>\n                    </div>\n                    <div class=\"nurse-summary-grid\">\n                      <div\n                        class=\"nurse-summary-card\"\n                        [ngClass]=\"getPbwProgramClass(metric.title)\"\n                        *ngFor=\"let metric of pbwBsfpSummaryMetrics; trackBy: trackByTitle\">\n                        <div class=\"summary-card-header\">\n                          <ion-icon [name]=\"getPbwMetricIcon(metric.title)\"></ion-icon>\n                          <span class=\"summary-card-title\">{{ metric.title }}</span>\n                        </div>\n                        <div class=\"summary-card-value\">{{ metric.count | number }}</div>\n                      </div>\n                    </div>\n                  </div>\n\n                  <div class=\"nurse-summary-group\" *ngIf=\"pbwTsfpSummaryMetrics.length > 0\">\n                    <div class=\"nurse-program-label tsfp-label\">\n                      <ion-icon name=\"heart-outline\"></ion-icon>\n                      <span>TSFP Caseload (PLW)</span>\n                    </div>\n                    <div class=\"nurse-summary-grid\">\n                      <div\n                        class=\"nurse-summary-card\"\n                        [ngClass]=\"getPbwProgramClass(metric.title)\"\n                        *ngFor=\"let metric of pbwTsfpSummaryMetrics; trackBy: trackByTitle\">\n                        <div class=\"summary-card-header\">\n                          <ion-icon [name]=\"getPbwMetricIcon(metric.title)\"></ion-icon>\n                          <span class=\"summary-card-title\">{{ metric.title }}</span>\n                        </div>\n                        <div class=\"summary-card-value\">{{ metric.count | number }}</div>\n                      </div>\n                    </div>\n                  </div>\n\n                  <div class=\"nurse-summary-group\" *ngIf=\"pbwOtherSummaryMetrics.length > 0\">\n                    <div class=\"nurse-program-label\">\n                      <ion-icon name=\"stats-chart-outline\"></ion-icon>\n                      <span>Additional Metrics</span>\n                    </div>\n                    <div class=\"nurse-summary-grid\">\n                      <div\n                        class=\"nurse-summary-card\"\n                        [ngClass]=\"getPbwProgramClass(metric.title)\"\n                        *ngFor=\"let metric of pbwOtherSummaryMetrics; trackBy: trackByTitle\">\n                        <div class=\"summary-card-header\">\n                          <ion-icon [name]=\"getPbwMetricIcon(metric.title)\"></ion-icon>\n                          <span class=\"summary-card-title\">{{ metric.title }}</span>\n                        </div>\n                        <div class=\"summary-card-value\">{{ metric.count | number }}</div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n\n                <div class=\"nurse-breakdown-wrapper\" *ngIf=\"pbwBreakdowns.length > 0\">\n                  <ng-container *ngTemplateOutlet=\"pbwBreakdownGroupTemplate; context: {\n                    groups: pbwBsfpBreakdownGroups,\n                    label: 'BSFP Criteria',\n                    icon: 'fitness-outline',\n                    className: 'bsfp-label'\n                  }\">\n                  </ng-container>\n\n                  <ng-container *ngTemplateOutlet=\"pbwBreakdownGroupTemplate; context: {\n                    groups: pbwTsfpBreakdownGroups,\n                    label: 'TSFP Criteria',\n                    icon: 'heart-outline',\n                    className: 'tsfp-label'\n                  }\">\n                  </ng-container>\n\n                  <ng-container *ngTemplateOutlet=\"pbwBreakdownGroupTemplate; context: {\n                    groups: pbwOtherBreakdownGroups,\n                    label: 'Additional Insights',\n                    icon: 'analytics-outline',\n                    className: ''\n                  }\">\n                  </ng-container>\n                </div>\n\n                <div class=\"empty-state\" *ngIf=\"!pbwSummary.length && !pbwBreakdowns.length && !loadingDashboard\">\n                  <ion-icon name=\"woman-outline\" color=\"medium\"></ion-icon>\n                  <h3>No PBW statistics</h3>\n                  <p>There are no BSFP or TSFP PLW updates for the selected dates.</p>\n                </div>\n              </ng-container>\n            </ng-container>\n          </ng-template>\n\n          <ng-template #pbwBreakdownGroupTemplate let-groups=\"groups\" let-label=\"label\" let-icon=\"icon\" let-className=\"className\">\n            <div class=\"nurse-breakdown-category\" *ngIf=\"groups && groups.length > 0\">\n              <div class=\"breakdown-group-label\" [ngClass]=\"className ? className : null\">\n                <ion-icon [name]=\"icon\"></ion-icon>\n                <span>{{ label }}</span>\n              </div>\n              <div class=\"nurse-breakdown-section\" *ngFor=\"let group of groups; trackBy: trackByTitle\">\n                <div class=\"breakdown-header\">\n                  <div class=\"breakdown-title\">\n                    <ion-icon name=\"list-circle-outline\" color=\"primary\"></ion-icon>\n                    <span>{{ group.title }}</span>\n                  </div>\n                  <ion-badge color=\"success\" style=\"font-size: 1.3em;\">\n                    {{ getPbwBreakdownTotal(group.breakdown) }} Total\n                  </ion-badge>\n                </div>\n                <div class=\"nurse-breakdown-grid\">\n                  <div class=\"nurse-breakdown-card\" *ngFor=\"let breakdown of group.breakdown; trackBy: trackByKey\">\n                    <span class=\"breakdown-label\">{{ breakdown.label }}</span>\n                    <span class=\"breakdown-count\">{{ breakdown.count | number }}</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </ion-card-content>\n      </ion-card>\n    </ng-container>\n\n    <!-- Disability Information (for Facility Supervisor only) -->\n    <ion-card *ngIf=\"!loadingDashboard && dashboardData && dashboardData.disability && shouldShowDisabilityInfo()\">\n      <ion-card-header>\n        <ion-card-title>\n          <ion-icon name=\"accessibility-outline\" color=\"primary\"></ion-icon>\n          Disability Information\n        </ion-card-title>\n      </ion-card-header>\n      <ion-card-content>\n        <ion-row class=\"measurement-grid\">\n          <ion-col size=\"6\" size-md=\"4\" *ngFor=\"let metric of disabilityMetrics; trackBy: trackByTitle\">\n            <div class=\"measurement-box\" [ngClass]=\"metric.colorClass\">\n              <div class=\"measurement-icon\">\n                <ion-icon [name]=\"metric.icon\"></ion-icon>\n              </div>\n              <div class=\"measurement-content\">\n                <p class=\"measurement-label\">{{ metric.title }}</p>\n                <p class=\"measurement-value\">{{ metric.count | number }}</p>\n              </div>\n            </div>\n          </ion-col>\n        </ion-row>\n      </ion-card-content>\n    </ion-card>\n\n    <!-- Section 1: General Information -->\n    <ion-card *ngIf=\"!loadingDashboard && dashboardData && dashboardData.general_information && dashboardData.general_information.length > 0 && shouldShowGeneralInfo()\">\n      <ion-card-header>\n        <ion-card-title>\n          <ion-icon name=\"information-circle-outline\" color=\"primary\"></ion-icon>\n          General Information\n        </ion-card-title>\n      </ion-card-header>\n      <ion-card-content>\n        <div class=\"dashboard-table-container\">\n          <table class=\"dashboard-table\">\n            <thead>\n              <tr>\n                <th>Category</th>\n                <th>Count</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let item of dashboardData.general_information\">\n                <td class=\"category-title\">{{ item.title }}</td>\n                <td class=\"achievement-count\">\n                  <span class=\"count-value\" [ngClass]=\"{'highlight-today': item.count > 0}\">\n                    {{ item.count }}\n                  </span>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </ion-card-content>\n    </ion-card>\n\n    <!-- Section 2: Distribution -->\n    <ion-card *ngIf=\"!loadingDashboard && dashboardData && dashboardData.distribution && shouldShowDistribution()\">\n      <ion-card-header>\n        <ion-card-title>\n          <ion-icon name=\"basket-outline\" color=\"primary\"></ion-icon>\n          Distribution Summary\n        </ion-card-title>\n      </ion-card-header>\n      <ion-card-content>\n        <div class=\"stock-table-container\" *ngIf=\"dashboardData.distribution.length > 0\">\n          <table class=\"stock-table\">\n            <thead>\n              <tr>\n                <th>#</th>\n                <th>Item</th>\n                <th>Unit</th>\n                <th>Available</th>\n                <th>Distributed</th>\n                <th>Used %</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let item of dashboardData.distribution; let i = index\">\n                <td class=\"serial-number\">{{ i + 1 }}</td>\n                <td class=\"item-title\">{{ item.item_name }}</td>\n                <td class=\"unit\">{{ item.unit }}</td>\n                <td class=\"numeric available-stock\">{{ item.available | number:'1.0-2' }}</td>\n                <td class=\"numeric supply-out\">{{ item.distributed | number:'1.0-2' }}</td>\n                <td class=\"numeric used-percentage\">\n                  <span class=\"count-value\" [ngClass]=\"{\n                    'progress-excellent': item.used_percentage >= 90,\n                    'progress-good': item.used_percentage >= 70 && item.used_percentage < 90,\n                    'progress-moderate': item.used_percentage >= 50 && item.used_percentage < 70,\n                    'progress-low': item.used_percentage < 50 && item.available > 0\n                  }\">\n                    {{ item.used_percentage | number:'1.0-1' }}%\n                  </span>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n        <div class=\"empty-state\" *ngIf=\"dashboardData.distribution.length === 0\">\n          <ion-icon name=\"basket-outline\" color=\"medium\"></ion-icon>\n          <h3>No Survey Items</h3>\n          <p>No supply items are configured in active survey forms.</p>\n        </div>\n      </ion-card-content>\n    </ion-card>\n  </div>\n\n\n  <!-- Loading Template -->\n  <ng-template #loadingTemplate>\n    <ion-card>\n      <ion-card-content>\n        <div class=\"loading-container\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          <p>Loading dashboard data...</p>\n        </div>\n      </ion-card-content>\n    </ion-card>\n  </ng-template>\n\n  <!-- Floating Action Buttons -->\n  <ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"user && user.user && user.user.user_type !== 'Store Keeper'\">\n    <ion-fab-button color=\"primary\">\n      <ion-icon name=\"apps-outline\"></ion-icon>\n    </ion-fab-button>\n    <ion-fab-list side=\"top\">\n      <ion-fab-button [routerLink]=\"b.routesConfig.childList\" color=\"tertiary\">\n        <ion-icon name=\"person-outline\"></ion-icon>\n      </ion-fab-button>\n      <ion-fab-button [routerLink]=\"b.routesConfig.plwList\" color=\"secondary\">\n        <ion-icon name=\"woman-outline\"></ion-icon>\n      </ion-fab-button>\n    </ion-fab-list>\n  </ion-fab>\n</ion-content>\n";

/***/ })

}]);
//# sourceMappingURL=src_app_pages_home_home_module_ts.js.map