feat: render recording audio list

src/pages/Messengers/Messengers.css

@@ -76,8 +76,10 @@
 .messenger__chats__list {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
-    margin: 1rem 0;
+    gap: 0.5rem;
+    max-height: 50vh;
+    overflow-y: auto;
+    margin: 0.5rem 0;
 }
 
 .messenger__chats__item {

src/pages/Recording/Recording.css

@@ -100,8 +100,45 @@
     max-width: 100%;
 }
 
-
 .apps__filter__messenger.selected {
     background-color: var(--primary-color);
     color: var(--on-text-color);
+}
+
+.recording__audio__list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    max-height: 50vh;
+    overflow-y: auto;
+    margin: 0.5rem 0;
+}
+
+.recording__audio__item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    border-radius: 10px;
+    background: var(--content-bg-color);
+}
+
+.recording__audio__item__info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.recording__audio__item__info h4 {
+    font-size: 0.875rem;
+}
+
+.recording__audio__item__info p {
+    font-size: 0.75rem;
+}
+
+.recording__audio__item__icon {
+    color: var(--primary-color);
+    font-size: 1.5rem;
+    cursor: pointer;
 }
\ No newline at end of file

src/pages/Recording/Recording.tsx

@@ -7,7 +7,11 @@ import { useTranslation } from "react-i18next";
 import { FaMicrophoneLines } from "react-icons/fa6";
 import { FaImage, FaPhone, FaRegFileAlt } from "react-icons/fa";
 import { SiTelegram } from "react-icons/si";
-import { IoLogoWhatsapp } from "react-icons/io5";
+import {
+  IoCloudDownloadOutline,
+  IoLogoWhatsapp,
+  IoPlay,
+} from "react-icons/io5";
 import { BiWorld } from "react-icons/bi";
 import {
   useAppDispatch,
@@ -15,6 +19,7 @@ import {
   type RootState,
 } from "../../stores/store";
 import { fetchAudioFiles } from "../../stores/slices/deviceSlice";
+import { AiOutlineAudio } from "react-icons/ai";
 
 interface IApp {
   id: number;
@@ -58,6 +63,9 @@ const Recording: React.FC = () => {
   const [toDate, setToDate] = useState(today);
   const { t } = useTranslation();
   const { selectedDevice } = useAppSelector((state: RootState) => state.device);
+  const { audioList, isAudioListLoading } = useAppSelector(
+    (state: RootState) => state.device
+  );
   const dispatch = useAppDispatch();
 
   const filterAudioHistory = () => {
@@ -106,9 +114,33 @@ const Recording: React.FC = () => {
                 <MdInfoOutline className="recording__content__header__icon" />
               </div>
 
-              <p className="recording__content__empty">
-                {t("recording.audioFilesEmpty")}
-              </p>
+              {audioList.length === 0 && (
+                <p className="recording__content__empty">
+                  {t("recording.audioFilesEmpty")}
+                </p>
+              )}
+
+              <div className="recording__audio__list">
+                {audioList.map((audio, index) => {
+                  return (
+                    <div key={index} className="recording__audio__item">
+                      <div className="recording__audio__item__info">
+                        <AiOutlineAudio className="recording__audio__item__icon" />
+
+                        <div>
+                          <h4>{audio.date}</h4>
+                          <p>{audio.file_size}</p>
+                        </div>
+                      </div>
+
+                      <div className="recording__audio__item__info">
+                        <IoCloudDownloadOutline className="recording__audio__item__icon" />
+                        <IoPlay className="recording__audio__item__icon" />
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
             </div>
 
             <div className="recording__filter">
@@ -157,7 +189,11 @@ const Recording: React.FC = () => {
                 </div>
               </div>
 
-              <CButton title={t("button.search")} />
+              <CButton
+                title={t("button.search")}
+                onClick={filterAudioHistory}
+                isLoading={isAudioListLoading}
+              />
             </div>
           </div>
         );