Merge branch 'main' of https://git.sr.ht/~avalos/trackermap-mobile

11 files changed, 445 insertions, 182 deletions

diff --git a/androidApp/build.gradle.kts b/androidApp/build.gradle.kts
index 0ae667e..a6f61bc 100644
--- a/androidApp/build.gradle.kts
+++ b/androidApp/build.gradle.kts
@@ -14,8 +14,8 @@ android {
         versionCode = 1300
         versionName = "1.2"
         ndk {
-            abiFilters.clear()
-            abiFilters += listOf("armeabi-v7a", "arm64-v8a")
+            // abiFilters.clear()
+            // abiFilters += listOf("armeabi-v7a", "arm64-v8a")
         }
     }
     buildTypes {
diff --git a/androidApp/src/main/java/mx/trackermap/TrackerMap/android/details/information/UnitInformationFragment.kt b/androidApp/src/main/java/mx/trackermap/TrackerMap/android/details/information/UnitInformationFragment.kt
index e731587..fb0a0bc 100644
--- a/androidApp/src/main/java/mx/trackermap/TrackerMap/android/details/information/UnitInformationFragment.kt
+++ b/androidApp/src/main/java/mx/trackermap/TrackerMap/android/details/information/UnitInformationFragment.kt
@@ -115,7 +115,7 @@ class UnitInformationFragment : Fragment() {
     }
 
     private fun displayInformation(unit: UnitInformation) {
-        val context = context!!
+        val context = requireContext()
         val details: MutableList<Pair<String, String>> = mutableListOf()
         unit.device.contact?.let { contact ->
             details.add(getString(R.string.unit_info_contact) to contact)
diff --git a/androidApp/src/main/java/mx/trackermap/TrackerMap/android/details/reports/UnitReportsFragment.kt b/androidApp/src/main/java/mx/trackermap/TrackerMap/android/details/reports/UnitReportsFragment.kt
index 60ad531..60222ff 100644
--- a/androidApp/src/main/java/mx/trackermap/TrackerMap/android/details/reports/UnitReportsFragment.kt
+++ b/androidApp/src/main/java/mx/trackermap/TrackerMap/android/details/reports/UnitReportsFragment.kt
@@ -18,6 +18,8 @@
 package mx.trackermap.TrackerMap.android.details.reports
 
 import android.app.Activity
+import android.app.DatePickerDialog
+import android.app.TimePickerDialog
 import android.content.Intent
 import android.os.Build
 import android.os.Bundle
@@ -27,14 +29,16 @@ import android.util.Log
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
-import android.widget.PopupMenu
-import android.widget.TableRow
-import android.widget.TextView
+import android.widget.*
 import androidx.activity.result.contract.ActivityResultContracts
 import androidx.core.view.setMargins
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.commit
+import com.google.android.material.bottomsheet.BottomSheetBehavior
+import com.google.android.material.card.MaterialCardView
+import io.ktor.utils.io.*
 import kotlinx.coroutines.DelicateCoroutinesApi
+import kotlinx.datetime.LocalDateTime
 import mx.trackermap.TrackerMap.android.R
 import mx.trackermap.TrackerMap.android.databinding.UnitDetailsReportsBinding
 import mx.trackermap.TrackerMap.android.details.UnitDetailsAdapter
@@ -47,6 +51,7 @@ import mx.trackermap.TrackerMap.utils.Formatter
 import mx.trackermap.TrackerMap.utils.ReportDates
 import org.koin.androidx.viewmodel.ext.android.viewModel
 import java.io.*
+import java.util.*
 import kotlin.math.max
 import kotlin.time.ExperimentalTime
 
@@ -59,12 +64,22 @@ class UnitReportsFragment : Fragment() {
 
     private val unitReportsViewModel: UnitReportsViewModel by viewModel()
     private lateinit var mapFragment: MapWrapperFragment
+    private lateinit var bottomSheetBehavior: BottomSheetBehavior<MaterialCardView>
 
     private var reportFile: ReportController.Report.XlsxReport? = null
     private var exportAction: UnitReportsViewModel.ExportAction? = null
 
+    private lateinit var fromPickedDatetime: LocalDateTime
+    private lateinit var fromDatePicker: DatePickerDialog
+    private lateinit var fromTimePicker: TimePickerDialog
+
+    private lateinit var toPickedDatetime: LocalDateTime
+    private lateinit var toDatePicker: DatePickerDialog
+    private lateinit var toTimePicker: TimePickerDialog
+
     private companion object {
-        const val XLSX_MIME_TYPE = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+        const val XLSX_MIME_TYPE =
+            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
     }
 
     override fun onCreateView(
@@ -80,7 +95,12 @@ class UnitReportsFragment : Fragment() {
         super.onViewCreated(view, savedInstanceState)
 
         unitReportsViewModel.setDeviceId(
-            arguments?.getInt(UnitDetailsAdapter.DEVICE_ID_ARG) ?: 0)
+            arguments?.getInt(UnitDetailsAdapter.DEVICE_ID_ARG) ?: 0
+        )
+
+        bottomSheetBehavior = BottomSheetBehavior.from(binding.bottomSheet)
+        bottomSheetBehavior.state = BottomSheetBehavior.STATE_EXPANDED
+
         setupEvents()
         initializeMap()
     }
@@ -129,6 +149,12 @@ class UnitReportsFragment : Fragment() {
         binding.periodButton.setOnClickListener {
             showPeriodPopUp(it)
         }
+        binding.fromEditText.setOnClickListener {
+            fromDatePicker.show()
+        }
+        binding.toEditText.setOnClickListener {
+            toDatePicker.show()
+        }
         binding.exportButton.setOnClickListener {
             exportAction = UnitReportsViewModel.ExportAction.ACTION_SAVE
             unitReportsViewModel.fetchReportXlsx()
@@ -137,7 +163,27 @@ class UnitReportsFragment : Fragment() {
             exportAction = UnitReportsViewModel.ExportAction.ACTION_SHARE
             unitReportsViewModel.fetchReportXlsx()
         }
-        unitReportsViewModel.setReportPeriod(ReportDates.ReportPeriod.TODAY)
+        binding.toggleSheet.setOnClickListener {
+            if (bottomSheetBehavior.state == BottomSheetBehavior.STATE_EXPANDED) {
+                bottomSheetBehavior.state = BottomSheetBehavior.STATE_COLLAPSED
+            } else {
+                bottomSheetBehavior.state = BottomSheetBehavior.STATE_EXPANDED
+            }
+        }
+        bottomSheetBehavior.addBottomSheetCallback(object: BottomSheetBehavior.BottomSheetCallback() {
+            override fun onStateChanged(bottomSheet: View, newState: Int) {
+                if (newState == BottomSheetBehavior.STATE_EXPANDED) {
+                    binding.toggleSheet.setImageResource(R.drawable.icon_down)
+                    binding.toggleSheet.contentDescription = getString(R.string.shared_slide_down)
+                } else {
+                    binding.toggleSheet.setImageResource(R.drawable.icon_up)
+                    binding.toggleSheet.contentDescription = getString(R.string.shared_slide_up)
+                }
+            }
+
+            override fun onSlide(bottomSheet: View, slideOffset: Float) {}
+        })
+        unitReportsViewModel.setReportPeriod(ReportDates.ReportPeriod.Today())
         unitReportsViewModel.setReportType(ReportController.ReportType.POSITIONS)
     }
 
@@ -149,7 +195,11 @@ class UnitReportsFragment : Fragment() {
             when (report) {
                 is ReportController.Report.PositionsReport -> {
                     mapFragment.display(unitReportsViewModel.geofences.value!!)
-                    mapFragment.display(report.positions.toTypedArray(), isReport = true, center = true)
+                    mapFragment.display(
+                        report.positions.toTypedArray(),
+                        isReport = true,
+                        center = true
+                    )
                     showMap(true)
                 }
                 is ReportController.Report.EventsReport -> {
@@ -181,15 +231,68 @@ class UnitReportsFragment : Fragment() {
 
             binding.periodButton.text = context?.getString(
                 when (period) {
-                    ReportDates.ReportPeriod.TODAY -> R.string.period_today
-                    ReportDates.ReportPeriod.LAST_24 -> R.string.period_last_24
-                    ReportDates.ReportPeriod.YESTERDAY -> R.string.period_yesterday
-                    ReportDates.ReportPeriod.THIS_WEEK -> R.string.period_this_week
-                    ReportDates.ReportPeriod.LAST_7 -> R.string.period_last_7
-                    ReportDates.ReportPeriod.THIS_MONTH -> R.string.period_this_month
-                    ReportDates.ReportPeriod.LAST_30 -> R.string.period_last_30
+                    is ReportDates.ReportPeriod.Today -> R.string.period_today
+                    is ReportDates.ReportPeriod.Last24 -> R.string.period_last_24
+                    is ReportDates.ReportPeriod.Yesterday -> R.string.period_yesterday
+                    is ReportDates.ReportPeriod.ThisWeek -> R.string.period_this_week
+                    is ReportDates.ReportPeriod.Last7 -> R.string.period_last_7
+                    is ReportDates.ReportPeriod.ThisMonth -> R.string.period_this_month
+                    is ReportDates.ReportPeriod.Last30 -> R.string.period_last_30
+                    is ReportDates.ReportPeriod.Custom -> R.string.period_custom
                 }
             )
+
+            binding.rangeLayout.visibility =
+                if (period is ReportDates.ReportPeriod.Custom) View.VISIBLE else View.GONE
+
+            (period as? ReportDates.ReportPeriod.Custom)?.let {
+                val (from, to) = it.getStringDates()
+                binding.fromEditText.setText(Formatter.formatDate(from))
+                binding.toEditText.setText(Formatter.formatDate(to))
+            }
+
+            /**
+             *  Initialize date and time pickers
+             */
+
+            val (from, to) = period.getObjectDates()
+
+            fromDatePicker = DatePickerDialog(requireContext(), { p0, p1, p2, p3 ->
+                fromPickedDatetime = LocalDateTime(p1, p2, p3, from.hour, from.minute)
+                fromTimePicker.show()
+            }, from.year, from.monthNumber, from.dayOfMonth)
+            fromDatePicker.datePicker.maxDate = Calendar.getInstance().timeInMillis
+
+            fromTimePicker = TimePickerDialog(requireContext(), { p0, p1, p2 ->
+                fromPickedDatetime = LocalDateTime(
+                    fromPickedDatetime.year,
+                    fromPickedDatetime.monthNumber,
+                    fromPickedDatetime.dayOfMonth,
+                    p1, p2
+                )
+                (period as? ReportDates.ReportPeriod.Custom)?.let {
+                    unitReportsViewModel.setReportPeriod(it.withFrom(fromPickedDatetime))
+                }
+            }, from.hour, from.minute, false)
+
+            toDatePicker = DatePickerDialog(requireContext(), { p0, p1, p2, p3 ->
+                toPickedDatetime = LocalDateTime(p1, p2, p3, from.hour, from.minute)
+                toTimePicker.show()
+            }, to.year, to.monthNumber, to.dayOfMonth)
+            toDatePicker.datePicker.maxDate = Calendar.getInstance().timeInMillis
+
+            toTimePicker = TimePickerDialog(requireContext(), { p0, p1, p2 ->
+                toPickedDatetime = LocalDateTime(
+                    toPickedDatetime.year,
+                    toPickedDatetime.monthNumber,
+                    toPickedDatetime.dayOfMonth,
+                    p1, p2
+                )
+                (period as? ReportDates.ReportPeriod.Custom)?.let {
+                    unitReportsViewModel.setReportPeriod(it.withTo(toPickedDatetime))
+                }
+            }, to.hour, to.minute, false)
+
         }
 
         unitReportsViewModel.geofences.observe(viewLifecycleOwner) { geofences ->
@@ -210,14 +313,15 @@ class UnitReportsFragment : Fragment() {
         popOver.setOnMenuItemClickListener { item ->
             unitReportsViewModel.setReportPeriod(
                 when (item.itemId) {
-                    R.id.optionToday -> ReportDates.ReportPeriod.TODAY
-                    R.id.optionLast24 -> ReportDates.ReportPeriod.LAST_24
-                    R.id.optionYesterday -> ReportDates.ReportPeriod.YESTERDAY
-                    R.id.optionWeek -> ReportDates.ReportPeriod.THIS_WEEK
-                    R.id.optionLast7 -> ReportDates.ReportPeriod.LAST_7
-                    R.id.optionMonth -> ReportDates.ReportPeriod.THIS_MONTH
-                    R.id.optionLast30 -> ReportDates.ReportPeriod.LAST_30
-                    else -> ReportDates.ReportPeriod.TODAY
+                    R.id.optionToday -> ReportDates.ReportPeriod.Today()
+                    R.id.optionLast24 -> ReportDates.ReportPeriod.Last24()
+                    R.id.optionYesterday -> ReportDates.ReportPeriod.Yesterday()
+                    R.id.optionWeek -> ReportDates.ReportPeriod.ThisWeek()
+                    R.id.optionLast7 -> ReportDates.ReportPeriod.Last7()
+                    R.id.optionMonth -> ReportDates.ReportPeriod.ThisMonth()
+                    R.id.optionLast30 -> ReportDates.ReportPeriod.Last30()
+                    R.id.optionCustom -> ReportDates.ReportPeriod.Custom()
+                    else -> ReportDates.ReportPeriod.Today()
                 }
             )
             true
@@ -278,9 +382,10 @@ class UnitReportsFragment : Fragment() {
                         EventInformation.Type.MAINTENANCE -> R.string.event_maintenance
                         EventInformation.Type.TEXT_MESSAGE -> R.string.event_text_message
                         EventInformation.Type.DRIVER_CHANGED -> R.string.event_driver_changed
-                        EventInformation.Type.UNKNOWN ->  R.string.event_unknown
+                        EventInformation.Type.UNKNOWN -> R.string.event_unknown
                         else -> R.string.event_unknown
-                    })
+                    }
+                )
             }
             event.geofence?.let {
                 geofenceText.text = it.name
diff --git a/androidApp/src/main/res/drawable/icon_down.xml b/androidApp/src/main/res/drawable/icon_down.xml
new file mode 100644
index 0000000..884bee1
--- /dev/null
+++ b/androidApp/src/main/res/drawable/icon_down.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M7.41,8.59L12,13.17l4.59,-4.58L18,10l-6,6 -6,-6 1.41,-1.41z"/>
+</vector>
diff --git a/androidApp/src/main/res/drawable/icon_up.xml b/androidApp/src/main/res/drawable/icon_up.xml
new file mode 100644
index 0000000..9b15755
--- /dev/null
+++ b/androidApp/src/main/res/drawable/icon_up.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M7.41,15.41L12,10.83l4.59,4.58L18,14l-6,-6 -6,6z"/>
+</vector>
diff --git a/androidApp/src/main/res/layout/unit_details_reports.xml b/androidApp/src/main/res/layout/unit_details_reports.xml
index 903c2c3..c29e4b0 100644
--- a/androidApp/src/main/res/layout/unit_details_reports.xml
+++ b/androidApp/src/main/res/layout/unit_details_reports.xml
@@ -1,194 +1,297 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout
+<androidx.coordinatorlayout.widget.CoordinatorLayout
     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="match_parent">
-
-    <androidx.fragment.app.FragmentContainerView
-        android:id="@+id/reportsMapContainer"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:layout_marginBottom="@dimen/margin"
-        app:layout_constraintBottom_toTopOf="@id/periodSection"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent"
-        android:visibility="gone"/>
-
-    <ScrollView
-        android:id="@+id/eventsScroll"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:layout_marginBottom="@dimen/margin"
-        android:visibility="gone"
-        app:layout_constraintBottom_toTopOf="@id/periodSection"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent">
-
-        <HorizontalScrollView
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content">
+    android:layout_height="match_parent"
+    xmlns:tools="http://schemas.android.com/tools">
 
-            <TableLayout
-                android:id="@+id/eventsTable"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:isScrollContainer="true"
-                android:scrollbars="vertical"
-                android:stretchColumns="*">
+    <!-- Main content -->
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="match_parent">
 
-                <TableRow android:background="@color/colorPrimary">
+        <androidx.fragment.app.FragmentContainerView
+            android:id="@+id/reportsMapContainer"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            android:layout_marginBottom="@dimen/margin"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            android:visibility="gone"/>
+
+        <ScrollView
+            android:id="@+id/eventsScroll"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            android:layout_marginBottom="@dimen/bottom_sheet_peak"
+            android:visibility="visible"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent">
+
+            <HorizontalScrollView
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content">
 
-                    <TextView
-                        android:paddingHorizontal="@dimen/padding"
-                        android:text="@string/table_datetime"
-                        android:textColor="@color/background"
-                        android:padding="@dimen/padding" />
+                <TableLayout
+                    android:id="@+id/eventsTable"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:isScrollContainer="true"
+                    android:scrollbars="vertical"
+                    android:stretchColumns="*">
 
-                    <TextView
-                        android:paddingHorizontal="@dimen/padding"
-                        android:text="@string/table_event"
-                        android:textColor="@color/background"
-                        android:padding="@dimen/padding" />
+                    <TableRow android:background="@color/colorPrimary">
 
-                    <TextView
-                        android:paddingHorizontal="@dimen/padding"
-                        android:text="@string/table_geofence"
-                        android:textColor="@color/background"
-                        android:padding="@dimen/padding" />
+                        <TextView
+                            android:paddingHorizontal="@dimen/padding"
+                            android:text="@string/table_datetime"
+                            android:textColor="@color/background"
+                            android:padding="@dimen/padding" />
 
-                    <TextView
-                        android:paddingHorizontal="@dimen/padding"
-                        android:text="@string/table_address"
-                        android:textColor="@color/background"
-                        android:padding="@dimen/padding" />
+                        <TextView
+                            android:paddingHorizontal="@dimen/padding"
+                            android:text="@string/table_event"
+                            android:textColor="@color/background"
+                            android:padding="@dimen/padding" />
 
-                </TableRow>
+                        <TextView
+                            android:paddingHorizontal="@dimen/padding"
+                            android:text="@string/table_geofence"
+                            android:textColor="@color/background"
+                            android:padding="@dimen/padding" />
 
-            </TableLayout>
+                        <TextView
+                            android:paddingHorizontal="@dimen/padding"
+                            android:text="@string/table_address"
+                            android:textColor="@color/background"
+                            android:padding="@dimen/padding" />
 
-        </HorizontalScrollView>
+                    </TableRow>
 
-    </ScrollView>
+                </TableLayout>
 
-    <LinearLayout
-        android:id="@+id/periodSection"
+            </HorizontalScrollView>
+
+        </ScrollView>
+
+        <include
+            android:id="@+id/reportLoading"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            layout="@layout/loading_indicator"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintBottom_toBottomOf="parent"
+            android:visibility="gone"/>
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+
+    <!-- Bottom sheet -->
+    <com.google.android.material.card.MaterialCardView
+        android:id="@+id/bottomSheet"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_margin="@dimen/margin"
+        app:contentPadding="@dimen/card_padding"
         android:orientation="vertical"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent">
+        app:behavior_hideable="false"
+        app:behavior_peekHeight="@dimen/bottom_sheet_peak"
+        app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
+        style="@style/BottomSheetCardStyle">
 
         <LinearLayout
+            android:id="@+id/periodSection"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:orientation="horizontal">
+            android:orientation="vertical">
 
-            <TextView
-                android:layout_width="0dp"
-                android:layout_height="match_parent"
-                android:layout_weight="1"
-                android:gravity="center_vertical"
-                android:text="@string/period"
-                android:textColor="@color/colorPrimaryDark"
-                android:textSize="22sp" />
-
-            <com.google.android.material.button.MaterialButton
-                android:id="@+id/periodButton"
-                android:layout_width="wrap_content"
+            <androidx.constraintlayout.widget.ConstraintLayout
+                android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:layout_marginEnd="@dimen/fields_spacing"
-                android:text="@string/select_period"
-                android:textColor="@color/colorPrimaryDark"
-                app:backgroundTint="@color/darkBackground" />
+                android:layout_marginBottom="@dimen/margin"
+                android:orientation="horizontal">
 
-        </LinearLayout>
+                <!-- Report type -->
+                <com.addisonelliott.segmentedbutton.SegmentedButtonGroup
+                    android:id="@+id/reportType"
+                    android:layout_width="0dp"
+                    android:layout_height="wrap_content"
+                    android:layout_marginEnd="@dimen/fields_spacing"
+                    app:layout_constraintStart_toStartOf="parent"
+                    app:layout_constraintTop_toTopOf="parent"
+                    app:layout_constraintBottom_toBottomOf="parent"
+                    app:layout_constraintEnd_toStartOf="@id/toggleSheet"
+                    app:borderWidth="1dp"
+                    app:dividerPadding="10dp"
+                    app:dividerWidth="1dp"
+                    app:position="0"
+                    app:radius="30dp"
+                    app:ripple="true"
+                    app:selectedBackground="@color/colorPrimary">
 
-        <com.addisonelliott.segmentedbutton.SegmentedButtonGroup
-            android:id="@+id/reportType"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_marginTop="@dimen/margin"
-            app:borderWidth="1dp"
-            app:dividerPadding="10dp"
-            app:dividerWidth="1dp"
-            app:position="0"
-            app:radius="30dp"
-            app:ripple="true"
-            app:selectedBackground="@color/colorPrimary">
-
-            <com.addisonelliott.segmentedbutton.SegmentedButton
-                android:layout_width="0dp"
-                android:layout_height="wrap_content"
-                android:layout_weight="1"
-                android:padding="10dp"
-                app:drawableGravity="top"
-                app:selectedTextColor="@color/darkBackground"
-                app:text="@string/positions"
-                app:textColor="@color/colorPrimaryDark" />
-
-            <com.addisonelliott.segmentedbutton.SegmentedButton
-                android:layout_width="0dp"
-                android:layout_height="wrap_content"
-                android:layout_weight="1"
-                android:padding="10dp"
-                app:drawableGravity="top"
-                app:selectedTextColor="@color/darkBackground"
-                app:text="@string/events"
-                app:textColor="@color/colorPrimaryDark" />
-
-            <com.addisonelliott.segmentedbutton.SegmentedButton
-                android:layout_width="0dp"
+                    <com.addisonelliott.segmentedbutton.SegmentedButton
+                        android:layout_width="0dp"
+                        android:layout_height="wrap_content"
+                        android:layout_weight="1"
+                        android:padding="10dp"
+                        app:drawableGravity="top"
+                        app:selectedTextColor="@color/darkBackground"
+                        app:text="@string/positions"
+                        app:textColor="@color/colorPrimaryDark" />
+
+                    <com.addisonelliott.segmentedbutton.SegmentedButton
+                        android:layout_width="0dp"
+                        android:layout_height="wrap_content"
+                        android:layout_weight="1"
+                        android:padding="10dp"
+                        app:drawableGravity="top"
+                        app:selectedTextColor="@color/darkBackground"
+                        app:text="@string/events"
+                        app:textColor="@color/colorPrimaryDark" />
+
+                    <com.addisonelliott.segmentedbutton.SegmentedButton
+                        android:layout_width="0dp"
+                        android:layout_height="wrap_content"
+                        android:layout_weight="1"
+                        android:padding="10dp"
+                        app:drawableGravity="top"
+                        app:selectedTextColor="@color/darkBackground"
+                        app:text="@string/stops"
+                        app:textColor="@color/colorPrimaryDark" />
+
+                </com.addisonelliott.segmentedbutton.SegmentedButtonGroup>
+
+                <ImageButton
+                    android:id="@+id/toggleSheet"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:src="@drawable/icon_down"
+                    android:contentDescription="@string/shared_slide_down"
+                    app:layout_constraintTop_toTopOf="parent"
+                    app:layout_constraintEnd_toEndOf="parent"
+                    app:layout_constraintBottom_toBottomOf="parent"
+                    android:background="?selectableItemBackgroundBorderless" />
+
+            </androidx.constraintlayout.widget.ConstraintLayout>
+
+            <!-- Report period -->
+            <LinearLayout
+                android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:layout_weight="1"
-                android:padding="10dp"
-                app:drawableGravity="top"
-                app:selectedTextColor="@color/darkBackground"
-                app:text="@string/stops"
-                app:textColor="@color/colorPrimaryDark" />
+                android:orientation="horizontal">
 
-        </com.addisonelliott.segmentedbutton.SegmentedButtonGroup>
+                <TextView
+                    android:layout_width="0dp"
+                    android:layout_height="match_parent"
+                    android:layout_weight="1"
+                    android:gravity="center_vertical"
+                    android:text="@string/period"
+                    android:textColor="@color/colorPrimaryDark"
+                    android:textSize="22sp" />
 
-        <LinearLayout
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:orientation="horizontal"
-            android:layout_marginTop="@dimen/margin">
+                <com.google.android.material.button.MaterialButton
+                    android:id="@+id/periodButton"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:text="@string/select_period"
+                    android:textColor="@color/colorPrimaryDark"
+                    app:backgroundTint="@color/darkBackground"
+                    style="@style/Widget.AppCompat.Button.Small" />
+            </LinearLayout>
 
-            <com.google.android.material.button.MaterialButton
-                android:id="@+id/exportButton"
+            <!-- Custom period ranges -->
+            <LinearLayout
+                android:id="@+id/rangeLayout"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:text="@string/export_report"
-                android:layout_weight="1"
-                android:layout_marginEnd="@dimen/fields_spacing"
-                style="?android:buttonStyleSmall"/>
+                android:gravity="center_vertical"
+                android:weightSum="2"
+                android:orientation="horizontal">
+
+                <com.google.android.material.textfield.TextInputLayout
+                    android:id="@+id/fromInputLayout"
+                    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_marginEnd="@dimen/fields_spacing"
+                    android:hint="@string/period_from"
+                    android:layout_weight="1">
+
+                    <com.google.android.material.textfield.TextInputEditText
+                        android:id="@+id/fromEditText"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:textSize="@dimen/datetime_field"
+                        android:inputType="none"
+                        android:clickable="false"
+                        android:focusable="false"
+                        tools:text="2022-04-11 00:00"
+                        />
 
-            <com.google.android.material.button.MaterialButton
-                android:id="@+id/shareButton"
+                </com.google.android.material.textfield.TextInputLayout>
+
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:text="@string/period_separator" />
+
+                <com.google.android.material.textfield.TextInputLayout
+                    android:id="@+id/toInputLayout"
+                    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:hint="@string/period_to"
+                    android:layout_marginStart="@dimen/fields_spacing"
+                    android:layout_weight="1">
+
+                    <com.google.android.material.textfield.TextInputEditText
+                        android:id="@+id/toEditText"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:textSize="@dimen/datetime_field"
+                        android:inputType="none"
+                        android:clickable="false"
+                        android:focusable="false"
+                        tools:text="2022-04-11 00:39"
+                        />
+
+                </com.google.android.material.textfield.TextInputLayout>
+
+            </LinearLayout>
+
+            <!-- Action buttons -->
+            <LinearLayout
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:layout_weight="1"
-                android:text="@string/share_report"
-                style="?android:buttonStyleSmall"/>
+                android:orientation="horizontal"
+                android:layout_marginTop="@dimen/margin">
 
-        </LinearLayout>
+                <com.google.android.material.button.MaterialButton
+                    android:id="@+id/exportButton"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:text="@string/export_report"
+                    android:layout_weight="1"
+                    android:layout_marginEnd="@dimen/fields_spacing"
+                    style="?android:buttonStyleSmall"/>
+
+                <com.google.android.material.button.MaterialButton
+                    android:id="@+id/shareButton"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_weight="1"
+                    android:text="@string/share_report"
+                    style="?android:buttonStyleSmall"/>
 
-    </LinearLayout>
+            </LinearLayout>
+
+        </LinearLayout>
 
-    <include
-        android:id="@+id/reportLoading"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        layout="@layout/loading_indicator"
-        app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintBottom_toTopOf="@id/periodSection"
-        android:visibility="gone"/>
+    </com.google.android.material.card.MaterialCardView>
 
-</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
+</androidx.coordinatorlayout.widget.CoordinatorLayout>
\ No newline at end of file
diff --git a/androidApp/src/main/res/menu/report_period_options.xml b/androidApp/src/main/res/menu/report_period_options.xml
index 60fb58c..a8fdbad 100644
--- a/androidApp/src/main/res/menu/report_period_options.xml
+++ b/androidApp/src/main/res/menu/report_period_options.xml
@@ -30,4 +30,8 @@
         android:id="@+id/optionLast30"
         android:title="@string/period_last_30" />
 
+    <item
+        android:id="@+id/optionCustom"
+        android:title="@string/period_custom" />
+
 </menu>
\ No newline at end of file
diff --git a/androidApp/src/main/res/values-es-rMX/strings.xml b/androidApp/src/main/res/values-es-rMX/strings.xml
index eeb7149..26e0cad 100644
--- a/androidApp/src/main/res/values-es-rMX/strings.xml
+++ b/androidApp/src/main/res/values-es-rMX/strings.xml
@@ -6,6 +6,8 @@
     <string name="shared_close">Cerrar</string>
     <string name="shared_send">Enviar</string>
     <string name="shared_loading">Cargando</string>
+    <string name="shared_slide_up">Deslizar hacia arriba</string>
+    <string name="shared_slide_down">Deslizar hacia abajo</string>
 
     <!-- LoginActivity -->
     <string name="login_username">Nombre de usuario</string>
@@ -113,6 +115,10 @@
     <string name="period_last_7">Últimos 7d</string>
     <string name="period_this_month">Mes</string>
     <string name="period_last_30">Últimos 30d</string>
+    <string name="period_custom">Personalizado</string>
+    <string name="period_separator">&#8212;</string>
+    <string name="period_from">Inicio</string>
+    <string name="period_to">Fin</string>
 
     <string name="table_event">Evento</string>
     <string name="table_datetime">Fecha y hora</string>
diff --git a/androidApp/src/main/res/values/dimen.xml b/androidApp/src/main/res/values/dimen.xml
index 92d5242..8c8c5f5 100644
--- a/androidApp/src/main/res/values/dimen.xml
+++ b/androidApp/src/main/res/values/dimen.xml
@@ -35,6 +35,12 @@
     <dimen name="report_label_width">10dp</dimen>
     <dimen name="attribution_text_size">11sp</dimen>
 
+    <!-- Reports bottom sheet -->
+    <dimen name="bottom_sheet_peak">80dp</dimen>
+
+    <!-- Reports datetime field -->
+    <dimen name="datetime_field">12sp</dimen>
+
     <!-- User Information -->
     <dimen name="fields_spacing">8dp</dimen>
     <dimen name="fields_large_spacing">16dp</dimen>
diff --git a/androidApp/src/main/res/values/strings.xml b/androidApp/src/main/res/values/strings.xml
index 865368e..c349cd8 100644
--- a/androidApp/src/main/res/values/strings.xml
+++ b/androidApp/src/main/res/values/strings.xml
@@ -20,6 +20,8 @@
     <string name="shared_close">Close</string>
     <string name="shared_send">Send</string>
     <string name="shared_loading">Loading</string>
+    <string name="shared_slide_up">Slide up</string>
+    <string name="shared_slide_down">Slide down</string>
 
     <!-- LoginActivity -->
     <string name="login_username">Username</string>
@@ -127,6 +129,10 @@
     <string name="period_last_7">Last 7d</string>
     <string name="period_this_month">Month</string>
     <string name="period_last_30">Last 30d</string>
+    <string name="period_custom">Custom</string>
+    <string name="period_separator">&#8212;</string>
+    <string name="period_from">Start</string>
+    <string name="period_to">End</string>
 
     <string name="table_event">Event</string>
     <string name="table_datetime">Datetime</string>
diff --git a/androidApp/src/main/res/values/styles.xml b/androidApp/src/main/res/values/styles.xml
index dc40450..982d4dc 100644
--- a/androidApp/src/main/res/values/styles.xml
+++ b/androidApp/src/main/res/values/styles.xml
@@ -12,4 +12,17 @@
         <item name="android:textStyle">bold</item>
     </style>
 
+    <style name="BottomSheetCardStyle" parent="Widget.MaterialComponents.CardView">
+        <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay_BottomSheetCard</item>
+        <item name="cardElevation">@dimen/card_elevation</item>
+    </style>
+
+    <style name="ShapeAppearanceOverlay_BottomSheetCard">
+        <item name="cornerFamily">rounded</item>
+        <item name="cornerSizeTopRight">@dimen/card_border_radius</item>
+        <item name="cornerSizeTopLeft">@dimen/card_border_radius</item>
+        <item name="cornerSizeBottomRight">0dp</item>
+        <item name="cornerSizeBottomLeft">0dp</item>
+    </style>
+
 </resources>
\ No newline at end of file