Implemented UserPage

front/src/assets/backArrow.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="rgb(185, 179, 170)" width="24" height="24" class="bi bi-arrow-left" viewBox="0 0 16 16">
+    <path fill-rule="evenodd"
+        d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" />
+</svg>

front/src/assets/rightAngle.svg

@@ -0,0 +1,4 @@
+<svg fill="rgb(185, 179, 170)" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
+    <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
+    <path d="M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z"/>
+</svg>

front/src/assets/userCategories.ts

@@ -0,0 +1,45 @@
+import { Announcement } from '../api/announcement/types'
+import { FiltersType } from '../utils/filters'
+
+const userCategories = ['givingOut', 'booked', 'history'] as const
+
+type UserCategory = typeof userCategories[number]
+
+const UserCategoriesNames: Record<UserCategory, string> = {
+    givingOut: 'Раздача',
+    booked: 'Бронь',
+    history: 'История',
+}
+
+const userCategoriesInfos: Record<UserCategory, (ann: Announcement) => string> = {
+    givingOut: (ann: Announcement) => (
+        `Годен до ${new Date(ann.bestBy).toLocaleDateString('ru')}`
+    ),
+    booked: (ann: Announcement) => (
+        `Бронь ещё ${(ann as Announcement & { bookedBy: number[] }).bookedBy.length} чел.`
+    ),
+    history: (ann: Announcement) => (
+        `Забрал ${new Date((ann as Announcement & { taken: number }).taken).toLocaleDateString('ru')}`
+    ),
+}
+
+const composeUserCategoriesFilters: Record<UserCategory, () => FiltersType> = {
+    givingOut: () => {
+        const userId = -1
+
+        return ({ userId })
+    },
+    booked: () => {
+        const userId = -1
+
+        return ({ bookedBy: userId })
+    },
+    history: () => {
+        const userId = -1
+
+        return ({ userId, status: 'taken' })
+    }
+}
+
+export type { UserCategory }
+export { userCategories, UserCategoriesNames, userCategoriesInfos, composeUserCategoriesFilters }