From 19abce0b743d5980f504c26a6a7d9304ff2561c3 Mon Sep 17 00:00:00 2001
From: vraj545 <vrpatel545@gmail.com>
Date: Thu, 19 Mar 2026 20:45:50 -0400
Subject: [PATCH] added list view

---
 .../student-card-list/student-card-list.html  |  66 ++++++++++-
 .../student-card-list/student-card-list.scss  | 109 ++++++++++++++++++
 .../student-card-list/student-card-list.ts    |   9 +-
 3 files changed, 178 insertions(+), 6 deletions(-)

diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/student-card-list/student-card-list.html b/ui/winstudentgoaltracker/src/app/desktop/components/student-card-list/student-card-list.html
index 95ecd99..58e5d4f 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/student-card-list/student-card-list.html
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/student-card-list/student-card-list.html
@@ -1,6 +1,33 @@
 <div class="toolbar">
     <h1 class= "page-title"> My Students -  <span class="student-count"> {{ students().length}}</span></h1>
-    <button class="toolbar-btn" (click)="onAddStudent()">+ Add a Student</button>
+    <div class="toolbar-right">
+        <div class="view-toggle">
+            <button
+                class="toggle-btn"
+                [class.active]="displayMode() === 'card'"
+                (click)="setDisplayMode('card')"
+                title="Card view">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                    <rect x="3" y="3" width="8" height="8" rx="1"/>
+                    <rect x="13" y="3" width="8" height="8" rx="1"/>
+                    <rect x="3" y="13" width="8" height="8" rx="1"/>
+                    <rect x="13" y="13" width="8" height="8" rx="1"/>
+                </svg>
+            </button>
+            <button
+                class="toggle-btn"
+                [class.active]="displayMode() === 'list'"
+                (click)="setDisplayMode('list')"
+                title="List view">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                    <rect x="3" y="5" width="18" height="2" rx="1"/>
+                    <rect x="3" y="11" width="18" height="2" rx="1"/>
+                    <rect x="3" y="17" width="18" height="2" rx="1"/>
+                </svg>
+            </button>
+        </div>
+        <button class="toolbar-btn" (click)="onAddStudent()">+ Add a Student</button>
+    </div>
 </div>
 
 @if (showAddModal()) {
@@ -24,6 +51,37 @@
     </div>
     }
 } @else {
-<!-- List mode — to be implemented -->
-<p>List view coming soon.</p>
-}
\ No newline at end of file
+    @if (loaded() && students().length === 0) {
+    <div class="empty-state">
+        <p>You don't have any students entered yet.</p>
+        <p>Click <strong>+ Add a Student</strong> in the upper right to get started.</p>
+    </div>
+    } @else {
+    <div class="student-list">
+        <div class="list-header">
+            <span class="col-name">Student</span>
+            <span class="col-iep">IEP Date</span>
+            <span class="col-entry">Last Entry</span>
+            <span class="col-stat">Goals</span>
+            <span class="col-stat">Events</span>
+            <span class="col-stat">Benchmarks</span>
+        </div>
+        @for (student of students(); track student.studentId) {
+        <div class="list-row" [routerLink]="['/students', student.studentId]">
+            <span class="col-name">🎓 {{ student.identifier }}</span>
+            <span class="col-iep">{{ student.nextIepDate | date:'M/d/yy' }}</span>
+            <span class="col-entry">
+                @if (student.lastEntryDate) {
+                    {{ student.lastEntryDate | date:'M/d/yy' }}
+                } @else {
+                    <span class="no-entry">No entries yet</span>
+                }
+            </span>
+            <span class="col-stat">{{ student.goalCount }}</span>
+            <span class="col-stat">{{ student.progressEventCount }}</span>
+            <span class="col-stat">{{ student.benchmarkCount }}</span>
+        </div>
+        }
+    </div>
+    }
+}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/student-card-list/student-card-list.scss b/ui/winstudentgoaltracker/src/app/desktop/components/student-card-list/student-card-list.scss
index 2f9f576..729c5b8 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/student-card-list/student-card-list.scss
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/student-card-list/student-card-list.scss
@@ -17,6 +17,45 @@
     flex-shrink: 0;
 }
 
+.toolbar-right {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.view-toggle {
+    display: flex;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    overflow: hidden;
+}
+
+.toggle-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 28px;
+    background: transparent;
+    border: none;
+    color: #6b7280;
+    cursor: pointer;
+
+    &:hover {
+        background: #f3f4f6;
+        color: #374151;
+    }
+
+    &.active {
+        background: #eef2ff;
+        color: #4f46e5;
+    }
+
+     & + & {
+        border-left: 1px solid #d1d5db;
+    }
+}
+
 .page-title {
     font-size: 24px;
     font-weight: 600;
@@ -47,6 +86,76 @@
     flex: 1;
 }
 
+.student-list {
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    flex: 1;
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+}
+
+.list-header {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    background: #f9fafb;
+    border-bottom: 1px solid #e5e7eb;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: #6b7280;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    flex-shrink: 0;
+}
+
+.list-row {
+    display: flex;
+    align-items: center;
+    padding: 0.625rem 1rem;
+    border-bottom: 1px solid #f3f4f6;
+    cursor: pointer;
+    font-size: 0.9rem;
+
+    &:last-child {
+        border-bottom: none;
+    }
+
+    &:hover {
+        background: #f5f3ff;
+    }
+}
+
+.col-name {
+    flex: 2;
+    font-weight: 600;
+    color: #1f2937;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.col-iep,
+.col-entry {
+    flex: 1;
+    color: #4b5563;
+    font-size: 0.875rem;
+}
+
+.col-stat {
+    flex: 0 0 80px;
+    text-align: center;
+    color: #374151;
+    font-size: 0.875rem;
+}
+
+.no-entry {
+    color: #9ca3af;
+    font-style: italic;
+}
+
 .empty-state {
     text-align: center;
     padding: 3rem 1.5rem;
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/student-card-list/student-card-list.ts b/ui/winstudentgoaltracker/src/app/desktop/components/student-card-list/student-card-list.ts
index ec01e41..7f29917 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/student-card-list/student-card-list.ts
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/student-card-list/student-card-list.ts
@@ -1,5 +1,6 @@
 import { Component, inject, signal } from '@angular/core';
-import { Router } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
+import { DatePipe } from '@angular/common';
 import { StudentCard } from '../student-card/student-card';
 import { AddStudentModal } from '../add-student-modal/add-student-modal';
 import { DummyStudentService } from '../../../shared/services/dummy-student.service';
@@ -10,7 +11,7 @@ export type DisplayMode = 'card' | 'list';
 
 @Component({
   selector: 'app-student-card-list',
-  imports: [StudentCard, AddStudentModal],
+  imports: [StudentCard, AddStudentModal, RouterLink, DatePipe],
   templateUrl: './student-card-list.html',
   styleUrl: './student-card-list.scss',
 })
@@ -39,6 +40,10 @@ export class StudentCardList {
 
   // ************************ Event Handlers *************************
 
+  setDisplayMode(mode: DisplayMode) {
+    this.displayMode.set(mode);
+  }
+
   onAddStudent() {
     this.showAddModal.set(true);
   }