- [shared] Added DateUtils 'expect' class for platform-specific date format.

- [android] Redesigned reports view, now supports custom reports!
- [ios] Not rewritten yet, it won't build!

14 files changed, 484 insertions, 195 deletions

diff --git a/androidApp/build.gradle.kts b/androidApp/build.gradle.kts
index 5bb488c..c813186 100644
--- a/androidApp/build.gradle.kts
+++ b/androidApp/build.gradle.kts
@@ -14,8 +14,8 @@ android {
         versionCode = 1
         versionName = "1.0"
         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/reports/UnitReportsFragment.kt b/androidApp/src/main/java/mx/trackermap/TrackerMap/android/details/reports/UnitReportsFragment.kt
index 091cb7b..03a4220 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,6 +163,26 @@ class UnitReportsFragment : Fragment() {
             exportAction = UnitReportsViewModel.ExportAction.ACTION_SHARE
             unitReportsViewModel.fetchReportXlsx()
         }
+        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 -> {
@@ -191,6 +241,55 @@ class UnitReportsFragment : Fragment() {
                     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)
+
+            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)
+
+            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.withFrom(fromPickedDatetime))
+                }
+            }, to.hour, to.minute, false)
         }
 
         unitReportsViewModel.geofences.observe(viewLifecycleOwner) { geofences ->
@@ -280,9 +379,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/values-es-rMX/strings.xml b/androidApp/src/main/res/values-es-rMX/strings.xml
index d07b18d..f3fecb2 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,9 @@
     <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 ce07188..93dd45f 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,9 @@
     <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
diff --git a/shared/src/androidMain/kotlin/mx/trackermap/TrackerMap/utils/DateUtils.kt b/shared/src/androidMain/kotlin/mx/trackermap/TrackerMap/utils/DateUtils.kt
new file mode 100644
index 0000000..35f1ac6
--- /dev/null
+++ b/shared/src/androidMain/kotlin/mx/trackermap/TrackerMap/utils/DateUtils.kt
@@ -0,0 +1,23 @@
+package mx.trackermap.TrackerMap.utils
+
+import android.os.Build
+import kotlinx.datetime.LocalDateTime
+import kotlinx.datetime.toJavaLocalDateTime
+import java.text.SimpleDateFormat
+import java.time.format.DateTimeFormatter
+import java.util.*
+
+actual class DateUtils {
+    actual companion object {
+        actual fun formatDate(date: LocalDateTime): String {
+            val javaDate = date.toJavaLocalDateTime()
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+                val formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm")
+                return javaDate.format(formatter)
+            } else {
+                val formatter = SimpleDateFormat("yyyy-MM-dd HH:mm", Locale.getDefault())
+                return formatter.format(date)
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/shared/src/commonMain/kotlin/mx/trackermap/TrackerMap/controllers/ReportController.kt b/shared/src/commonMain/kotlin/mx/trackermap/TrackerMap/controllers/ReportController.kt
index e120e97..bc0a48f 100644
--- a/shared/src/commonMain/kotlin/mx/trackermap/TrackerMap/controllers/ReportController.kt
+++ b/shared/src/commonMain/kotlin/mx/trackermap/TrackerMap/controllers/ReportController.kt
@@ -60,18 +60,17 @@ class ReportController(
             return
         }
 
-        val (currentDate, previousDate) = reportPeriod.getDates()
+        val (from, to) = reportPeriod.getStringDates()
 
         if (!xlsx) {
             reportFlow.value = Report.LoadingReport
         }
-        // GlobalScope.launch {
-            when (reportType) {
-                ReportType.POSITIONS -> fetchPositions(deviceId, previousDate, currentDate, xlsx)
-                ReportType.EVENTS -> fetchEvents(deviceId, previousDate, currentDate, eventTypes, xlsx)
-                ReportType.STOPS -> fetchStops(deviceId, previousDate, currentDate, xlsx)
-            }
-        // }
+
+        when (reportType) {
+            ReportType.POSITIONS -> fetchPositions(deviceId, from, to, xlsx)
+            ReportType.EVENTS -> fetchEvents(deviceId, from, to, eventTypes, xlsx)
+            ReportType.STOPS -> fetchStops(deviceId, from, to, xlsx)
+        }
     }
 
     private suspend fun fetchPositions(
diff --git a/shared/src/commonMain/kotlin/mx/trackermap/TrackerMap/utils/DateUtils.kt b/shared/src/commonMain/kotlin/mx/trackermap/TrackerMap/utils/DateUtils.kt
new file mode 100644
index 0000000..a85ae69
--- /dev/null
+++ b/shared/src/commonMain/kotlin/mx/trackermap/TrackerMap/utils/DateUtils.kt
@@ -0,0 +1,9 @@
+package mx.trackermap.TrackerMap.utils
+
+import kotlinx.datetime.LocalDateTime
+
+expect class DateUtils {
+    companion object {
+        fun formatDate(date: LocalDateTime): String
+    }
+}
\ No newline at end of file
diff --git a/shared/src/commonMain/kotlin/mx/trackermap/TrackerMap/utils/Formatter.kt b/shared/src/commonMain/kotlin/mx/trackermap/TrackerMap/utils/Formatter.kt
index 77d0d14..bc7e622 100644
--- a/shared/src/commonMain/kotlin/mx/trackermap/TrackerMap/utils/Formatter.kt
+++ b/shared/src/commonMain/kotlin/mx/trackermap/TrackerMap/utils/Formatter.kt
@@ -23,9 +23,8 @@ class Formatter {
     companion object {
         fun formatDate(str: String): String {
             val timezone = TimeZone.currentSystemDefault()
-            val date = str.toInstant().toLocalDateTime(timezone).toString()
-            return date
-                .replace('T', ' ').trim('Z')
+            val datetime = str.toInstant().toLocalDateTime(timezone)
+            return DateUtils.formatDate(datetime)
         }
 
         fun formatSpeed(speed: Double, unit: SpeedUnit): String {
diff --git a/shared/src/commonMain/kotlin/mx/trackermap/TrackerMap/utils/ReportDates.kt b/shared/src/commonMain/kotlin/mx/trackermap/TrackerMap/utils/ReportDates.kt
index 64df79d..6c86d27 100644
--- a/shared/src/commonMain/kotlin/mx/trackermap/TrackerMap/utils/ReportDates.kt
+++ b/shared/src/commonMain/kotlin/mx/trackermap/TrackerMap/utils/ReportDates.kt
@@ -29,81 +29,86 @@ class ReportDates {
         val dateTime = instant.toLocalDateTime(timezone)
         val date = dateTime.date
 
-        abstract fun getDates(): Pair<String, String>
+        abstract fun getObjectDates(): Pair<LocalDateTime, LocalDateTime>
+
+        fun getStringDates(): Pair<String, String> {
+            val (from, to) = getObjectDates()
+            return formatDateTime(from) to formatDateTime(to)
+        }
 
         fun formatDateTime(dateTime: LocalDateTime) =
             dateTime.toInstant(timezone).toString()
 
         class Today : ReportPeriod() {
-            override fun getDates(): Pair<String, String> {
+            override fun getObjectDates(): Pair<LocalDateTime, LocalDateTime> {
                 val from = date.atTime(0, 0)
                 val to = dateTime
-                return formatDateTime(to) to formatDateTime(from)
+                return from to to
             }
         }
 
         class Last24 : ReportPeriod() {
-            override fun getDates(): Pair<String, String> {
+            override fun getObjectDates(): Pair<LocalDateTime, LocalDateTime> {
                 val from = instant
                     .minus(1, DateTimeUnit.DAY, timezone)
                     .toLocalDateTime(timezone)
                 val to = dateTime
-                return formatDateTime(to) to formatDateTime(from)
+                return from to to
             }
         }
 
         class Yesterday : ReportPeriod() {
-            override fun getDates(): Pair<String, String> {
+            override fun getObjectDates(): Pair<LocalDateTime, LocalDateTime> {
                 val yesterday = instant
                     .minus(1, DateTimeUnit.DAY, timezone)
                     .toLocalDateTime(timezone).date
                 val from = yesterday.atTime(0, 0)
                 val to = yesterday.atTime(23, 59)
-                return formatDateTime(to) to formatDateTime(from)
+                return from to to
             }
         }
 
         class ThisWeek : ReportPeriod() {
-            override fun getDates(): Pair<String, String> {
+            override fun getObjectDates(): Pair<LocalDateTime, LocalDateTime> {
                 val from = instant
                     .minus(date.dayOfWeek.isoDayNumber - 1, DateTimeUnit.DAY, timezone)
                     .toLocalDateTime(timezone).date
                     .atTime(0, 0)
                 val to = dateTime
-                return formatDateTime(to) to formatDateTime(from)
+                return from to to
             }
         }
 
         class Last7 : ReportPeriod() {
-            override fun getDates(): Pair<String, String> {
+            override fun getObjectDates(): Pair<LocalDateTime, LocalDateTime> {
                 val from = instant
                     .minus(1, DateTimeUnit.WEEK, timezone)
                     .toLocalDateTime(timezone).date
                     .atTime(0, 0)
                 val to = dateTime
-                return formatDateTime(to) to formatDateTime(from)
+                return from to to
             }
         }
 
         class ThisMonth : ReportPeriod() {
-            override fun getDates(): Pair<String, String> {
+            override fun getObjectDates(): Pair<LocalDateTime, LocalDateTime> {
                 val from = instant
                     .minus(date.dayOfMonth - 1, DateTimeUnit.DAY, timezone)
                     .toLocalDateTime(timezone).date
                     .atTime(0, 0)
                 val to = dateTime
-                return formatDateTime(to) to formatDateTime(from)
+                return from to to
             }
         }
 
         class Last30 : ReportPeriod() {
-            override fun getDates(): Pair<String, String> {
+            override fun getObjectDates(): Pair<LocalDateTime, LocalDateTime> {
                 val from = instant
                     .minus(1, DateTimeUnit.MONTH, timezone)
                     .toLocalDateTime(timezone).date
                     .atTime(0, 0)
                 val to = dateTime
-                return formatDateTime(to) to formatDateTime(from)
+                return from to to
             }
         }
 
@@ -111,13 +116,15 @@ class ReportDates {
             private val from: LocalDateTime? = null,
             private val to: LocalDateTime? = null
         ) : ReportPeriod() {
-            override fun getDates(): Pair<String, String> {
-                return formatDateTime(
+            override fun getObjectDates(): Pair<LocalDateTime, LocalDateTime> {
+                return Pair(
+                    from ?: date.atTime(0, 0),
                     to ?: dateTime
-                ) to formatDateTime(
-                    from ?: date.atTime(0, 0)
                 )
             }
+
+            fun withFrom (from: LocalDateTime): Custom = Custom (from, to)
+            fun withTo (to: LocalDateTime): Custom = Custom (from, to)
         }
     }
 }
\ No newline at end of file