24 |
25 | Delete {title}
26 |
27 |
28 | Are you sure you want to delete this {title.toLowerCase()}? This action cannot be undone.
29 |
30 |
31 |
37 | Cancel
38 |
39 |
45 | {isDeleting ? "Deleting..." : `Delete ${title}`}
46 |
47 |
48 |
setIsModalOpen(false)}
26 | />
27 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/frontend/src/components/molecules/buttons/login-button.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Button } from "../../atoms/button";
4 | import { User, LogOut } from "lucide-react";
5 | import { useUser } from "@/hooks/use-user";
6 |
7 | export function LoginButton() {
8 | const { user, login, logout } = useUser();
9 |
10 | return (
11 |
12 | {user ? (
13 |
19 | Logout
21 |
22 | ) : (
23 |
29 | Login
31 |
32 | )}
33 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/frontend/src/components/molecules/buttons/message-button.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/atoms/button";
2 | import { MessageSquare } from "lucide-react";
3 |
4 | export function MessageButton() {
5 | return (
6 |
7 |
12 | Message
14 |
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/frontend/src/components/molecules/buttons/report-button.tsx:
--------------------------------------------------------------------------------
1 | import { Bug } from "lucide-react";
2 | import { Button } from "@/components/atoms/button";
3 | import { useTheme } from "@/context/ThemeProviderContext";
4 |
5 | export function ReportButton({
6 | className,
7 | text = "Report Bug",
8 | }: {
9 | className?: string;
10 | text?: string;
11 | }) {
12 | const { theme } = useTheme();
13 | const isDark = theme === "dark";
14 |
15 | return (
16 |
32 |
38 | {text}
40 |
41 |
42 | );
43 | }
44 |
--------------------------------------------------------------------------------
/frontend/src/components/molecules/buttons/submit-button.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/atoms/button";
2 | import { RefreshCw } from "lucide-react";
3 | interface SubmutButtonProps {
4 | isUploading: boolean;
5 | isTelegramLinked: boolean;
6 | uploadProgress: number;
7 | }
8 | export function SubmitButton({
9 | isUploading,
10 | isTelegramLinked,
11 | uploadProgress,
12 | }: SubmutButtonProps) {
13 | return (
14 |
19 | {isUploading ? (
20 |
21 | Uploading... {uploadProgress}%
23 |
24 | ) : (
25 | "Create Listing"
26 | )}
27 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/frontend/src/components/molecules/combined-search.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { SearchInput } from "./search-input";
3 | import { ConditionDropdown } from "./condition-dropdown";
4 | import { PreSearchedItem } from "@/types/search";
5 |
6 | interface CombinedSearchProps {
7 | // Search props
8 | inputValue: string;
9 | setInputValue: (value: string) => void;
10 | preSearchedItems: PreSearchedItem[] | null;
11 | handleSearch: (query: string) => void;
12 | setKeyword: (keyword: string) => void;
13 |
14 | // Condition props
15 | conditions: string[];
16 | selectedCondition: string;
17 | setSelectedCondition: (condition: string) => void;
18 | }
19 |
20 | export function CombinedSearch({
21 | inputValue,
22 | setInputValue,
23 | preSearchedItems,
24 | handleSearch,
25 | setKeyword,
26 | conditions,
27 | selectedCondition,
28 | setSelectedCondition,
29 | }: CombinedSearchProps) {
30 | return (
31 |
32 |
46 | );
47 | }
--------------------------------------------------------------------------------
/frontend/src/components/molecules/general-section.tsx:
--------------------------------------------------------------------------------
1 | import { useNavigate } from "react-router-dom";
2 | import { Button } from "../atoms/button";
3 |
4 | export function GeneralSection({
5 | title,
6 | link,
7 | children,
8 | }: {
9 | title: string;
10 | link: string;
11 | children: React.ReactNode;
12 | }) {
13 | const navigate = useNavigate();
14 | return (
15 |
16 |
17 |
{title}
18 | navigate(link)}
22 | >
23 | See All
24 |
25 |
26 |
27 |
28 | {children}
29 |
30 |
(Component: ComponentType
) =>
6 | (props: P) => {
7 | return (
8 |
44 |
45 |
46 | Cancel
47 |
48 |
49 | {isLoggingIn ? "Logging in..." : "Login"}
50 |
51 |
52 |
53 | );
54 | };
55 |
--------------------------------------------------------------------------------
/frontend/src/components/molecules/telegram-status.tsx:
--------------------------------------------------------------------------------
1 | import { FaTelegram } from "react-icons/fa";
2 | import { Badge } from "@/components/atoms/badge";
3 | import { useTheme } from "@/context/ThemeProviderContext";
4 |
5 | interface TelegramStatusProps {
6 | isConnected: boolean;
7 | className?: string;
8 | }
9 |
10 | export function TelegramStatus({
11 | isConnected,
12 | className = "",
13 | }: TelegramStatusProps) {
14 | const { theme } = useTheme();
15 | const isDark = theme === "dark";
16 |
17 | if (!isConnected) return null;
18 |
19 | return (
20 |
36 | Connected
38 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/frontend/src/components/molecules/theme-toggle.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Moon, Sun } from "lucide-react";
4 | import { useTheme } from "../../context/ThemeProviderContext";
5 | import { Switch } from "../atoms/switch";
6 |
7 | export function ThemeToggle() {
8 | const { theme, setTheme } = useTheme();
9 |
10 | const toggleTheme = () => {
11 | setTheme(theme === "light" ? "dark" : "light");
12 | };
13 |
14 | return (
15 |
16 |
37 | );
38 | }
39 |
--------------------------------------------------------------------------------
/frontend/src/components/organisms/about/about-header.tsx:
--------------------------------------------------------------------------------
1 | import { useTheme } from "@/context/ThemeProviderContext";
2 |
3 | export const AboutHeader = () => {
4 | const { theme } = useTheme();
5 | const isDark = theme === "dark";
6 | return (
7 |
8 |
9 | About Nuspace
10 |
11 |
16 | SuperApp for Nazarbayev University students
17 |
18 |
27 |
28 |
30 | {title}
31 |
32 | {description}
33 |
34 |
35 | );
36 | };
37 |
--------------------------------------------------------------------------------
/frontend/src/components/organisms/about/mission-section.tsx:
--------------------------------------------------------------------------------
1 | import { useTheme } from "@/context/ThemeProviderContext";
2 |
3 | export const MessionSection = () => {
4 | const { theme } = useTheme();
5 | const isDark = theme === "dark";
6 | return (
7 |
12 |
Mission
13 |
14 | Nuspace is a single platform for Nazarbayev University students. Our
15 | goal is to simplify the daily life of students and make campus life more
16 | comfortable.
17 |
18 |
19 | We strive to create a reliable platform that will allow every student of
20 | Nazarbayev University to make the most of their time, easily find the
21 | necessary things and keep abreast of interesting events and
22 | opportunities within the university.
23 |
24 |
14 |
15 |
16 |
18 | Need Help?
19 |
22 | Found a bug or having issues? Reach out directly
23 | for quick assistance.
24 |
25 |
29 |
32 |
33 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/frontend/src/components/organisms/animations/AnimatedCard.tsx:
--------------------------------------------------------------------------------
1 | import { motion } from "framer-motion";
2 | import { Card } from "../../atoms/card";
3 | import { ReactNode } from "react";
4 |
5 | interface AnimatedCardProps {
6 | children: ReactNode;
7 | hasFloatingBackground?: boolean;
8 | backgroundEffects?: ReactNode;
9 | variants?: any;
10 | className?: string;
11 | [key: string]: any;
12 | }
13 |
14 | export function AnimatedCard({
15 | children,
16 | hasFloatingBackground = false,
17 | backgroundEffects,
18 | variants,
19 | className = "",
20 | ...props
21 | }: AnimatedCardProps) {
22 | return (
23 |
24 |
28 | {hasFloatingBackground && (
29 |
30 | {backgroundEffects}
31 |
32 | )}
33 |
34 | {children}
35 |
36 |
37 |
38 | );
39 | }
--------------------------------------------------------------------------------
/frontend/src/components/organisms/animations/AnimatedFormField.tsx:
--------------------------------------------------------------------------------
1 | import { motion } from "framer-motion";
2 | import { Label } from "../../atoms/label";
3 | import { ReactNode } from "react";
4 |
5 | interface AnimatedFormFieldProps {
6 | label: string;
7 | icon: ReactNode;
8 | fieldName: string;
9 | isFocused: boolean;
10 | children: ReactNode;
11 | showFocusIndicator?: boolean;
12 | focusColor?: string;
13 | className?: string;
14 | }
15 |
16 | export function AnimatedFormField({
17 | label,
18 | icon,
19 | fieldName,
20 | isFocused,
21 | children,
22 | showFocusIndicator = true,
23 | focusColor = "primary",
24 | className = ""
25 | }: AnimatedFormFieldProps) {
26 | return (
27 |
28 |
29 |
30 | {icon}
31 |
32 |
33 | {label}
34 |
35 |
36 |
37 |
38 | {children}
39 |
40 |
20 | {/* True Grid Layout */}
21 |
22 | {categories.map((cat) => (
23 | onCategorySelect(cat.title)}
31 | />
32 | ))}
33 |
34 |
20 | {title && (
21 |
22 | {title}
23 |
24 | )}
25 | {children}
26 |
27 | );
28 | }
--------------------------------------------------------------------------------
/frontend/src/components/organisms/media/index.ts:
--------------------------------------------------------------------------------
1 | // Core components
2 | export { MediaPreview, MediaPreviewDefaults } from './MediaPreview';
3 | export type { MediaPreviewProps } from './MediaPreview';
4 |
5 | // Re-export commonly used types for convenience
6 | export type { MediaItem, MediaAction } from '@/features/media/types/media';
7 |
--------------------------------------------------------------------------------
/frontend/src/components/templates/about-template.tsx:
--------------------------------------------------------------------------------
1 | import { AboutHeader } from "@/components/organisms/about/about-header";
2 | import { MessionSection } from "@/components/organisms/about/mission-section";
3 | import { AboutUsSection } from "@/components/organisms/about/about-us-section";
4 |
5 | export function AboutTemplate() {
6 | return (
7 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/frontend/src/components/ui/footer.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from "react-router-dom";
2 | import { ROUTES } from "@/data/routes";
3 |
4 | interface FooterProps {
5 | note: string;
6 | }
7 |
8 | export function Footer({ note }: FooterProps) {
9 | return (
10 |
11 |
15 | );
16 | }
--------------------------------------------------------------------------------
/frontend/src/data/features.ts:
--------------------------------------------------------------------------------
1 | import { MdSell, MdEvent, MdRestaurantMenu } from "react-icons/md";
2 | import { ROUTES } from "./routes";
3 | export const features = [
4 | {
5 | title: "Kupi-Prodai",
6 | description:
7 | "Here students have the opportunity to sell, buy or exchange their belongings.",
8 | icon: MdSell,
9 | link: ROUTES.APPS.KUPI_PRODAI.ROOT,
10 | },
11 | {
12 | title: "Events",
13 | description:
14 | "Information about holidays, meetings and events that take place on the territory of the University. Students will be able to find activities that are interesting to them.",
15 | icon: MdEvent,
16 | link: ROUTES.APPS.CAMPUS_CURRENT.ROOT,
17 | },
18 | {
19 | title: "Dorm Eats",
20 | description:
21 | "Daily menu in the university canteen. What dishes are available, what dishes are being prepared - all this students have the opportunity to find out in advance.",
22 | icon: MdRestaurantMenu,
23 | link: ROUTES.APPS.DORM_EATS.ROOT,
24 | },
25 | ];
26 |
--------------------------------------------------------------------------------
/frontend/src/data/kp/product.tsx:
--------------------------------------------------------------------------------
1 | import { Blocks, Book, Cable, Shirt, Armchair, WashingMachine, Volleyball, Apple, Bike, Archive} from "lucide-react";
2 | export const productCategories: Types.DisplayCategory[] = [
3 | {
4 | title: "All",
5 | icon: Blocks,
6 | },
7 | {
8 | title: "Books",
9 | icon: Book,
10 | },
11 | {
12 | title: "Electronics",
13 | icon: Cable,
14 | },
15 | {
16 | title: "Clothing",
17 | icon: Shirt,
18 | },
19 | {
20 | title: "Furniture",
21 | icon: Armchair
22 | },
23 | {
24 | title: "Appliances",
25 | icon: WashingMachine
26 | },
27 | {
28 | title: "Sports",
29 | icon: Volleyball,
30 | },
31 | {
32 | title: "Food",
33 | icon: Apple,
34 | },
35 | {
36 | title: "Transport",
37 | icon: Bike,
38 | },
39 | {
40 | title: "Others",
41 | icon: Archive,
42 | },
43 | ];
44 |
--------------------------------------------------------------------------------
/frontend/src/features/campuscurrent/communities/api/hooks/usePreSearchCommunities.ts:
--------------------------------------------------------------------------------
1 | import { useQuery } from "@tanstack/react-query";
2 | import { apiCall } from "@/utils/api";
3 | import { PreSearchedItem } from "@/types/search";
4 |
5 | export const usePreSearchCommunities = (inputValue: string) => {
6 | const keyword = String(inputValue || "").trim();
7 | const { data } = useQuery({
8 | queryKey: ["pre-search-communities", keyword],
9 | enabled: !!keyword,
10 | queryFn: async ({ signal }) => {
11 | const res = await apiCall(
12 | `/search/?keyword=${encodeURIComponent(keyword)}&storage_name=communities&page=1&size=10`,
13 | { signal },
14 | );
15 | return res as Array<{ id: number | string; name: string }>;
16 | },
17 | });
18 |
19 | const preSearchedItems: PreSearchedItem[] | null = Array.isArray(data)
20 | ? data.map((c) => ({ id: c.id, name: c.name }))
21 | : null;
22 |
23 | return { preSearchedItems };
24 | };
25 |
26 |
27 |
--------------------------------------------------------------------------------
/frontend/src/features/campuscurrent/communities/components/forms/CommunityDescription.tsx:
--------------------------------------------------------------------------------
1 | import { useCommunityForm } from "@/context/CommunityFormContext";
2 | import { Label } from "@/components/atoms/label";
3 | import { Textarea } from "@/components/atoms/textarea";
4 |
5 | export function CommunityDescription() {
6 | const { formData, handleInputChange, isFieldEditable } = useCommunityForm();
7 |
8 | return (
9 |
10 |
11 | Description *
12 |
13 | {(formData.description || "").length} / 1000
14 |
15 |
16 |
27 |
>(
21 | campuscurrentAPI.getCommunitiesQueryOptions({
22 | page,
23 | size,
24 | keyword: keyword || null,
25 | category: options?.category ?? null,
26 | recruitment_status: options?.recruitment_status ?? null,
27 | }),
28 | );
29 |
30 | return {
31 | communities: data || null,
32 | isLoading,
33 | isError,
34 | page,
35 | setPage,
36 | size,
37 | setSize,
38 | keyword,
39 | setKeyword,
40 | };
41 | };
42 |
--------------------------------------------------------------------------------
/frontend/src/features/campuscurrent/communities/hooks/use-community.ts:
--------------------------------------------------------------------------------
1 | import { useQuery } from "@tanstack/react-query";
2 | import { campuscurrentAPI } from "../api/communitiesApi";
3 | import { useParams } from "react-router-dom";
4 | import { Community, CommunityPermissions } from "@/features/campuscurrent/types/types";
5 |
6 | export const useCommunity = () => {
7 | const { id } = useParams<{ id: string }>();
8 |
9 | const { data, isPending, isLoading, isError } = useQuery({
10 | ...campuscurrentAPI.getCommunityQueryOptions(id || ""),
11 | enabled: !!id,
12 | // Normalize API response to a consistent shape
13 | select: (raw: any): { community: Community | null; permissions: CommunityPermissions | null } => {
14 | const community: Community | null = (raw?.community as Community) ?? (raw as Community) ?? null;
15 | const permissions: CommunityPermissions | null =
16 | (raw?.permissions as CommunityPermissions) ??
17 | ((community as any)?.permissions as CommunityPermissions) ??
18 | null;
19 | return { community, permissions };
20 | },
21 | });
22 |
23 | return {
24 | community: (data as any)?.community ?? null,
25 | permissions: (data as any)?.permissions ?? null,
26 | isPending,
27 | isLoading,
28 | isError,
29 | };
30 | };
31 |
--------------------------------------------------------------------------------
/frontend/src/features/campuscurrent/communities/hooks/use-edit-community.ts:
--------------------------------------------------------------------------------
1 | import { useMutation, useQueryClient } from "@tanstack/react-query";
2 | import { campuscurrentAPI } from "../api/communitiesApi";
3 | import { useParams } from "react-router-dom";
4 | import { Community } from "@/features/campuscurrent/types/types";
5 |
6 | export const useEditCommunity = () => {
7 | const { id } = useParams<{ id: string }>();
8 | const queryClient = useQueryClient();
9 |
10 | return useMutation({
11 | mutationFn: (data: Community) =>
12 | campuscurrentAPI.editCommunity(data.id.toString(), data),
13 | onSuccess: (data, variables) => {
14 | queryClient.invalidateQueries({
15 | queryKey: campuscurrentAPI.getCommunityQueryOptions(variables.id.toString()).queryKey,
16 | });
17 | queryClient.invalidateQueries({ queryKey: ['campusCurrent', 'community', id] });
18 | },
19 | });
20 | };
--------------------------------------------------------------------------------
/frontend/src/features/campuscurrent/communities/hooks/use-search-communities.ts:
--------------------------------------------------------------------------------
1 | import { useQuery } from "@tanstack/react-query";
2 | import { campuscurrentAPI } from "../api/communitiesApi";
3 | import { Community } from "@/features/campuscurrent/types/types";
4 |
5 | export const useSearchCommunities = (params?: { keyword?: string; size?: number }) => {
6 | const keyword = (params?.keyword ?? "").trim();
7 | const size = params?.size ?? (keyword ? 10 : 20);
8 |
9 | const { data, isLoading, isError } = useQuery>(
10 | campuscurrentAPI.getCommunitiesQueryOptions({
11 | page: 1,
12 | size,
13 | keyword: keyword || null,
14 | category: null,
15 | })
16 | );
17 |
18 | return {
19 | communities: data || null,
20 | isLoading,
21 | isError,
22 | };
23 | };
24 |
25 |
26 |
--------------------------------------------------------------------------------
/frontend/src/features/campuscurrent/communities/hooks/use-user-communities.ts:
--------------------------------------------------------------------------------
1 | import { useQuery } from "@tanstack/react-query";
2 | import { campuscurrentAPI } from "../api/communitiesApi";
3 |
4 | export const useUserCommunities = (userSub: string | null | undefined) => {
5 | const { data, isLoading, isError } = useQuery({
6 | ...campuscurrentAPI.getUserCommunitiesQueryOptions(userSub || ""),
7 | enabled: !!userSub,
8 | });
9 |
10 | return {
11 | communities: (data as any)?.communities || [],
12 | isLoading,
13 | isError,
14 | totalCommunities: (data as any)?.total_pages || 0,
15 | };
16 | };
17 |
--------------------------------------------------------------------------------
/frontend/src/features/campuscurrent/communities/hooks/useDeleteCommunity.ts:
--------------------------------------------------------------------------------
1 | import { useMutation, useQueryClient } from "@tanstack/react-query";
2 | import { campuscurrentAPI } from "@/features/campuscurrent/communities/api/communitiesApi";
3 | import { useToast } from "@/hooks/use-toast";
4 |
5 | export function useDeleteCommunity() {
6 | const { toast } = useToast();
7 | const queryClient = useQueryClient();
8 |
9 | const deleteCommunityMutation = useMutation({
10 | mutationFn: (id: string) => campuscurrentAPI.deleteCommunity(id),
11 | onSuccess: () => {
12 | queryClient.invalidateQueries({ queryKey: ["campusCurrent", "communities"] });
13 | toast({
14 | title: "Success",
15 | description: "Community deleted successfully!",
16 | });
17 | },
18 | onError: (error) => {
19 | console.error("Community deletion failed:", error);
20 | toast({
21 | title: "Error",
22 | description: "Failed to delete community",
23 | variant: "destructive",
24 | });
25 | },
26 | });
27 |
28 | const handleDelete = async (id: string) => {
29 | try {
30 | await deleteCommunityMutation.mutateAsync(id);
31 | } catch (error) {
32 | console.error("Community deletion failed:", error);
33 | throw error;
34 | }
35 | };
36 |
37 | return {
38 | handleDelete,
39 | isDeleting: deleteCommunityMutation.isPending,
40 | };
41 | }
42 |
43 |
--------------------------------------------------------------------------------
/frontend/src/features/campuscurrent/communities/hooks/useInfiniteCommunities.ts:
--------------------------------------------------------------------------------
1 | import { useInfiniteScroll, useInfiniteScrollWithWindow } from '@/hooks/useInfiniteScroll';
2 | import { Community } from '@/features/campuscurrent/types/types';
3 | import * as Routes from '@/data/routes';
4 |
5 | export type UseInfiniteCommunitiesParams = {
6 | keyword?: string;
7 | category?: string | null;
8 | recruitment_status?: 'open' | 'closed' | null;
9 | size?: number;
10 | };
11 |
12 | export function useInfiniteCommunities(params: UseInfiniteCommunitiesParams = {}) {
13 | const {
14 | keyword = "",
15 | category,
16 | recruitment_status,
17 | size = 12,
18 | } = params;
19 |
20 | const infiniteScrollReturn = useInfiniteScroll({
21 | queryKey: ["campusCurrent", "communities"],
22 | apiEndpoint: `/${Routes.COMMUNITIES}`,
23 | size,
24 | keyword,
25 | additionalParams: {
26 | category,
27 | recruitment_status,
28 | },
29 | });
30 |
31 | return useInfiniteScrollWithWindow(infiniteScrollReturn);
32 | }
33 |
--------------------------------------------------------------------------------
/frontend/src/features/campuscurrent/communities/hooks/useVirtualCommunities.ts:
--------------------------------------------------------------------------------
1 | import { useInfiniteScroll } from '@/hooks/useInfiniteScroll';
2 | import { Community } from '@/features/campuscurrent/communities/types';
3 | import * as Routes from '@/data/routes';
4 |
5 | export function useVirtualCommunities(keyword: string = "") {
6 | return useInfiniteScroll({
7 | queryKey: ["campusCurrent", "communities"],
8 | apiEndpoint: `/${Routes.COMMUNITIES}`,
9 | size: 12,
10 | keyword,
11 | additionalParams: {},
12 | estimateSize: () => 200, // Estimate each community card to be 200px tall
13 | overscan: 4, // Only render 4 items outside viewport
14 | });
15 | }
16 |
17 |
--------------------------------------------------------------------------------
/frontend/src/features/campuscurrent/events/components/forms/EventDescription.tsx:
--------------------------------------------------------------------------------
1 | import { Label } from '@/components/atoms/label';
2 | import { Textarea } from '@/components/atoms/textarea';
3 | import { useEventForm } from '../../../../../context/EventFormContext';
4 |
5 | export function EventDescription() {
6 | const {
7 | formData,
8 | handleInputChange,
9 | isFieldEditable,
10 | } = useEventForm();
11 |
12 | return (
13 |
14 |
15 | Description
16 |
17 | {formData.description?.length} / 1250
18 |
19 |
20 |
31 |
({
7 | queryKey: ["campusCurrent", "events"],
8 | apiEndpoint: `/${Routes.EVENTS}`,
9 | size: 12,
10 | keyword,
11 | additionalParams: {},
12 | estimateSize: () => 250, // Estimate each event card to be 250px tall
13 | overscan: 4, // Only render 4 items outside viewport
14 | });
15 | }
16 |
17 |
--------------------------------------------------------------------------------
/frontend/src/features/campuscurrent/events/utils/calendar.ts:
--------------------------------------------------------------------------------
1 | import { Event } from "../../types/types";
2 |
3 | export const addToGoogleCalendar = (event: Event) => {
4 | const eventDate = new Date(event.start_datetime);
5 | const endDate = new Date(event.end_datetime);
6 |
7 | const googleCalendarUrl = `https://calendar.google.com/calendar/render?action=TEMPLATE&text=${encodeURIComponent(
8 | event.name,
9 | )}&dates=${eventDate
10 | .toISOString()
11 | .replace(/-|:|\.\d+/g, "")}/${endDate
12 | .toISOString()
13 | .replace(/-|:|\.\d+/g, "")}&details=${encodeURIComponent(
14 | event.description,
15 | )}&location=${encodeURIComponent(event.place)}`;
16 |
17 | window.open(googleCalendarUrl, "_blank");
18 | };
19 |
--------------------------------------------------------------------------------
/frontend/src/features/campuscurrent/pages/layout.tsx:
--------------------------------------------------------------------------------
1 | import { Outlet } from "react-router-dom";
2 | import { useState } from "react";
3 | import { CommunityModal } from "@/features/campuscurrent/communities/components/CommunityModal";
4 | import { EventModal } from "@/features/campuscurrent/events/components/EventModal";
5 |
6 | export function Layout() {
7 | const [isCreateCommunityModalOpen, setIsCreateCommunityModalOpen] = useState(false);
8 | const [isCreateEventModalOpen, setIsCreateEventModalOpen] = useState(false);
9 |
10 |
11 |
12 |
13 | return (
14 |
15 | {/* Main Content - No tabs needed since only Events remains */}
16 |
17 |
19 |
20 | {/* Create Community Modal */}
21 |
setIsCreateCommunityModalOpen(false)}
24 | isEditMode={false}
25 | />
26 |
27 | {/* Create Event Modal */}
28 | setIsCreateEventModalOpen(false)}
31 | isEditMode={false}
32 | />
33 | ("");
16 |
17 | const keyword = params.keyword ?? internalKeyword;
18 |
19 | const { data, isLoading, isError } = useQuery(
20 | subspaceApi.getPostsQueryOptions({
21 | community_id: params.community_id ?? null,
22 | page,
23 | size,
24 | keyword: keyword || null,
25 | }),
26 | );
27 |
28 | return {
29 | posts: data ?? null,
30 | isLoading,
31 | isError,
32 | page,
33 | setPage,
34 | size,
35 | setSize,
36 | keyword,
37 | setKeyword: setInternalKeyword,
38 | };
39 | }
40 |
41 |
42 |
--------------------------------------------------------------------------------
/frontend/src/features/campuscurrent/subspace/api/hooks/usePreSearchPosts.ts:
--------------------------------------------------------------------------------
1 | import { useQuery } from "@tanstack/react-query";
2 | import { apiCall } from "@/utils/api";
3 | import { PreSearchedItem } from "@/types/search";
4 |
5 | export const usePreSearchPosts = (inputValue: string) => {
6 | const keyword = String(inputValue || "").trim();
7 | const { data } = useQuery({
8 | queryKey: ["pre-search-posts", keyword],
9 | enabled: !!keyword,
10 | queryFn: async ({ signal }) => {
11 | const res = await apiCall(
12 | `/search/?keyword=${encodeURIComponent(keyword)}&storage_name=community_posts&page=1&size=10`,
13 | { signal },
14 | );
15 | return res as Array<{ id: number | string; title: string }>;
16 | },
17 | });
18 |
19 | const preSearchedItems: PreSearchedItem[] | null = Array.isArray(data)
20 | ? data.map((p) => ({ id: p.id, name: p.title }))
21 | : null;
22 |
23 | return { preSearchedItems };
24 | };
25 |
--------------------------------------------------------------------------------
/frontend/src/features/campuscurrent/subspace/api/hooks/useUpdatePost.ts:
--------------------------------------------------------------------------------
1 | import { useMutation } from "@tanstack/react-query";
2 | import { subspaceApi } from "@/features/campuscurrent/subspace/api/subspaceApi";
3 | import type { UpdatePostData } from "@/features/campuscurrent/subspace/types";
4 | import { queryClient } from "@/utils/query-client";
5 |
6 | export function useUpdatePost() {
7 | return useMutation({
8 | mutationFn: ({ id, data }: { id: string | number; data: UpdatePostData }) => subspaceApi.updatePost(id, data),
9 | onSuccess: ({ id }) => {
10 | queryClient.invalidateQueries({ queryKey: subspaceApi.baseKey });
11 | queryClient.invalidateQueries({
12 | queryKey: [...subspaceApi.baseKey, "detail", String(id)] });
13 | },
14 | });
15 | }
--------------------------------------------------------------------------------
/frontend/src/features/campuscurrent/subspace/hooks/useVirtualPosts.ts:
--------------------------------------------------------------------------------
1 | import { useInfiniteScroll } from '@/hooks/useInfiniteScroll';
2 | import { SubspacePost } from '@/features/campuscurrent/subspace/types';
3 | import * as Routes from '@/data/routes';
4 |
5 | export function useVirtualPosts(keyword: string = "") {
6 | return useInfiniteScroll({
7 | queryKey: ["campusCurrent", "posts"],
8 | apiEndpoint: `/${Routes.POSTS}`,
9 | size: 10,
10 | keyword,
11 | additionalParams: { community_id: null },
12 | estimateSize: () => 300, // Estimate each post to be 300px tall
13 | overscan: 3, // Only render 3 items outside viewport
14 | });
15 | }
16 |
17 |
--------------------------------------------------------------------------------
/frontend/src/features/campuscurrent/subspace/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./api/subspaceApi";
2 | export * from "./types";
3 | export * from "./hooks/usePosts";
4 | export * from "./hooks/usePost";
5 | export * from "./hooks/useCreatePost";
6 | export * from "./hooks/useUpdatePost";
7 | export * from "./hooks/useDeletePost";
8 | export * from "./api/hooks/useCreatePost";
9 | export * from "./api/hooks/useUpdatePost";
10 | export * from "./api/hooks/useDeletePost";
11 |
12 |
13 |
--------------------------------------------------------------------------------
/frontend/src/features/campuscurrent/subspace/pages/list.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useState } from "react";
4 | import { SubspacePosts } from "@/features/campuscurrent/subspace/components/SubspacePosts";
5 | import { SubspacePostModal } from "@/features/campuscurrent/subspace/components/SubspacePostModal";
6 | import MotionWrapper from "@/components/atoms/motion-wrapper";
7 |
8 | export default function SubspacePage() {
9 | const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
10 |
11 | return (
12 |
13 |
14 |
15 |
16 | setIsCreateModalOpen(true)}
18 | />
19 |
20 |
21 |
22 |
setIsCreateModalOpen(false)}
25 | />
26 |
28 | );
29 | }
30 |
31 |
32 |
--------------------------------------------------------------------------------
/frontend/src/features/campuscurrent/types/event-sections.ts:
--------------------------------------------------------------------------------
1 | import { ROUTES } from "@/data/routes";
2 |
3 | export const eventSections = [
4 | {
5 | title: "Featured Events",
6 | description: "Handpicked events you won't want to miss.",
7 | link: ROUTES.APPS.CAMPUS_CURRENT.EVENTS,
8 | },
9 | {
10 | title: "Today's Events",
11 | description: "What's happening on campus today.",
12 | link: ROUTES.APPS.CAMPUS_CURRENT.EVENTS,
13 | },
14 | {
15 | title: "Academic",
16 | description: "Lectures, workshops, and academic deadlines.",
17 | link: ROUTES.APPS.CAMPUS_CURRENT.EVENTS,
18 | },
19 | {
20 | title: "Cultural",
21 | description: "Celebrate diversity and culture.",
22 | link: ROUTES.APPS.CAMPUS_CURRENT.EVENTS,
23 | },
24 | {
25 | title: "Sports",
26 | description: "Get in the game with university sports.",
27 | link: ROUTES.APPS.CAMPUS_CURRENT.EVENTS,
28 | },
29 | {
30 | title: "Social",
31 | description: "Meet new people and have fun.",
32 | link: ROUTES.APPS.CAMPUS_CURRENT.EVENTS,
33 | },
34 | ];
35 |
--------------------------------------------------------------------------------
/frontend/src/features/campuscurrent/types/nav-tabs.tsx:
--------------------------------------------------------------------------------
1 | import { ROUTES } from "@/data/routes";
2 |
3 | export const navTabs = [
4 | {
5 | name: "Events",
6 | path: ROUTES.APPS.CAMPUS_CURRENT.EVENTS,
7 | },
8 | ];
9 |
--------------------------------------------------------------------------------
/frontend/src/features/grade-statistics/api/hooks/usePreSearchGrades.ts:
--------------------------------------------------------------------------------
1 | import { useQuery } from "@tanstack/react-query";
2 | import { apiCall } from "@/utils/api";
3 | import { PreSearchedItem } from "@/types/search";
4 |
5 | export const usePreSearchGrades = (inputValue: string) => {
6 | const keyword = String(inputValue || "").trim();
7 | const { data } = useQuery({
8 | queryKey: ["pre-search-grades", keyword],
9 | enabled: !!keyword,
10 | queryFn: async ({ signal }) => {
11 | const res = await apiCall(
12 | `/search/?keyword=${encodeURIComponent(keyword)}&storage_name=grade_reports&page=1&size=10`,
13 | { signal },
14 | );
15 | return res as Array<{ id: number | string; course_code: string; course_title: string }>;
16 | },
17 | });
18 |
19 | const preSearchedItems: PreSearchedItem[] | null = Array.isArray(data)
20 | ? data.map((grade) => ({
21 | id: grade.id,
22 | name: `${grade.course_code} - ${grade.course_title}`
23 | }))
24 | : null;
25 |
26 | return { preSearchedItems };
27 | };
28 |
--------------------------------------------------------------------------------
/frontend/src/features/grade-statistics/components/TrendIndicator.tsx:
--------------------------------------------------------------------------------
1 | import { ArrowDown, ArrowUp } from 'lucide-react';
2 |
3 | interface TrendIndicatorProps {
4 | userScore: number;
5 | classAverage: number | null | undefined;
6 | }
7 |
8 | export function TrendIndicator({ userScore, classAverage }: TrendIndicatorProps) {
9 | if (classAverage == null) {
10 | return null;
11 | }
12 |
13 | const difference = userScore - classAverage;
14 | const isUp = difference >= 0;
15 | const colorClass = isUp ? 'text-green-500' : 'text-red-500';
16 | const Icon = isUp ? ArrowUp : ArrowDown;
17 |
18 | return (
19 |
20 |
22 | {Math.abs(difference).toFixed(1)}% {isUp ? 'above' : 'below'} avg
23 |
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/frontend/src/features/kupi-prodai/api/hooks/usePreSearchProducts.ts:
--------------------------------------------------------------------------------
1 | import { useUser } from "@/hooks/use-user";
2 | import { kupiProdaiApi } from "@/features/kupi-prodai/api/kupiProdaiApi";
3 | import { useQuery } from "@tanstack/react-query";
4 | import { PreSearchedItem } from "@/types/search";
5 |
6 | export const usePreSearchProducts = (inputValue: string) => {
7 | const { user } = useUser();
8 | const { data } = useQuery({
9 | ...kupiProdaiApi.getPreSearchedProductsQueryOptions(inputValue),
10 | enabled: !!user && !!inputValue,
11 | });
12 | const preSearchedItems: PreSearchedItem[] | null = Array.isArray(data)
13 | ? data.map((p) => ({ id: p.id, name: p.name }))
14 | : null;
15 | return { preSearchedItems };
16 | };
17 |
--------------------------------------------------------------------------------
/frontend/src/features/kupi-prodai/api/hooks/useProduct.ts:
--------------------------------------------------------------------------------
1 | import { useQuery } from "@tanstack/react-query";
2 | import { kupiProdaiApi } from "../kupiProdaiApi";
3 | import { useParams } from "react-router-dom";
4 |
5 | export const useProduct = () => {
6 | const { id } = useParams<{ id: string }>();
7 |
8 | const {
9 | data: product,
10 | isLoading,
11 | isError,
12 | } = useQuery({
13 | ...kupiProdaiApi.getProductQueryOptions(id || ""),
14 | enabled: !!id,
15 | });
16 |
17 | return { product: product || null, isLoading, isError };
18 | };
--------------------------------------------------------------------------------
/frontend/src/features/kupi-prodai/api/hooks/useUserProducts.ts:
--------------------------------------------------------------------------------
1 | import { useUser } from "@/hooks/use-user";
2 | import { kupiProdaiApi } from "@/features/kupi-prodai/api/kupiProdaiApi";
3 | import { useQuery } from "@tanstack/react-query";
4 |
5 | export function useUserProducts() {
6 | const { user } = useUser();
7 | const {
8 | data: myProducts,
9 | isError,
10 | isLoading,
11 | } = useQuery({
12 | ...kupiProdaiApi.getUserProductsQueryOptions(),
13 | enabled: !!user,
14 | staleTime: Infinity,
15 | gcTime: 1000 * 60 * 60 * 24,
16 | });
17 |
18 | return { myProducts, isError, isLoading };
19 | }
20 |
--------------------------------------------------------------------------------
/frontend/src/features/kupi-prodai/components/auth/AuthenticationGuard.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { useUser } from "@/hooks/use-user";
3 | import { LoginPromptCard } from "./LoginPromptCard";
4 | import { TelegramPromptCard } from "./TelegramPromptCard";
5 |
6 | interface AuthenticationGuardProps {
7 | children: React.ReactNode;
8 | }
9 |
10 | export function AuthenticationGuard({ children }: AuthenticationGuardProps) {
11 | const { user, login } = useUser();
12 | const isTelegramLinked = user?.tg_id || false;
13 |
14 | // Not logged in - show login prompt
15 | if (!user) {
16 | return
15 |
16 | Ready to Sell?
18 |
19 |
20 | Join our marketplace and start selling your items today
21 |
22 |
23 |
24 |
25 |
30 | Login to Start Selling
31 |
32 |
33 |
34 |
35 | );
36 | }
--------------------------------------------------------------------------------
/frontend/src/features/kupi-prodai/components/auth/TelegramPromptCard.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Card,CardDescription, CardHeader, CardTitle } from "@/components/atoms/card";
4 | import { MessageCircle } from "lucide-react";
5 |
6 |
7 | export function TelegramPromptCard() {
8 | return (
9 |
12 |
13 |
15 | Connect Telegram
16 |
17 |
18 |
19 |
20 | Link your Telegram account to enable secure communication with buyers.
21 | This helps buyers contact you directly and securely about your listings
22 |
23 |
24 |
25 |
26 | );
27 | }
--------------------------------------------------------------------------------
/frontend/src/features/kupi-prodai/components/main-page/SellSection.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { ProductCreateForm } from "@/features/kupi-prodai/components/product-create-form";
3 | import { useCreateProduct } from "@/features/kupi-prodai/api/hooks/useCreateProduct";
4 | import { useListingState } from "@/context/ListingContext";
5 | import { motion } from "framer-motion";
6 | import { FloatingElements } from "@/components/organisms/animations/FloatingElements";
7 | import { AuthenticationGuard } from "@/features/kupi-prodai/components/auth/AuthenticationGuard";
8 | import { containerVariants, itemVariants } from "@/utils/animationVariants";
9 |
10 | export function SellSection() {
11 | const { handleCreate } = useCreateProduct();
12 | const { uploadProgress } = useListingState();
13 |
14 |
15 |
16 | return (
17 |
25 | );
26 | }
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/frontend/src/features/kupi-prodai/components/main-page/my-listings/EmptyState.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Button } from '@/components/atoms/button';
3 | import { cn } from '@/utils/utils';
4 |
5 | interface EmptyStateProps {
6 | icon: React.ReactNode;
7 | title: string;
8 | description: string;
9 | buttonText?: string;
10 | onButtonClick?: () => void;
11 | className?: string;
12 | }
13 |
14 | export const EmptyState: React.FC = ({
15 | icon,
16 | title,
17 | description,
18 | buttonText,
19 | onButtonClick,
20 | className,
21 | }) => {
22 | return (
23 |
29 |
{icon}
30 |
{title}
31 |
{description}
32 | {buttonText && onButtonClick && (
33 |
{buttonText}
34 | )}
35 |
21 |
22 |
23 | You will be redirected to Telegram to chat with the seller about
24 | this item
25 |
26 |
27 |
{
30 | window.open(telegramLink, "_blank");
31 | onClose();
32 | }}
33 | >
34 |
37 |
39 | );
40 | }
--------------------------------------------------------------------------------
/frontend/src/features/kupi-prodai/components/state/product-empy-state.tsx:
--------------------------------------------------------------------------------
1 | export function ProductEmptyState() {
2 | return (
3 |
4 |
No products found.
5 |
6 |
{error}
7 |
12 | Try Again
13 |
14 |
8 | {Array.from({ length: count }).map((_, index) => (
9 |
10 |
12 |
13 |
14 |
15 |
16 |
19 |
21 |
22 | ))}
23 |
,
9 | ): Promise => {
10 | const requests: SignedUrlRequest[] = files.map((file, idx) => ({
11 | entity_type: options.entity_type,
12 | entity_id: entityId,
13 | media_format: options.mediaFormat,
14 | media_order: (options.startOrder || 0) + idx,
15 | mime_type: file.type,
16 | content_type: file.type,
17 | }));
18 |
19 | return await mediaApi.getSignedUrls(requests);
20 | };
--------------------------------------------------------------------------------
/frontend/src/features/media/utils/upload-media.ts:
--------------------------------------------------------------------------------
1 | export const uploadMedia = async (files: File[], signedUrls: any[]) => {
2 | return Promise.all(
3 | files.map((file: File, i: number) => {
4 | const {
5 | upload_url,
6 | filename,
7 | entity_type,
8 | entity_id,
9 | media_format,
10 | media_order,
11 | mime_type,
12 | } = signedUrls[i];
13 |
14 | const headers: Record = {
15 | "x-goog-meta-filename": filename,
16 | "x-goog-meta-media-table": entity_type,
17 | "x-goog-meta-entity-id": entity_id.toString(),
18 | "x-goog-meta-media-format": media_format,
19 | "x-goog-meta-media-order": media_order.toString(),
20 | "x-goog-meta-mime-type": mime_type,
21 | "Content-Type": mime_type,
22 | };
23 |
24 | return fetch(upload_url, {
25 | method: "PUT",
26 | headers,
27 | body: file,
28 | });
29 | }),
30 | );
31 | };
--------------------------------------------------------------------------------
/frontend/src/features/sgotinish/components/CreateAppealButton.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/atoms/button";
2 | import { FileText } from "lucide-react";
3 |
4 | interface CreateAppealButtonProps {
5 | onClick: () => void;
6 | }
7 |
8 | export function CreateAppealButton({ onClick }: CreateAppealButtonProps) {
9 | return (
10 |
14 | Create Appeal
16 | Create
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/frontend/src/features/sgotinish/utils/date.ts:
--------------------------------------------------------------------------------
1 | const ensureUtcString = (value: string): string => {
2 | // If the string already has timezone info (Z or +/-HH:MM), keep it
3 | if (/([zZ]|[+-]\d{2}:?\d{2})$/.test(value)) {
4 | return value;
5 | }
6 |
7 | // Otherwise assume backend sent UTC without suffix, so append Z
8 | return `${value}Z`;
9 | };
10 |
11 | export const toLocalDate = (value: Date | string): Date => {
12 | if (value instanceof Date) {
13 | return value;
14 | }
15 |
16 | return new Date(ensureUtcString(value));
17 | };
18 |
19 | export const toLocalISOString = (value: Date | string): string => {
20 | return toLocalDate(value).toLocaleString();
21 | };
22 |
23 |
24 |
--------------------------------------------------------------------------------
/frontend/src/features/sgotinish/utils/roleMapping.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Maps backend role names to display names
3 | */
4 | export const mapRoleToDisplayName = (role: string): string => {
5 | switch (role) {
6 | case "boss":
7 | return "head";
8 | case "capo":
9 | return "executive";
10 | case "soldier":
11 | return "member";
12 | default:
13 | return role;
14 | }
15 | };
16 |
--------------------------------------------------------------------------------
/frontend/src/hooks/useDebounce.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useState } from "react";
2 |
3 | export function useDebounce(value: T, delay: number): T {
4 | const [debouncedValue, setDebouncedValue] = useState(value);
5 | const isFirstRender = useRef(true);
6 |
7 | useEffect(() => {
8 | if (isFirstRender.current) {
9 | isFirstRender.current = false;
10 | setDebouncedValue(value);
11 | return;
12 | }
13 |
14 | const timer = window.setTimeout(() => {
15 | setDebouncedValue(value);
16 | }, delay);
17 |
18 | return () => {
19 | window.clearTimeout(timer);
20 | };
21 | }, [value, delay]);
22 |
23 | return debouncedValue;
24 | }
25 |
26 |
--------------------------------------------------------------------------------
/frontend/src/hooks/useFormAnimations.ts:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | export function useFormAnimations() {
4 | const [focusedField, setFocusedField] = useState(null);
5 |
6 | const handleFieldFocus = (fieldName: string) => {
7 | setFocusedField(fieldName);
8 | };
9 |
10 | const handleFieldBlur = () => {
11 | setFocusedField(null);
12 | };
13 |
14 | const isFieldFocused = (fieldName: string) => {
15 | return focusedField === fieldName;
16 | };
17 |
18 | return {
19 | focusedField,
20 | handleFieldFocus,
21 | handleFieldBlur,
22 | isFieldFocused,
23 | };
24 | }
--------------------------------------------------------------------------------
/frontend/src/hooks/useGlobalSecondTicker.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | // Module-level singleton ticker to avoid multiple intervals across components
4 | let subscribers = new Set<() => void>();
5 | let intervalId: number | null = null;
6 |
7 | function notifyAll(): void {
8 | for (const subscriber of subscribers) {
9 | subscriber();
10 | }
11 | }
12 |
13 | function ensureRunning(): void {
14 | if (intervalId !== null) return;
15 | intervalId = window.setInterval(() => {
16 | notifyAll();
17 | }, 1000);
18 | }
19 |
20 | function ensureStopped(): void {
21 | if (intervalId === null) return;
22 | if (subscribers.size > 0) return;
23 | window.clearInterval(intervalId);
24 | intervalId = null;
25 | }
26 |
27 | export function useGlobalSecondTicker(): number {
28 | const [nowMs, setNowMs] = useState(Date.now());
29 |
30 | useEffect(() => {
31 | const handleTick = () => setNowMs(Date.now());
32 | subscribers.add(handleTick);
33 |
34 | // Start ticker if not running
35 | ensureRunning();
36 |
37 | // Emit an immediate tick so consumers get up-to-date value right away
38 | handleTick();
39 |
40 | return () => {
41 | subscribers.delete(handleTick);
42 | ensureStopped();
43 | };
44 | }, []);
45 |
46 | return nowMs;
47 | }
48 |
--------------------------------------------------------------------------------
/frontend/src/pages/about.tsx:
--------------------------------------------------------------------------------
1 | import { AboutTemplate } from "@/components/templates/about-template";
2 |
3 | export default function AboutPage() {
4 | return
8 |
10 | );
11 | }
12 |
13 |
14 |
--------------------------------------------------------------------------------
/frontend/src/pages/profile.tsx:
--------------------------------------------------------------------------------
1 | export { default } from "@/features/campuscurrent/pages/profile";
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/frontend/src/types/images.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.svg" {
2 | const src: string;
3 | export default src;
4 | }
5 |
6 | declare module "*.png" {
7 | const src: string;
8 | export default src;
9 | }
10 |
11 | declare module "*.jpg" {
12 | const src: string;
13 | export default src;
14 | }
15 |
16 |
17 |
--------------------------------------------------------------------------------
/frontend/src/types/search.ts:
--------------------------------------------------------------------------------
1 | export interface PreSearchedItem {
2 | id: number | string;
3 | name: string;
4 | }
5 |
6 | export type SearchInputProps = {
7 | inputValue: string;
8 | setInputValue: (value: string) => void;
9 | preSearchedItems: PreSearchedItem[] | null;
10 | handleSearch: (inputValue: string) => void;
11 | setKeyword: (keyword: string) => void;
12 | // Optional, used in some contexts (e.g., products) to reset a secondary filter
13 | setSelectedCondition?: (condition: string) => void;
14 | placeholder?: string;
15 | };
16 |
17 |
18 |
--------------------------------------------------------------------------------
/frontend/src/utils/animationVariants.ts:
--------------------------------------------------------------------------------
1 | export const containerVariants = {
2 | hidden: { opacity: 0, y: 20 },
3 | visible: {
4 | opacity: 1,
5 | y: 0,
6 | transition: {
7 | type: "spring" as const,
8 | stiffness: 100,
9 | damping: 15,
10 | staggerChildren: 0.1
11 | }
12 | }
13 | };
14 |
15 | export const itemVariants = {
16 | hidden: { opacity: 0, y: 10 },
17 | visible: {
18 | opacity: 1,
19 | y: 0,
20 | transition: {
21 | type: "spring" as const,
22 | stiffness: 100,
23 | damping: 15
24 | }
25 | }
26 | };
27 |
28 | export const fieldVariants = {
29 | hidden: { opacity: 0, y: 10 },
30 | visible: {
31 | opacity: 1,
32 | y: 0,
33 | transition: {
34 | type: "spring" as const,
35 | stiffness: 100,
36 | damping: 15
37 | }
38 | }
39 | };
40 |
41 | export const formVariants = {
42 | hidden: { opacity: 0, y: 20 },
43 | visible: {
44 | opacity: 1,
45 | y: 0,
46 | transition: {
47 | type: "spring" as const,
48 | stiffness: 100,
49 | damping: 15,
50 | staggerChildren: 0.1
51 | }
52 | }
53 | };
54 |
55 | export const sectionVariants = {
56 | hidden: { opacity: 0, y: 10 },
57 | visible: {
58 | opacity: 1,
59 | y: 0,
60 | transition: {
61 | type: "spring" as const,
62 | stiffness: 100,
63 | damping: 15
64 | }
65 | }
66 | };
--------------------------------------------------------------------------------
/frontend/src/utils/image-utils.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Gets a placeholder image URL with cache busting
3 | * @param width Width of the image
4 | * @param height Height of the image
5 | * @returns A placeholder image URL
6 | */
7 | export function getPlaceholderImage(width = 200, height = 200): string {
8 | // Add a timestamp to prevent caching
9 | const timestamp = new Date().getTime();
10 |
11 | // Universal placeholder for all products
12 | return `https://placehold.co/${width}x${height}/EEE/31343C?text=No+Image&_t=${timestamp}`;
13 | }
14 |
--------------------------------------------------------------------------------
/frontend/src/utils/products-utils.ts:
--------------------------------------------------------------------------------
1 | import { Product } from "@/features/kupi-prodai/types";
2 |
3 | export const getConditionColor = (condition: Product["condition"]) => {
4 | switch (condition) {
5 | case "new":
6 | return "bg-green-500";
7 | case "used":
8 | return "bg-orange-500";
9 | default:
10 | return "bg-gray-500";
11 | }
12 | };
13 | export const getConditionDisplay = (condition: string) => {
14 | switch (condition) {
15 | case "new":
16 | return "New";
17 | case "like_new":
18 | return "Like New";
19 | case "used":
20 | return "Used";
21 | default:
22 | return condition;
23 | }
24 | };
25 | export const getPlaceholderImage = (product: Product) => {
26 | return product.media[0]?.url || "https://placehold.co/200x200?text=No+Image";
27 | };
28 | export const getCategoryDisplay = (category: string) => {
29 | return (
30 | category.charAt(0).toUpperCase() + category.slice(1).replace(/_/g, " ")
31 | );
32 | };
33 |
--------------------------------------------------------------------------------
/frontend/src/utils/query-client.ts:
--------------------------------------------------------------------------------
1 | import { QueryClient } from "@tanstack/react-query";
2 |
3 | export const queryClient = new QueryClient({
4 | defaultOptions: {
5 | queries: {
6 | staleTime: 1000 * 60 * 10,
7 | retry: false,
8 | refetchOnWindowFocus: false,
9 | },
10 | },
11 | });
12 |
--------------------------------------------------------------------------------
/frontend/src/utils/search-params.ts:
--------------------------------------------------------------------------------
1 | import { defaultPage } from "@/features/kupi-prodai/api/kupiProdaiApi";
2 |
3 | export const getSearchTextFromURL = (query: string) => {
4 | const params = new URLSearchParams(query);
5 | return params.get("text") || "";
6 | };
7 |
8 | export const getSearchParamFromURL = (
9 | query: string,
10 | key: string = "text",
11 | ): string => {
12 | const params = new URLSearchParams(query);
13 | return params.get(key) || "";
14 | };
15 |
16 | export const getSeachPageFromURL = (query: string) => {
17 | const params = new URLSearchParams(query);
18 | return Number(params.get("page")) || defaultPage;
19 | };
20 |
21 | export const getSearchCategoryFromURL = (query: string) => {
22 | const params = new URLSearchParams(query);
23 | return params.get("category") || "All";
24 | };
25 | export const getSearchConditionFromURL = (query: string) => {
26 | const params = new URLSearchParams(query);
27 | return params.get("condition") || "All Conditions";
28 | };
29 |
30 | export const getProductIdFromURL = (query: string) => {
31 | const params = new URLSearchParams(query);
32 | console.log(params.get("id"));
33 | };
34 |
--------------------------------------------------------------------------------
/frontend/src/utils/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
--------------------------------------------------------------------------------
/frontend/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// VPN Portal
6 |
40 |
VPN Portal
41 |
46 |