principal-dashboard-lib-v2 0.0.30 → 0.0.32

package/bundles/principal-dashboard-lib-v2.umd.js

@@ -29,6 +29,8 @@
             //for get details of selected user
             this.detailedviewData = new rxjs.BehaviorSubject(this.userMetadata);
             this.detailedviewData$ = this.detailedviewData.asObservable();
+            this.openSmallTable = new rxjs.BehaviorSubject(false);
+            this.openSmallTable$ = this.openSmallTable.asObservable();
         }
         PrincipalDashboardLibV2Service.prototype.genarateResourseReqiuredData = function (data) {
             this.isResoureMetaDataReady.next(false);
@@ -868,7 +870,7 @@
     PrincipalDashboardLibV2Component.decorators = [
         { type: i0.Component, args: [{
                     selector: 'lib-principal-dashboard-lib-v2',
-                    template: "<div id=\"reprtModule\">\n    <div id=\"pd-mainDiv\" class=\"pd-mainContainer\">\n      <lib-header [data]=\"data\" (userSelectedDate)=\"onUserSelectDate($event)\">\n      </lib-header>\n      <lib-chartheader></lib-chartheader>\n       \n      <div id=\"pd-preloader\" class=\"pd-preloaderDiv\" *ngIf=\"responseStatus !== 'true' && !data\">\n      {{messageForUser}} \n      </div>\n      <lib-chartview *ngIf=\"data\" [data]=\"data\"></lib-chartview>\n      <!-- <lib-tableview *ngIf=\"data\" [data]=\"data\"></lib-tableview>  -->\n      <lib-full-table-view *ngIf=\"data\"  [data]=\"data\"></lib-full-table-view>\n      <lib-detailedview *ngIf=\"data\" [data]=\"data\"></lib-detailedview>\n      \n    </div>\n</div>\n  ",
+                    template: "<div id=\"reprtModule\">\n    <div id=\"pd-mainDiv\" class=\"pd-mainContainer\">\n      <lib-header [data]=\"data\" (userSelectedDate)=\"onUserSelectDate($event)\">\n      </lib-header>\n      <lib-chartheader></lib-chartheader>\n       \n      <div id=\"pd-preloader\" class=\"pd-preloaderDiv\" *ngIf=\"responseStatus !== 'true' && !data\">\n      {{messageForUser}} \n      </div>\n      <lib-chartview *ngIf=\"data\" [data]=\"data\"></lib-chartview>\n      <!-- <lib-tableview *ngIf=\"data\" [data]=\"data\"></lib-tableview>  -->\n      <lib-full-table-view *ngIf=\"data\"  [data]=\"data\"></lib-full-table-view>\n      <!-- <lib-detailedview *ngIf=\"data\" [data]=\"data\"></lib-detailedview> -->\n      <lib-small-table-view *ngIf=\"data\" [data]=\"data\"></lib-small-table-view>\n      \n    </div>\n</div>\n  ",
                     styles: [".pd-mainContainer{width:100%;height:100%}.pd-mainContainer .pd-preloaderDiv{text-align:center;line-height:27;position:absolute;width:100%;height:87%;z-index:2}.bs-datepicker-head{background-color:#000!important}"]
                 },] }
     ];
@@ -889,7 +891,7 @@
             this.isChartView = true;
         }
         ChartheaderComponent.prototype.ngOnInit = function () {
-            this.libVersion = "0.0.30";
+            this.libVersion = "0.0.32";
             // this.myIcon = document.getElementById('myIconImg');
             // this.changeChatType() 
         };
@@ -1530,7 +1532,9 @@
             else {
                 this.selectedUserData = this.pdService.dataForDetailedView(this.currentdataList.userConsoleData, this.resourceDataList, row);
             }
+            var smallData = [{ 'a': this.currentdataList, 'b': row }];
             //  console.log("this.selectedUserData",this.selectedUserData);
+            this.pdService.openSmallTable.next(this.selectedUserData);
             this.pdService.detailedviewData.next(this.selectedUserData);
             this.updateChart();
             // alluserList
@@ -2524,6 +2528,7 @@
             this.getDateFormat(e);
             this.mydata = null;
             this.refreshChart();
+            this.pdService.openSmallTable.next(false);
         };
         HeaderComponent.prototype.getDateFormat = function (date) {
             var day = date.getDate();
@@ -2925,12 +2930,12 @@
                     var userConsoleResource = (_a = user.userConsoleResources) === null || _a === void 0 ? void 0 : _a.userConsoleResource;
                     if (userConsoleResource && userConsoleResource.length > 0) {
                         userConsoleResource.forEach(function (userResource, userIndex) {
-                            var _a, _b, _c, _d;
+                            var _a, _b, _c, _d, _e, _f;
                             var resourceId = userResource.resourceId;
                             var resourceDetails = resourcesMetadata.find(function (resource) { return resource.resourceId === resourceId &&
                                 userResource.type === resource.type; });
                             var prefix = _this.getDisplayTypeValue(userResource.type);
-                            var title = resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.title;
+                            var title = (resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.title) || '';
                             var tp = (_a = resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.teachingPoint) === null || _a === void 0 ? void 0 : _a.title;
                             var subject = (_b = resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.subject) === null || _b === void 0 ? void 0 : _b.title;
                             var chapter = (_c = resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.chapter) === null || _c === void 0 ? void 0 : _c.title;
@@ -2939,7 +2944,17 @@
                             var endTime = new Date(user === null || user === void 0 ? void 0 : user.endTime);
                             var totalDuration = _this.formatTime(Math.round((endTime.getTime() - startTime.getTime()) / 1000));
                             var duration = parseInt((userResource === null || userResource === void 0 ? void 0 : userResource.duration) || '0');
-                            duration = duration === 0 ? "<span style='colore:red;'>(Seen)</span>" : _this.formatTime(duration);
+                            //duration = duration === 0 ? "<span style='colore:red;'>(Seen)</span>" : this.formatTime(duration);
+                            if (((_e = userResource === null || userResource === void 0 ? void 0 : userResource.type) === null || _e === void 0 ? void 0 : _e.includes('question')) || ((_f = userResource === null || userResource === void 0 ? void 0 : userResource.type) === null || _f === void 0 ? void 0 : _f.includes('cquestion'))) {
+                                duration = 0;
+                            }
+                            else {
+                                duration = duration === 0 ? "<span class='seenTag' style='color:blue;'>(Seen)</span>" : _this.formatTime(duration);
+                            }
+                            var finalAssetTitle = prefix + " : " + title + " : " + duration;
+                            if (title === '') {
+                                finalAssetTitle = prefix + " : " + duration;
+                            }
                             _this.currentUserArray.push({
                                 userId: user.userId,
                                 teacherName: userIndex === 0 ? userDetails === null || userDetails === void 0 ? void 0 : userDetails.fullName : '',
@@ -2953,7 +2968,7 @@
                                 subject: subject,
                                 chapter: chapter,
                                 grade: grade,
-                                details: prefix + " : " + title + " : " + duration,
+                                details: finalAssetTitle,
                             });
                         });
                     }
@@ -3060,8 +3075,8 @@
     FullTableViewComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'lib-full-table-view',
-                    template: "\n<div class=\"tableViewList\" *ngIf=\"isDisplay\">\n    <!-- <label for=\"usersCheckbox\">All</label>\n        <input\n          type=\"checkbox\"\n          id=\"usersCheckbox\"\n          [checked]=\"usersCheckboxChecked\"\n          (change)=\"toggleUsers()\"\n        /> -->\n    <div class=\"tableArea\">\n        \n        <table id=\"teacherTable\">\n          <thead class=\"tablehead\">\n            <tr>\n              <th>Teacher Name</th>\n              <th>Subjects</th>\n              <th>Date</th>\n              <th>Start Time</th>\n              <th>End Time</th>\n              <th>Total Duration</th>\n              <th>Room</th>\n              <th>TP</th>\n              <th>Subject</th>\n              <th>Chapter</th>\n              <th>Grade</th>\n              <th>Details</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let user of currentUserArray\">\n              <td>{{ user.teacherName }}</td>\n              <td>{{ user.subjects }}</td>\n              <td>{{ user.date }}</td>\n              <td>{{ user.startTime }}</td>\n              <td>{{ user.endtime }}</td>\n              <td>{{ user.totalDuration }}</td>\n              <td>{{ user.room }}</td>\n              <td>{{ user.tp }}</td>\n              <td>{{ user.subject }}</td>\n              <td>{{ user.chapter }}</td>\n              <td>{{ user.grade }}</td>\n              <td [innerHTML]=\"user.details\"></td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    \n</div>\n  ",
-                    styles: ["body{font-family:Arial,sans-serif;margin:20px}.tablehead{position:sticky;top:0;background:#fff}table{width:100%;border-collapse:collapse}td,th{border:1px solid #ddd;padding:8px;text-align:left}th{background-color:#f4f4f4;font-weight:700}tr:nth-child(2n){background-color:#f9f9f9}tr:hover{background-color:#f1f1f1}.tableViewList{position:absolute;margin-top:20px}.tableArea{height:700px;overflow:scroll;font-size:12px;margin:20px 5px 5px}.tagseen{color:#00f}"]
+                    template: "\n<div class=\"tableViewList\" *ngIf=\"isDisplay\">\n    <!-- <label for=\"usersCheckbox\">All</label>\n        <input\n          type=\"checkbox\"\n          id=\"usersCheckbox\"\n          [checked]=\"usersCheckboxChecked\"\n          (change)=\"toggleUsers()\"\n        /> -->\n    <div class=\"tableArea\">\n        \n        <table id=\"teacherTable\">\n          <thead class=\"tablehead\">\n            <tr>\n              <th>Teacher Name</th>\n              <th>Subjects</th>\n              <th>Date</th>\n              <th>Start Time</th>\n              <th>End Time</th>\n              <th>Total Duration</th>\n              <th>Room</th>\n              <th>Topic</th>\n              <th>Subject</th>\n              <th>Chapter</th>\n              <th>Grade</th>\n              <th>Details</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let user of currentUserArray\">\n              <td>{{ user.teacherName }}</td>\n              <td>{{ user.subjects }}</td>\n              <td>{{ user.date }}</td>\n              <td>{{ user.startTime }}</td>\n              <td>{{ user.endtime }}</td>\n              <td>{{ user.totalDuration }}</td>\n              <td>{{ user.room }}</td>\n              <td>{{ user.tp }}</td>\n              <td>{{ user.subject }}</td>\n              <td>{{ user.chapter }}</td>\n              <td>{{ user.grade }}</td>\n              <td><div [innerHTML]=\"user.details\"></div></td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    \n</div>\n  ",
+                    styles: ["body{font-family:Arial,sans-serif;margin:20px}.tablehead{position:sticky;top:0;background:#fff}table{width:100%;border-collapse:collapse}td,th{border:1px solid #ddd;padding:8px;text-align:left}th{background-color:#f4f4f4;font-weight:700}tr:nth-child(2n){background-color:#f9f9f9}tr:hover{background-color:#f1f1f1}.tableViewList{position:absolute;margin-top:20px}.tableArea{height:700px;overflow:scroll;font-size:12px;margin:20px 5px 5px}.seenTag{color:#00f}"]
                 },] }
     ];
     FullTableViewComponent.ctorParameters = function () { return [
@@ -3071,6 +3086,241 @@
         data: [{ type: i0.Input }]
     };
 
+    var SmallTableViewComponent = /** @class */ (function () {
+        function SmallTableViewComponent(pdService) {
+            this.pdService = pdService;
+            this.currentTimeFrameUserArray = [];
+            this.currentUserArray = [];
+            this.remaningUsers = [];
+            this.allUsers = [];
+            this.usersCheckboxChecked = false;
+            this.isDisplay = false;
+        }
+        Object.defineProperty(SmallTableViewComponent.prototype, "data", {
+            set: function (res) {
+                if (res !== null) {
+                    //console.log('smallTable',JSON.parse(res));
+                    this.jsonResponse = JSON.parse(res);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SmallTableViewComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.pdService.openSmallTable$.subscribe(function (data) {
+                if (data) {
+                    _this.isDisplay = true;
+                    var userid = _this.findUserIdByName(data['userDetails'][0]);
+                    var startTime = data['userDetails'][1];
+                    var endTime = data['userDetails'][3];
+                    _this.loadUserData(userid, startTime, endTime);
+                }
+                else {
+                    _this.isDisplay = false;
+                }
+            });
+        };
+        SmallTableViewComponent.prototype.findUserIdByName = function (name) {
+            var json = this.jsonResponse;
+            var user = json.usersMetadata.userMetadata.find(function (user) { return user.fullName === name; });
+            return user ? user.userId : null;
+        };
+        SmallTableViewComponent.prototype.loadUserData = function (userId, inputStartTime, inputEndTime) {
+            var _this = this;
+            var json = this.jsonResponse;
+            var usersConsole = json.usersConsole.userConsole;
+            var usersMetadata = json.usersMetadata.userMetadata;
+            var resourcesMetadata = json.resourcesMetadata.resourceMetadata;
+            var filteredUsersConsole = userId
+                ? usersConsole.filter(function (user) { return user.userId === userId; })
+                : usersConsole;
+            filteredUsersConsole.forEach(function (user) {
+                var _a;
+                var userDetails = usersMetadata.find(function (userMeta) { return userMeta.userId === user.userId; });
+                if (user === null || user === void 0 ? void 0 : user.userConsoleResources) {
+                    var userConsoleResource = (_a = user.userConsoleResources) === null || _a === void 0 ? void 0 : _a.userConsoleResource;
+                    if (userConsoleResource && userConsoleResource.length > 0) {
+                        userConsoleResource.forEach(function (userResource, userIndex) {
+                            var _a, _b, _c, _d, _e, _f;
+                            var resourceId = userResource.resourceId;
+                            var resourceDetails = resourcesMetadata.find(function (resource) { return resource.resourceId === resourceId &&
+                                userResource.type === resource.type; });
+                            var prefix = _this.getDisplayTypeValue(userResource.type);
+                            var title = (resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.title) || '';
+                            var tp = (_a = resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.teachingPoint) === null || _a === void 0 ? void 0 : _a.title;
+                            var subject = (_b = resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.subject) === null || _b === void 0 ? void 0 : _b.title;
+                            var chapter = (_c = resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.chapter) === null || _c === void 0 ? void 0 : _c.title;
+                            var grade = (_d = resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.grade) === null || _d === void 0 ? void 0 : _d.title;
+                            var startTime = new Date(user === null || user === void 0 ? void 0 : user.startTime);
+                            var endTime = new Date(user === null || user === void 0 ? void 0 : user.endTime);
+                            var totalDuration = _this.formatTime(Math.round((endTime.getTime() - startTime.getTime()) / 1000));
+                            var duration = parseInt((userResource === null || userResource === void 0 ? void 0 : userResource.duration) || '0');
+                            //duration = duration === 0 ? "<span class='dddd'>(Seen)</span>" : this.formatTime(duration);                    
+                            if (((_e = userResource === null || userResource === void 0 ? void 0 : userResource.type) === null || _e === void 0 ? void 0 : _e.includes('question')) || ((_f = userResource === null || userResource === void 0 ? void 0 : userResource.type) === null || _f === void 0 ? void 0 : _f.includes('cquestion'))) {
+                                duration = 0;
+                            }
+                            else {
+                                duration = duration === 0 ? "<span class='dddd'>(Seen)</span>" : _this.formatTime(duration);
+                            }
+                            var finalAssetTitle = prefix + " : " + title + " : " + duration;
+                            if (title === '') {
+                                finalAssetTitle = prefix + " : " + duration;
+                            }
+                            _this.currentUserArray.push({
+                                userId: user.userId,
+                                teacherName: userIndex === 0 ? userDetails === null || userDetails === void 0 ? void 0 : userDetails.fullName : '',
+                                subjects: userIndex === 0 ? userDetails === null || userDetails === void 0 ? void 0 : userDetails.userSubjects : '',
+                                date: userIndex === 0 ? user === null || user === void 0 ? void 0 : user.selectedDate : '',
+                                startTime: userIndex === 0 ? _this.formatDate(startTime) : _this.formatDate(startTime),
+                                endtime: userIndex === 0 ? _this.formatDate(endTime) : _this.formatDate(endTime),
+                                totalDuration: userIndex === 0 ? totalDuration : '',
+                                room: userIndex === 0 ? user === null || user === void 0 ? void 0 : user.terminalIP : '',
+                                tp: tp,
+                                subject: subject,
+                                chapter: chapter,
+                                grade: grade,
+                                details: finalAssetTitle,
+                            });
+                        });
+                    }
+                }
+            });
+            var currentUserIds = this.currentUserArray
+                .map(function (x) { return x.userId; })
+                .filter(function (x, i, a) { return a.indexOf(x) === i; });
+            this.remaningUsers = usersMetadata
+                .filter(function (user) { return !currentUserIds.includes(user.userId); })
+                .map(function (user) {
+                return {
+                    userId: user.userId,
+                    teacherName: user === null || user === void 0 ? void 0 : user.fullName,
+                    subjects: user === null || user === void 0 ? void 0 : user.userSubjects,
+                    date: '',
+                    startTime: '',
+                    endtime: '',
+                    totalDuration: '0s',
+                    room: '',
+                    tp: '',
+                    subject: '',
+                    chapter: '',
+                    grade: '',
+                    details: '',
+                };
+            });
+            this.allUsers = __spread(this.currentUserArray, this.remaningUsers);
+            this.currentTimeFrameUserArray = this.filterDataByCriteria(this.currentUserArray, userId, inputStartTime, inputEndTime);
+            //console.log('smallData', this.currentTimeFrameUserArray)
+        };
+        SmallTableViewComponent.prototype.filterDataByCriteria = function (userData, inputUserId, inputStartTime, inputEndTime) {
+            var parseTime = function (timeString) {
+                if (!timeString)
+                    return null;
+                var _g = __read(timeString.split(' '), 2), time = _g[0], meridian = _g[1];
+                var _h = __read(time.split(':').map(Number), 3), hours = _h[0], minutes = _h[1], seconds = _h[2];
+                var isPM = meridian === 'PM';
+                return new Date(0, 0, 0, isPM && hours < 12 ? hours + 12 : hours, minutes, seconds);
+            };
+            var startTime = parseTime(inputStartTime);
+            var endTime = parseTime(inputEndTime);
+            var filteredData = userData.filter(function (entry) {
+                if (entry.userId !== inputUserId)
+                    return false;
+                if (!entry.startTime || !entry.endtime)
+                    return false;
+                var entryStart = parseTime(entry.startTime);
+                var entryEnd = parseTime(entry.endtime);
+                return entryStart && entryEnd && entryStart >= startTime && entryEnd <= endTime;
+            });
+            return filteredData.map(function (entry, index) { return (Object.assign(Object.assign({}, entry), { subsequentCount: index })); });
+        };
+        SmallTableViewComponent.prototype.getDisplayTypeValue = function (key) {
+            var assetTypeConfig = [
+                { type: 'asset_media', display: 'Media' },
+                { type: 'asset_print', display: 'Print' },
+                { type: 'quiz', display: 'Quiz' },
+                { type: 'question', display: 'Question' },
+                { type: 'chapter', display: 'Chapter' },
+                { type: 'tp', display: 'Topic' },
+                { type: 'whiteboard', display: 'Whiteboard' },
+                { type: 'widget', display: 'Widget' },
+                { type: 'casset_media', display: 'cMedia' },
+                { type: 'casset_print', display: 'cPrint' },
+                { type: 'cquiz', display: 'cQuiz' },
+                { type: 'cquestion', display: 'cQuestion' },
+                { type: 'image', display: 'Image' },
+                { type: 'video', display: 'Video' },
+                { type: 'tools', display: 'Tools' },
+                { type: 'feature', display: 'Feature' },
+            ];
+            var asset = assetTypeConfig.find(function (value) { return value.type === key; });
+            return asset ? asset.display : key;
+        };
+        SmallTableViewComponent.prototype.formatDate = function (now) {
+            var hours = now.getHours();
+            var minutes = now.getMinutes();
+            var seconds = now.getSeconds();
+            var ampm = hours >= 12 ? 'PM' : 'AM';
+            hours = hours % 12 || 12;
+            return hours.toString().padStart(2, '0') + ":" + minutes
+                .toString()
+                .padStart(2, '0') + ":" + seconds.toString().padStart(2, '0') + " " + ampm;
+        };
+        SmallTableViewComponent.prototype.formatTime = function (seconds) {
+            var days = Math.floor(seconds / 86400);
+            var hours = Math.floor((seconds % 86400) / 3600);
+            var minutes = Math.floor((seconds % 3600) / 60);
+            var secs = seconds % 60;
+            if (seconds < 60)
+                return secs + "s";
+            if (seconds < 3600)
+                return minutes + "m " + secs + "s";
+            if (seconds < 86400)
+                return hours + "h " + minutes + "m " + secs + "s";
+            return days + "d " + hours + "h " + minutes + "m " + secs + "s";
+        };
+        SmallTableViewComponent.prototype.loadTable = function (data) {
+            /*
+            const tableBody = document.querySelector("#teacherTable tbody");
+        
+              data.forEach((item) => {
+                const row = document.createElement("tr");
+                for (const key in item) {
+                  const cell = document.createElement("td");
+                  cell.textContent = item[key];
+                  if (key !== "userId") {
+                    row.appendChild(cell);
+                  }
+                }
+                tableBody.appendChild(row);
+              });*/
+        };
+        SmallTableViewComponent.prototype.toggleUsers = function () {
+            this.usersCheckboxChecked = !this.usersCheckboxChecked;
+            this.loadTable(this.usersCheckboxChecked
+                ? this.allUsers
+                : this.currentUserArray);
+        };
+        SmallTableViewComponent.prototype.onCloseBtnClick = function () {
+            this.isDisplay = false;
+            //this.pdService.openSmallTable.next(false);
+        };
+        return SmallTableViewComponent;
+    }());
+    SmallTableViewComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'lib-small-table-view',
+                    template: "<div id=\"pd-deatilViewContainer\" *ngIf=\"isDisplay\">\n    <div class=\"pd-detailview-header\">\n      <div class=\"pd-detailview-title\">Details</div>\n      <div id=\"pd-closeButton\" (click)=\"onCloseBtnClick()\">+</div>\n    </div>\n\n    <div class=\"newTablesContainer\">\n\n        <table id=\"userDataTable\" class=\"table table-bordered\">\n            <tbody>\n                <tr>\n                    <th style=\"font-weight: bold;\"><label>Name:</label></th>\n                    <td><label>{{ currentTimeFrameUserArray[0]?.teacherName || '' }}</label></td>\n                    <th style=\"font-weight: bold;\"><label>Start Time:</label></th>\n                    <td><label>{{ currentTimeFrameUserArray[0]?.startTime || '' }}</label></td>\n                </tr>\n                <tr>\n                    <th style=\"font-weight: bold;\"><label>Subject:</label></th>\n                    <td><label>{{ currentTimeFrameUserArray[0]?.subject || '' }}</label></td>\n                    <th style=\"font-weight: bold;\"><label>End Time:</label></th>\n                    <td><label>{{ currentTimeFrameUserArray[0]?.endtime || '' }}M</label></td>\n                </tr>\n                <tr>\n                    <th style=\"font-weight: bold;\"><label>Room Details:</label></th>\n                    <td><label> {{ currentTimeFrameUserArray[0]?.room || '' }}</label></td>\n                </tr>\n            </tbody>\n        </table>\n        \n      \n\n          <table class=\"table table-bordered\" id=\"resoureMetadataTable\">\n            <tbody>\n                <tr>\n                    <th style=\"font-weight: bold;\"><label>Subject</label></th>\n                    <th style=\"font-weight: bold;\"><label>Class</label></th>\n                    <th style=\"font-weight: bold;\"><label>Chapter Name</label></th>\n                    <th style=\"font-weight: bold;\"><label>Topic Name</label></th>\n                    <th style=\"font-weight: bold;\"><label>Assets Details</label></th>\n                </tr>\n                <tr *ngFor=\"let item of currentTimeFrameUserArray\">\n                    <td><label>{{ item.subject || '' }}</label></td>\n                    <td><label>{{ item.grade || '' }}</label></td>\n                    <td><label>{{ item.chapter || '' }}</label></td>\n                    <td [innerHTML]=\"item.tp || ''\"></td> <!-- Use innerHTML to handle HTML content -->\n                    <td [innerHTML]=\"item.details || ''\"></td> <!-- Assets Details column -->\n                  </tr>\n            </tbody>\n        </table>\n\n        \n    </div>  \n  </div>",
+                    styles: ["#pd-deatilViewContainer{position:absolute;background:#fff;box-shadow:0 0 17px #818181;font-size:12px;width:50%;max-height:350px;top:140px;left:230px}#pd-deatilViewContainer .pd-detailview-header{position:relative;width:100%;height:35px;background-color:#e6e6e6}#pd-deatilViewContainer .pd-detailview-title{position:absolute;margin-left:5px;font-size:20px;line-height:35px}#pd-deatilViewContainer #pd-closeButton{width:24px;position:absolute;float:right;right:0;cursor:pointer;height:24px;background:#000;border-radius:12px;color:#fff;line-height:22px;text-align:center;font-size:26px;transform:rotate(45deg);margin:5px}#pd-deatilViewContainer #pd-deatilViewTable{overflow:scroll;scroll-behavior:smooth;height:auto;margin:5px;max-height:300px}.newTablesContainer{overflow:scroll;height:310px;padding:3px;background:#fff;margin-bottom:2px}.dddd{color:#00f!important}"]
+                },] }
+    ];
+    SmallTableViewComponent.ctorParameters = function () { return [
+        { type: PrincipalDashboardLibV2Service }
+    ]; };
+    SmallTableViewComponent.propDecorators = {
+        data: [{ type: i0.Input }]
+    };
+
     var PrincipalDashboardLibV2Module = /** @class */ (function () {
         function PrincipalDashboardLibV2Module() {
         }
@@ -3085,7 +3335,8 @@
                         HeaderComponent,
                         TableviewComponent,
                         PrincipalDashboardLibV2Component,
-                        FullTableViewComponent
+                        FullTableViewComponent,
+                        SmallTableViewComponent
                     ],
                     imports: [
                         common.CommonModule,
@@ -3116,6 +3367,7 @@
     exports.ɵe = ExceldataService;
     exports.ɵf = TableviewComponent;
     exports.ɵg = FullTableViewComponent;
+    exports.ɵh = SmallTableViewComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });