made ratings

src/Entities/InputWithLabel/InputWithLabel.tsx

@@ -29,6 +29,7 @@ const InputWithLabel: React.FC<IInputWithLabel> = ({
       onChange(e);
     }
   };
+
   return (
     <div className="input-with-label">
       <label>{label}</label>

src/Pages/SignInPage/SignInPage.tsx

@@ -1,4 +1,3 @@
-import Image from "next/image";
 import "./SignInPage.scss";
 import sign_in_icon from "./icons/sign-in-icon.svg";
 import AuthHeader from "@/Entities/AuthHeader/AuthHeader";

src/Shared/types.ts

@@ -1,6 +1,6 @@
 export interface IFetch {
   response?: string;
-  data?: any;
+  data?: unknown;
   loading: boolean;
   error?: string;
 }

src/Widgets/home/RatingSection/RatingSection.scss

@@ -1,9 +1,128 @@
+@import "../../../Shared/variables.scss";
+
 .rating-section {
+  padding: 0 90px;
   margin-top: 110px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 30px;
+
+  &__table {
+    width: 100%;
+    padding: 15px;
+    background-color: #fff;
+    border: 1px solid $gray-300;
+    overflow: hidden;
+    overflow-x: auto;
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      border-radius: 6px;
+      thead {
+        tr {
+          border-bottom: 1px solid #ddd;
+          th {
+            padding: 15px 0;
+            text-align: left;
+            color: $gray-500;
+            font-size: 16px;
+            font-weight: 500;
+            gap: 4px;
+          }
+
+          #report-header-date,
+          #report-header-comment,
+          #report-header-like {
+            cursor: pointer;
+
+            div {
+              display: flex;
+              align-items: center;
+              gap: 4px;
+            }
+          }
+        }
+      }
+
+      tbody {
+        tr {
+          border-bottom: 1px solid #ddd;
+
+          td {
+            padding: 15px 0;
+          }
+
+          #report-date {
+            min-width: 150px;
+            color: $gray-500;
+            font-weight: 500;
+            font-size: 16px;
+          }
+
+          #report-location {
+            min-width: 200px;
+            overflow: hidden;
+
+            a {
+              text-decoration: underline;
+              white-space: preserve nowrap;
+              color: $light-blue;
+              font-size: 16px;
+              font-weight: 500;
+            }
+          }
+
+          #report-type {
+            min-width: 210px;
+
+            span {
+              width: 120px;
+              padding: 4px 12px;
+              font-size: 14px;
+              border-radius: 20px;
+              background: rgba(230, 68, 82, 0.8);
+              color: #fff;
+            }
+          }
+
+          #report-description {
+            min-width: 378px;
+
+            p {
+              width: 318px;
+              color: #32303a;
+              font-size: 18px;
+              font-weight: 500;
+              line-height: 20px;
+              letter-spacing: 0.1px;
+              text-align: justify;
+            }
+          }
+
+          #report-comment,
+          #report-like {
+            div {
+              display: flex;
+              align-items: center;
+              gap: 7px;
+            }
+          }
+        }
+
+        tr:last-child {
+          border-bottom: none;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .rating-section {
+    padding: 0 30px;
+  }
 }
 
 @media screen and (max-width: 768px) {
@@ -14,6 +133,8 @@
 
 @media screen and (max-width: 550px) {
   .rating-section {
+    padding: 0 16px;
+
     margin-top: 70px;
   }
 }

src/Widgets/home/RatingSection/RatingSection.tsx

@@ -1,14 +1,116 @@
+"use client";
+
 import SectionHeader from "@/Shared/UI/SectionHeader/SectionHeader";
 import "./RatingSection.scss";
 import SearchBar from "@/Features/SearchBar/SearchBar";
+import arrow_down_icon from "./icons/arrow-down-icon.svg";
+import arrow_up_icon from "./icons/arrow-up-icon.svg";
+import like_icon from "./icons/like-icon.svg";
+import message_icon from "./icons/message-icon.svg";
+import Image from "next/image";
+import { useRating } from "./rating.store";
+import { useEffect } from "react";
+import Link from "next/link";
 
 const RatingSection = () => {
+  const { data: reports, getRatings } = useRating();
+
+  useEffect(() => {
+    getRatings();
+  }, []);
+
+  const sliceDate = (date: string) => {
+    return `${date.slice(8, 10)}.${date.slice(5, 7)}.${date.slice(
+      0,
+      4
+    )}`;
+  };
+
+  const sliceLocation = (location: string) => {
+    if (location.length > 15) return `${location.slice(0, 15)}...`;
+
+    return location;
+  };
+
+  const sliceDescription = (description: string) => {
+    if (description.length > 49) {
+      return `${description.slice(0, 50)}...`;
+    }
+
+    return description;
+  };
+
   return (
     <div className="rating-section">
       <SectionHeader description="Yorem ipsum dolor sit amet, consectetur adipiscing elit.">
         Рейтинг
       </SectionHeader>
       <SearchBar placeholder="Введите адрес" />
+
+      <div className="rating-section__table">
+        <table>
+          <thead>
+            <tr>
+              <th id="report-header-date" tabIndex={0}>
+                <div>
+                  Дата
+                  <Image src={arrow_down_icon} alt="Arrow Down" />
+                  <Image src={arrow_up_icon} alt="Arrow Up" />
+                </div>
+              </th>
+              <th>Адрес</th>
+              <th>Статус</th>
+              <th>Описание</th>
+              <th id="report-header-comment" tabIndex={0}>
+                <div>
+                  Комментарии
+                  <Image src={arrow_down_icon} alt="Arrow Down" />
+                  <Image src={arrow_up_icon} alt="Arrow Up" />
+                </div>
+              </th>
+              <th id="report-header-like" tabIndex={0}>
+                <div>
+                  Рейтинг
+                  <Image src={arrow_down_icon} alt="Arrow Down" />
+                  <Image src={arrow_up_icon} alt="Arrow Up" />
+                </div>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {reports.results.map((report) => (
+              <tr key={report.id}>
+                <td id="report-date">
+                  {sliceDate(report.created_at)}
+                </td>
+                <td id="report-location">
+                  <Link href={`/report/${report.location[0].id}`}>
+                    {sliceLocation(report.location[0].address)}
+                  </Link>
+                </td>
+                <td id="report-type">
+                  <span>Разбитая дорога</span>
+                </td>
+                <td id="report-description">
+                  <p>{sliceDescription(report.description)}</p>
+                </td>
+                <td id="report-comment">
+                  <div>
+                    <Image src={message_icon} alt="Message Icon" />
+                    {report.count_reviews}
+                  </div>
+                </td>
+                <td id="report-like">
+                  <div>
+                    <Image src={like_icon} alt="Like Icon" />
+                    {report.total_likes}
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
     </div>
   );
 };

src/Widgets/home/RatingSection/icons/arrow-down-icon.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="arrow-down">
+<path id="Icon" d="M8.00016 3.33301V12.6663M8.00016 12.6663L12.6668 7.99967M8.00016 12.6663L3.3335 7.99967" stroke="#667085" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/Widgets/home/RatingSection/icons/arrow-up-icon.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="arrow-down">
+<path id="Icon" d="M7.99984 12.667L7.99984 3.33366M7.99984 3.33366L3.33317 8.00033M7.99984 3.33366L12.6665 8.00033" stroke="#667085" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/Widgets/home/RatingSection/icons/like-icon.svg

@@ -0,0 +1,5 @@
+<svg width="26" height="27" viewBox="0 0 26 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="thumbs-up">
+<path id="Vector" d="M7.58317 12.417L11.9165 2.66699C12.7785 2.66699 13.6051 3.0094 14.2146 3.6189C14.8241 4.22839 15.1665 5.05504 15.1665 5.91699V10.2503H21.2982C21.6122 10.2468 21.9233 10.3115 22.2099 10.4401C22.4964 10.5688 22.7516 10.7581 22.9577 10.9951C23.1638 11.2321 23.3159 11.5111 23.4035 11.8128C23.491 12.1144 23.512 12.4315 23.4648 12.742L21.9698 22.492C21.8915 23.0086 21.6291 23.4796 21.2309 23.818C20.8327 24.1564 20.3257 24.3396 19.8032 24.3337H7.58317M7.58317 12.417V24.3337M7.58317 12.417H4.33317C3.75853 12.417 3.20743 12.6453 2.80111 13.0516C2.39478 13.4579 2.1665 14.009 2.1665 14.5837V22.167C2.1665 22.7416 2.39478 23.2927 2.80111 23.6991C3.20743 24.1054 3.75853 24.3337 4.33317 24.3337H7.58317" stroke="#4AC03F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/Widgets/home/RatingSection/icons/message-icon.svg

@@ -0,0 +1,5 @@
+<svg width="26" height="27" viewBox="0 0 26 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="message-circle">
+<path id="Vector" d="M22.75 12.9584C22.7537 14.3882 22.4197 15.7987 21.775 17.075C21.0106 18.6044 19.8356 19.8908 18.3814 20.7901C16.9272 21.6894 15.2514 22.166 13.5417 22.1667C12.1118 22.1704 10.7013 21.8364 9.425 21.1917L3.25 23.25L5.30833 17.075C4.66368 15.7987 4.32961 14.3882 4.33333 12.9584C4.33399 11.2486 4.81066 9.57279 5.70995 8.11863C6.60923 6.66447 7.89561 5.4894 9.425 4.72503C10.7013 4.08037 12.1118 3.7463 13.5417 3.75003H14.0833C16.3414 3.87461 18.4741 4.82769 20.0732 6.42679C21.6723 8.0259 22.6254 10.1587 22.75 12.4167V12.9584Z" stroke="#489FE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/Widgets/home/RatingSection/rating.store.ts

@@ -0,0 +1,32 @@
+import { baseAPI } from "@/Shared/API/baseAPI";
+import { IFetch } from "@/Shared/types";
+import axios from "axios";
+import { create } from "zustand";
+import { IReport } from "./types";
+
+interface IRatingStore extends IFetch {
+  data: IReport;
+  getRatings: () => Promise<void>;
+}
+
+export const useRating = create<IRatingStore>((set) => ({
+  data: {
+    count: 0,
+    results: [],
+  },
+  loading: false,
+  error: "",
+  getRatings: async () => {
+    try {
+      set({ loading: true });
+
+      const response = await axios.get<IReport>(`${baseAPI}/report/`);
+
+      set({ data: response.data });
+    } catch (error: any) {
+      set({ error: error.message });
+    } finally {
+      set({ loading: false });
+    }
+  },
+}));

src/Widgets/home/RatingSection/types.ts

@@ -0,0 +1,19 @@
+export interface ILocation {
+  id: number;
+  address: string;
+}
+
+export interface IReport {
+  count: number;
+  results: IResults[];
+}
+
+interface IResults {
+  id: number;
+  created_at: string;
+  location: ILocation[];
+  category: number;
+  description: string;
+  count_reviews: number;
+  total_likes: number;
+}