feat: fetch audio history

src/pages/Recording/Recording.tsx

-import React, { useState, type ReactNode } from "react";
+import React, { useEffect, useState, type ReactNode } from "react";
 import "./Recording.css";
 import SectionHeader from "../../layouts/SectionHeader";
 import { MdInfoOutline } from "react-icons/md";
@@ -9,6 +9,12 @@ import { FaImage, FaPhone, FaRegFileAlt } from "react-icons/fa";
 import { SiTelegram } from "react-icons/si";
 import { IoLogoWhatsapp } from "react-icons/io5";
 import { BiWorld } from "react-icons/bi";
+import {
+  useAppDispatch,
+  useAppSelector,
+  type RootState,
+} from "../../stores/store";
+import { fetchAudioFiles } from "../../stores/slices/deviceSlice";
 
 interface IApp {
   id: number;
@@ -47,7 +53,47 @@ const APPS: IApp[] = [
 const Recording: React.FC = () => {
   const [selectedApp, setSelectedApp] = useState<IApp>(APPS[0]);
   const [selectedTab, setSelectedTab] = useState<"audio" | "image">("audio");
+  const today = new Date().toISOString().split("T")[0];
+  const [fromDate, setFromDate] = useState(today);
+  const [toDate, setToDate] = useState(today);
   const { t } = useTranslation();
+  const { selectedDevice } = useAppSelector((state: RootState) => state.device);
+  const dispatch = useAppDispatch();
+
+  const filterAudioHistory = () => {
+    if (selectedDevice?.id) {
+      const from = new Date(fromDate);
+      const to = new Date(toDate);
+
+      const isToday = toDate === today;
+      if (isToday) {
+        const now = new Date();
+        to.setHours(
+          now.getHours(),
+          now.getMinutes(),
+          now.getSeconds(),
+          now.getMilliseconds()
+        );
+      } else {
+        to.setHours(23, 59, 59, 999);
+      }
+
+      dispatch(
+        fetchAudioFiles({
+          deviceId: selectedDevice.id,
+          dateFrom: from,
+          dateTo: to,
+          appId: selectedApp.id,
+        })
+      );
+    }
+  };
+
+  useEffect(() => {
+    if (selectedDevice?.id) {
+      filterAudioHistory();
+    }
+  }, [dispatch, selectedDevice]);
 
   const renderTabContent = () => {
     switch (selectedTab) {
@@ -92,12 +138,22 @@ const Recording: React.FC = () => {
               <div className="recording__filter__dates">
                 <div className="recording__filter__date">
                   <label htmlFor="from">{t("common.from")}</label>
-                  <input type="date" id="from" />
+                  <input
+                    type="date"
+                    id="from"
+                    value={fromDate}
+                    onChange={(e) => setFromDate(e.target.value)}
+                  />
                 </div>
 
                 <div className="recording__filter__date">
                   <label htmlFor="to">{t("common.to")}</label>
-                  <input type="date" id="to" />
+                  <input
+                    type="date"
+                    id="to"
+                    value={toDate}
+                    onChange={(e) => setToDate(e.target.value)}
+                  />
                 </div>
               </div>
 

src/stores/slices/deviceSlice.ts

@@ -11,11 +11,20 @@ interface IDeviceData {
   };
 }
 
+interface IAudioList {
+  path: string;
+  url: string;
+  file_exists: boolean;
+  file_ext: string;
+  file_size: string;
+  date: string;
+}
+
 interface IDeviceState {
   devices: IDevice[];
   deviceData: IDeviceData | null;
   selectedDevice: IDevice | null;
-  audioList: any[];
+  audioList: IAudioList[];
   isAudioListLoading: boolean;
   loadingDevices: boolean;
   errorDevices: string;
@@ -93,14 +102,17 @@ export const fetchAudioFiles = createAsyncThunk(
     { rejectWithValue }
   ) => {
     try {
-      const response = await sendRpcRequest<{ list: any[] }>("data.getMedia", {
-        deviceId,
-        type: appId,
-        dateFrom,
-        dateTo,
-        recStart: 0,
-        recLimit: 50,
-      });
+      const response = await sendRpcRequest<{ list: IAudioList[] }>(
+        "data.getMedia",
+        {
+          deviceId,
+          type: appId,
+          dateFrom,
+          dateTo,
+          recStart: 0,
+          recLimit: 50,
+        }
+      );
 
       return response.list;
     } catch (error: unknown) {