Appointment Details and Listing Done

app/src/main/java/com/example/qmsmakeappointment/AppointmentAdapterNew.java

@@ -19,6 +19,7 @@ public class AppointmentAdapterNew extends RecyclerView.Adapter<AppointmentAdapt
     private List<AppointmentEntity> appointments = new ArrayList<>();
     private final OnAppointmentClickListener listener;
     private final DateTimeFormatter dateFormatter = DateTimeFormatter.ofPattern("EEE, d MMM yyyy", Locale.getDefault());
+    private boolean isCalendarView = false; // Flag to determine which layout to use
 
     public interface OnAppointmentClickListener {
         void onAppointmentClick(AppointmentEntity appointment);
@@ -28,12 +29,18 @@ public class AppointmentAdapterNew extends RecyclerView.Adapter<AppointmentAdapt
         this.listener = listener;
     }
 
+    public void setCalendarView(boolean isCalendarView) {
+        this.isCalendarView = isCalendarView;
+        notifyDataSetChanged();
+    }
+
     @NonNull
     @Override
     public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
+        int layoutId = isCalendarView ? R.layout.item_appointment_calendar : R.layout.item_appointment_new;
         View view = LayoutInflater.from(parent.getContext())
-                .inflate(R.layout.item_appointment_new, parent, false);
-        return new ViewHolder(view);
+                .inflate(layoutId, parent, false);
+        return new ViewHolder(view, isCalendarView);
     }
 
     @Override
@@ -41,12 +48,36 @@ public class AppointmentAdapterNew extends RecyclerView.Adapter<AppointmentAdapt
         AppointmentEntity appointment = appointments.get(position);
         
         // Show date header only if it's a different date from previous item
-        if (position == 0 || !isSameDate(appointments.get(position - 1), appointment)) {
-            holder.dateHeader.setVisibility(View.VISIBLE);
-            LocalDate date = LocalDate.ofEpochDay(appointment.getSelectedDate());
-            holder.dateHeader.setText(date.format(dateFormatter));
+        boolean showDateHeader = position == 0 || !isSameDate(appointments.get(position - 1), appointment);
+        LocalDate date = LocalDate.ofEpochDay(appointment.getSelectedDate());
+        
+        if (isCalendarView) {
+            // Calendar view: date on LEFT
+            if (holder.dateHeaderContainer != null && holder.dateSpacer != null) {
+                if (showDateHeader) {
+                    holder.dateHeaderContainer.setVisibility(View.VISIBLE);
+                    holder.dateSpacer.setVisibility(View.GONE);
+                    if (holder.dateDay != null) {
+                        holder.dateDay.setText(String.valueOf(date.getDayOfMonth()));
+                    }
+                    if (holder.dateWeekday != null) {
+                        holder.dateWeekday.setText(date.format(DateTimeFormatter.ofPattern("EEE", Locale.getDefault())));
+                    }
+                } else {
+                    holder.dateHeaderContainer.setVisibility(View.GONE);
+                    holder.dateSpacer.setVisibility(View.VISIBLE);
+                }
+            }
         } else {
-            holder.dateHeader.setVisibility(View.GONE);
+            // List view: date header at TOP
+            if (holder.dateHeader != null) {
+                if (showDateHeader) {
+                    holder.dateHeader.setVisibility(View.VISIBLE);
+                    holder.dateHeader.setText(date.format(dateFormatter));
+                } else {
+                    holder.dateHeader.setVisibility(View.GONE);
+                }
+            }
         }
         
         // Set time
@@ -67,17 +98,22 @@ public class AppointmentAdapterNew extends RecyclerView.Adapter<AppointmentAdapt
         String type = appointment.getAppointmentType();
         holder.typeBadge.setText(type);
         
-        // Set badge background based on type
+        // Set badge background and color bar based on type
         if (type.equals("Handover")) {
             holder.typeBadge.setBackgroundResource(R.drawable.badge_handover);
+            holder.colorBar.setBackgroundColor(0xFF0E7392); // Teal
         } else if (type.equals("Rectification")) {
             holder.typeBadge.setBackgroundResource(R.drawable.badge_rectification);
+            holder.colorBar.setBackgroundColor(0xFFFF6B35); // Orange
         } else if (type.equals("Joint Inspection")) {
             holder.typeBadge.setBackgroundResource(R.drawable.badge_joint_inspection);
+            holder.colorBar.setBackgroundColor(0xFFD32F2F); // Red
         } else if (type.equals("Viewing")) {
             holder.typeBadge.setBackgroundResource(R.drawable.badge_confirmed);
+            holder.colorBar.setBackgroundColor(0xFF4CAF50); // Green
         } else {
             holder.typeBadge.setBackgroundResource(R.drawable.badge_handover);
+            holder.colorBar.setBackgroundColor(0xFF0E7392); // Teal
         }
         
         // Click listener
@@ -99,19 +135,42 @@ public class AppointmentAdapterNew extends RecyclerView.Adapter<AppointmentAdapt
     }
 
     static class ViewHolder extends RecyclerView.ViewHolder {
+        // Calendar view fields (date on LEFT)
+        View dateHeaderContainer;
+        TextView dateDay;
+        TextView dateWeekday;
+        View dateSpacer;
+        
+        // List view fields (date at TOP)
         TextView dateHeader;
+        
+        // Common fields
         TextView time;
         TextView unit;
         TextView typeBadge;
         TextView location;
+        View colorBar;
 
-        ViewHolder(View itemView) {
+        ViewHolder(View itemView, boolean isCalendarView) {
             super(itemView);
-            dateHeader = itemView.findViewById(R.id.date_header);
+            
+            if (isCalendarView) {
+                // Calendar view layout
+                dateHeaderContainer = itemView.findViewById(R.id.date_header_container);
+                dateDay = itemView.findViewById(R.id.date_day);
+                dateWeekday = itemView.findViewById(R.id.date_weekday);
+                dateSpacer = itemView.findViewById(R.id.date_spacer);
+            } else {
+                // List view layout
+                dateHeader = itemView.findViewById(R.id.date_header);
+            }
+            
+            // Common fields
             time = itemView.findViewById(R.id.appointment_time);
             unit = itemView.findViewById(R.id.appointment_unit);
             typeBadge = itemView.findViewById(R.id.appointment_type_badge);
             location = itemView.findViewById(R.id.appointment_location);
+            colorBar = itemView.findViewById(R.id.appointment_color_bar);
         }
     }
 }

app/src/main/java/com/example/qmsmakeappointment/AppointmentListActivity.java

@@ -13,7 +13,7 @@ import com.google.android.material.bottomsheet.BottomSheetDialog;
 public class AppointmentListActivity extends AppCompatActivity {
 
     private ImageButton backButton;
-    private ImageButton filterButton;
+    private ImageButton toggleViewButton;
 
     @Override
     protected void onCreate(Bundle savedInstanceState) {
@@ -21,7 +21,7 @@ public class AppointmentListActivity extends AppCompatActivity {
         setContentView(R.layout.activity_appointment_list);
 
         backButton = findViewById(R.id.back_button);
-        filterButton = findViewById(R.id.filter_button);
+        toggleViewButton = findViewById(R.id.toggle_view_button);
 
         // Load the appointment list fragment
         if (savedInstanceState == null) {
@@ -41,8 +41,14 @@ public class AppointmentListActivity extends AppCompatActivity {
             }
         });
 
-        // Filter button - Can be used for additional sorting options if needed
-        filterButton.setOnClickListener(v -> showFilterDialog());
+        // Toggle view button - switch between calendar and list view
+        toggleViewButton.setOnClickListener(v -> {
+            AppointmentListFragmentNew fragment = (AppointmentListFragmentNew) getSupportFragmentManager()
+                    .findFragmentById(R.id.fragment_container_list);
+            if (fragment != null) {
+                fragment.toggleView();
+            }
+        });
     }
 
     private void showFilterDialog() {

app/src/main/java/com/example/qmsmakeappointment/CalendarDayAdapter.java

+package com.example.qmsmakeappointment;
+
+import android.graphics.Color;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+import android.widget.TextView;
+
+import androidx.annotation.NonNull;
+import androidx.core.content.ContextCompat;
+import androidx.recyclerview.widget.RecyclerView;
+
+import java.time.LocalDate;
+import java.time.format.TextStyle;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Locale;
+
+public class CalendarDayAdapter extends RecyclerView.Adapter<CalendarDayAdapter.DayViewHolder> {
+
+    private List<LocalDate> dates = new ArrayList<>();
+    private LocalDate selectedDate = null;
+    private OnDateSelectedListener listener;
+
+    public interface OnDateSelectedListener {
+        void onDateSelected(LocalDate date);
+    }
+
+    public CalendarDayAdapter(OnDateSelectedListener listener) {
+        this.listener = listener;
+    }
+
+    public void setDates(List<LocalDate> dates) {
+        this.dates = dates;
+        notifyDataSetChanged();
+    }
+
+    public void setSelectedDate(LocalDate date) {
+        this.selectedDate = date;
+        notifyDataSetChanged();
+    }
+
+    @NonNull
+    @Override
+    public DayViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
+        View view = LayoutInflater.from(parent.getContext())
+                .inflate(R.layout.calendar_day_item, parent, false);
+        return new DayViewHolder(view);
+    }
+
+    @Override
+    public void onBindViewHolder(@NonNull DayViewHolder holder, int position) {
+        LocalDate date = dates.get(position);
+        holder.bind(date, selectedDate != null && selectedDate.equals(date));
+    }
+
+    @Override
+    public int getItemCount() {
+        return dates.size();
+    }
+
+    class DayViewHolder extends RecyclerView.ViewHolder {
+        TextView dateNumber;
+        View selectionBackground;
+
+        DayViewHolder(@NonNull View itemView) {
+            super(itemView);
+            dateNumber = itemView.findViewById(R.id.date_number);
+            selectionBackground = itemView.findViewById(R.id.selection_background);
+        }
+
+        void bind(LocalDate date, boolean isSelected) {
+            // Set date number
+            dateNumber.setText(String.valueOf(date.getDayOfMonth()));
+
+            // Handle selection
+            if (isSelected) {
+                selectionBackground.setVisibility(View.VISIBLE);
+                dateNumber.setTextColor(Color.WHITE);
+            } else {
+                selectionBackground.setVisibility(View.GONE);
+                dateNumber.setTextColor(Color.BLACK);
+            }
+
+            // Click listener
+            itemView.setOnClickListener(v -> {
+                if (listener != null) {
+                    listener.onDateSelected(date);
+                }
+            });
+        }
+    }
+}

app/src/main/res/drawable/calendar_day_selected.xml

+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="oval">
+    <solid android:color="@color/colorPrimary"/>
+    <size android:width="40dp" android:height="40dp"/>
+</shape>

app/src/main/res/drawable/ic_menu_hamburger.xml

+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:fillColor="#000000"
+        android:pathData="M3,6h18v2H3V6zM3,11h18v2H3V11zM3,16h18v2H3V16z"/>
+</vector>

app/src/main/res/layout/activity_appointment_list.xml

@@ -42,13 +42,13 @@
             app:layout_constraintBottom_toBottomOf="parent"/>
 
         <ImageButton
-            android:id="@+id/filter_button"
+            android:id="@+id/toggle_view_button"
             android:layout_width="48dp"
             android:layout_height="48dp"
             android:layout_marginEnd="8dp"
             android:background="@null"
-            android:contentDescription="Filter"
-            android:src="@android:drawable/ic_menu_sort_by_size"
+            android:contentDescription="Toggle View"
+            android:src="@drawable/ic_menu_hamburger"
             app:tint="@color/white"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintTop_toTopOf="parent"

app/src/main/res/layout/calendar_day_cell.xml

+<?xml version="1.0" encoding="utf-8"?>
+<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="48dp"
+    android:padding="4dp">
+
+    <!-- Background circle for selected date -->
+    <View
+        android:id="@+id/selection_background"
+        android:layout_width="40dp"
+        android:layout_height="40dp"
+        android:layout_gravity="center"
+        android:background="@drawable/calendar_day_selected"
+        android:visibility="gone"/>
+
+    <!-- Date number -->
+    <TextView
+        android:id="@+id/day_text"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_gravity="center"
+        android:text="15"
+        android:textSize="16sp"
+        android:textColor="@android:color/black"
+        android:textStyle="bold"/>
+
+</FrameLayout>

app/src/main/res/layout/calendar_day_item.xml

+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="48dp"
+    android:layout_height="wrap_content"
+    android:orientation="vertical"
+    android:gravity="center"
+    android:padding="4dp"
+    android:layout_marginHorizontal="2dp">
+
+    <!-- Date number with background circle -->
+    <FrameLayout
+        android:layout_width="40dp"
+        android:layout_height="40dp">
+
+        <!-- Selection background -->
+        <View
+            android:id="@+id/selection_background"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:background="@drawable/calendar_day_selected"
+            android:visibility="gone"/>
+
+        <!-- Date number -->
+        <TextView
+            android:id="@+id/date_number"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_gravity="center"
+            android:text="7"
+            android:textSize="16sp"
+            android:textColor="@android:color/black"
+            android:textStyle="bold"/>
+
+    </FrameLayout>
+
+</LinearLayout>

app/src/main/res/layout/item_appointment_calendar.xml

+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:orientation="horizontal"
+    android:background="#F5F5F5"
+    android:paddingVertical="4dp">
+
+    <!-- Date Header on LEFT (only shown for first item of each date) -->
+    <LinearLayout
+        android:id="@+id/date_header_container"
+        android:layout_width="60dp"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        android:gravity="center"
+        android:paddingHorizontal="8dp"
+        android:paddingTop="8dp"
+        android:visibility="gone">
+
+        <TextView
+            android:id="@+id/date_day"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="11"
+            android:textSize="24sp"
+            android:textStyle="bold"
+            android:textColor="#000000"/>
+
+        <TextView
+            android:id="@+id/date_weekday"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="Thu"
+            android:textSize="12sp"
+            android:textColor="#666666"/>
+
+    </LinearLayout>
+
+    <!-- Spacer when no date header -->
+    <View
+        android:id="@+id/date_spacer"
+        android:layout_width="60dp"
+        android:layout_height="1dp"
+        android:visibility="visible"/>
+
+    <!-- Appointment Card -->
+    <androidx.cardview.widget.CardView
+        android:id="@+id/appointment_card"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_weight="1"
+        android:layout_marginEnd="16dp"
+        android:layout_marginBottom="8dp"
+        app:cardCornerRadius="8dp"
+        app:cardElevation="2dp"
+        app:cardBackgroundColor="@android:color/white">
+
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:orientation="horizontal">
+
+            <!-- Colored Left Border -->
+            <View
+                android:id="@+id/appointment_color_bar"
+                android:layout_width="4dp"
+                android:layout_height="match_parent"
+                android:background="@color/colorPrimary"/>
+
+            <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:orientation="horizontal"
+                android:padding="16dp">
+
+            <!-- Left Section: Time and Badge -->
+            <LinearLayout
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:orientation="vertical"
+                android:layout_marginEnd="24dp">
+
+                <!-- Time -->
+                <TextView
+                    android:id="@+id/appointment_time"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:text="02:30 PM"
+                    android:textSize="16sp"
+                    android:textStyle="bold"
+                    android:textColor="#000000"
+                    android:layout_marginBottom="8dp"/>
+
+                <!-- Type Badge -->
+                <TextView
+                    android:id="@+id/appointment_type_badge"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:background="@drawable/badge_handover"
+                    android:paddingHorizontal="10dp"
+                    android:paddingVertical="3dp"
+                    android:text="Handover"
+                    android:textColor="@android:color/white"
+                    android:textSize="13sp" />
+
+            </LinearLayout>
+
+            <!-- Right Section -->
+            <LinearLayout
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_weight="1"
+                android:orientation="vertical">
+
+                <!-- Unit Number -->
+                <TextView
+                    android:id="@+id/appointment_unit"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:text="A-3-11"
+                    android:textSize="16sp"
+                    android:textStyle="bold"
+                    android:textColor="#000000"
+                    android:layout_marginBottom="4dp"/>
+
+                <!-- Owner Name -->
+                <TextView
+                    android:id="@+id/appointment_location"
+                    android:layout_width="0dp"
+                    android:layout_height="wrap_content"
+                    android:layout_weight="1"
+                    android:text="John Anthony Snow"
+                    android:textSize="14sp"
+                    android:textColor="#666666"
+                    android:maxLines="1"
+                    android:ellipsize="end"/>
+
+            </LinearLayout>
+
+        </LinearLayout>
+
+        </LinearLayout>
+
+    </androidx.cardview.widget.CardView>
+
+</LinearLayout>

app/src/main/res/layout/item_appointment_new.xml

@@ -6,7 +6,7 @@
     android:orientation="vertical"
     android:background="#F5F5F5">
 
-    <!-- Date Header (only shown for first item of each date) -->
+    <!-- Date Header at TOP (only shown for first item of each date) -->
     <TextView
         android:id="@+id/date_header"
         android:layout_width="match_parent"
@@ -33,8 +33,20 @@
         <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:orientation="horizontal"
-            android:padding="16dp">
+            android:orientation="horizontal">
+
+            <!-- Colored Left Border -->
+            <View
+                android:id="@+id/appointment_color_bar"
+                android:layout_width="4dp"
+                android:layout_height="match_parent"
+                android:background="@color/colorPrimary"/>
+
+            <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:orientation="horizontal"
+                android:padding="16dp">
 
             <!-- Left Section: Time and Badge -->
             <LinearLayout
@@ -112,6 +124,8 @@
 
         </LinearLayout>
 
+        </LinearLayout>
+
     </androidx.cardview.widget.CardView>
 
 </LinearLayout>