+
+
+
+
+
+ + Gysga belgi birikdirilmedi +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ {/*
+
*/}
+
+
+
+
+ );
+};
+
+export default FilterTable;
diff --git a/src/components/FitlerNumber.tsx b/src/components/FitlerNumber.tsx
new file mode 100644
index 0000000..5f86e91
--- /dev/null
+++ b/src/components/FitlerNumber.tsx
@@ -0,0 +1,64 @@
+import { useContext, useEffect } from 'react';
+import { SmsContext } from '@/context/SmsContext';
+import clsx from 'clsx';
+import { Queries } from '@/api/queries';
+import Loader from './Loader';
+
+export const FitlerNumber = () => {
+ const smsContext = useContext(SmsContext);
+ if (!smsContext) {
+ throw new Error('smsContext must be used within an AuthProvider');
+ }
+ const { activeNumber, setActiveNumber, smsData, tableIsLoading, setSmsData, setIsError } =
+ smsContext;
+
+ const getAdmins = () => {
+ try {
+ Queries.getAdmins().then((res) => {
+ setSmsData(res);
+ setActiveNumber(res.data[0].id);
+ if (!res.data) {
+ setIsError(true);
+ }
+ });
+ } catch (error) {
+ setIsError(true);
+ }
+ };
+
+ useEffect(() => {
+ getAdmins();
+ }, []);
+
+ if (!smsData) {
+ return (
+
+
+
+
+
+
+
+ {datee && smsTableData?.data.length !== 0 && (
+ setTimeDate(e.target.value)}
+ value={timeDate}
+ className="w-full outline-none px-6 py-3 shadow-tableShadow bg-[#F0F0FA] rounded-full"
+ />
+ )}
+
+ {filterActive ? (
+
+
+
+ Filtr
+
+ {sortData.map((item, i) => (
+ {
+ setActiveSort(item.id);
+ }}
+ className={clsx('leading-[115%] text-[14px] cursor-pointer', {
+ 'text-fillButtonAccentDefault font-[600]': activeSort === item.id,
+ 'text-textDarkt': activeSort !== item.id,
+ })}>
+ {item.title}
+
+ ))}
+
+
+
+ {calendar && (
+
+ setCalendar(false)}
+ className={clsx(
+ 'my-20 bg-[#F5F5FA] w-fit rounded-[8px] -translate-y-[50px] -translate-x-[60px] shadow-[0_2px_32px_rgba(0,0,0,0.3)] transition-all',
+ )}
+ />
+
+ )}
+
+
+ setCalendar((prev) => !prev)}
+ className={clsx(
+ 'leading-[115%] text-[14px] text-textDarkt cursor-pointer w-fit ',
+ {},
+ )}>
+ Kalendar
+
+
+
+
+ ) : null}
+ Filteri aýyr
+
+
+
+ setSearchValue(e.target.value)}
+ value={searchValue}
+ className="w-full bg-transparent outline-none"
+ />
+
+
+ setSearchFecth(searchValue)}
+ className="bg-fillButtonAccentDefault rounded-[0_9999px_9999px_0] px-4 py-[12px] cursor-pointer">
+ 
+
+
+
+
+ );
+ }
+
+ return (
+
+
+ );
+};
diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx
new file mode 100644
index 0000000..dbddb79
--- /dev/null
+++ b/src/components/Loader.tsx
@@ -0,0 +1,15 @@
+import { CSSProperties } from 'react';
+
+interface IProps {
+ height?: CSSProperties['height'];
+}
+
+const Loader = ({ height = 'auto' }: IProps) => {
+ return (
+
+ Gysga belgi boýunça filtr
+
+
+
+ {smsData?.data.map((item) => (
+
+ setActiveNumber(item.id)}>
+ {item.login}
+
+ ))}
+
+ 
+
+ );
+};
+
+export default Loader;
diff --git a/src/components/ProtectedRoute.tsx b/src/components/ProtectedRoute.tsx
new file mode 100644
index 0000000..e0fa4bb
--- /dev/null
+++ b/src/components/ProtectedRoute.tsx
@@ -0,0 +1,34 @@
+import { ReactNode, useEffect, useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { AuthContext } from '@/context/AuthContext';
+
+interface ProtectedRouteProps {
+ children: ReactNode;
+}
+
+const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
+ const authContext = useContext(AuthContext);
+ const navigate = useNavigate();
+
+ if (!authContext) {
+ throw new Error('AuthContext must be used within an AuthProvider');
+ }
+
+ const { user } = authContext;
+
+ useEffect(() => {
+ if (!user) {
+ navigate('/');
+ console.log('first');
+ }
+ }, [user, navigate]);
+
+ if (!user) {
+ return null;
+ }
+
+ return <>{children};
+};
+
+export default ProtectedRoute;
diff --git a/src/components/SmsTable.tsx b/src/components/SmsTable.tsx
new file mode 100644
index 0000000..9b24f4c
--- /dev/null
+++ b/src/components/SmsTable.tsx
@@ -0,0 +1,87 @@
+import React, { useContext, useEffect } from 'react';
+
+import { Queries } from '@/api/queries';
+import { SmsContext } from '@/context/SmsContext';
+import SmsPagination from './smsTable/SmsPagination';
+import SmsTableBody from './smsTable/SmsTableBody';
+import SmsTableHead from './smsTable/SmsTableHead';
+import Loader from './Loader';
+
+const SmsTable = () => {
+ const smsContext = useContext(SmsContext);
+ if (!smsContext) {
+ throw new Error('smsContext must be used within an AuthProvider');
+ }
+ const {
+ tableIsLoading,
+ smsData,
+ smsTableData,
+ setSmsTableData,
+ setTableIsLoading,
+ setCurrentPage,
+ setIsError,
+ currentPage,
+ activeNumber,
+ searchFecth,
+ activeSort,
+ dateValue,
+ timeDate,
+ } = smsContext;
+
+ const getMessages = () => {
+ if (smsData && activeNumber) {
+ setTableIsLoading(true);
+
+ try {
+ Queries.getMessages(activeNumber, currentPage, dateValue, activeSort, searchFecth).then(
+ (res) => {
+ setSmsTableData(res);
+ setTableIsLoading(false);
+
+ if (!res.data) {
+ setTableIsLoading(true);
+
+ setIsError(true);
+ }
+ },
+ );
+ } catch (error) {
+ setTableIsLoading(true);
+
+ setIsError(true);
+ }
+ }
+ };
+
+ useEffect(() => {
+ getMessages();
+ }, [smsData, currentPage, activeNumber, searchFecth, activeSort, dateValue]);
+
+ useEffect(() => {
+ setCurrentPage(1);
+ }, [activeNumber]);
+
+ if (tableIsLoading) {
+ return (
+
+
+
+ );
+ }
+
+ return smsTableData?.data.length ? (
+
+
+ ) : (
+
+
+ {smsTableData.meta.last_page > 1 ? + Нет результатов! +
+ ); +}; + +export default SmsTable; diff --git a/src/components/smsTable/SmsPagination.tsx b/src/components/smsTable/SmsPagination.tsx new file mode 100644 index 0000000..5181c05 --- /dev/null +++ b/src/components/smsTable/SmsPagination.tsx @@ -0,0 +1,182 @@ +// Working pagination ========================================================================================================= + +// 'use client'; +// import Loader from '@/components/Loader'; +// import { SmsContext } from '@/context/SmsContext'; +// import clsx from 'clsx'; +// import React, { useContext } from 'react'; + +// const SmsPagination = () => { +// const smsContext = useContext(SmsContext); +// if (!smsContext) { +// throw new Error('smsContext must be used within an AuthProvider'); +// } +// const { setCurrentPage, smsTableData } = smsContext; + +// if (!smsTableData) { +// return ( +//
+//
+// );
+// }
+
+// return (
+//
+//
+// );
+// };
+
+// export default SmsPagination;
+
+// Working pagination =================================================================================================
+
+import Loader from '@/components/Loader';
+import { SmsContext } from '@/context/SmsContext';
+import clsx from 'clsx';
+import React, { useContext } from 'react';
+
+const SmsPagination = () => {
+ const smsContext = useContext(SmsContext);
+ if (!smsContext) {
+ throw new Error('smsContext must be used within an AuthProvider');
+ }
+ const { setCurrentPage, smsTableData } = smsContext;
+
+ if (!smsTableData) {
+ return (
+ Sahypalar
+//
+//
+//
+// {smsTableData?.meta.current_page}/{smsTableData?.meta.last_page}
+//
+//
+//
+//
+
+ );
+ }
+
+ const { current_page, last_page } = smsTableData.meta;
+
+ const generatePageNumbers = () => {
+ const pages = [];
+ if (last_page <= 7) {
+ for (let i = 1; i <= last_page; i++) {
+ pages.push(i);
+ }
+ } else {
+ pages.push(1);
+ if (current_page > 4) pages.push('...');
+ const startPage = Math.max(2, current_page - 2);
+ const endPage = Math.min(last_page - 1, current_page + 2);
+ for (let i = startPage; i <= endPage; i++) {
+ pages.push(i);
+ }
+ if (current_page < last_page - 3) pages.push('...');
+ pages.push(last_page);
+ }
+ return pages;
+ };
+
+ const pages = generatePageNumbers();
+
+ return (
+
+
+ );
+};
+
+export default SmsPagination;
diff --git a/src/components/smsTable/SmsTable.tsx b/src/components/smsTable/SmsTable.tsx
new file mode 100644
index 0000000..e884041
--- /dev/null
+++ b/src/components/smsTable/SmsTable.tsx
@@ -0,0 +1,86 @@
+import React, { useContext, useEffect } from 'react';
+import SmsTableHead from './SmsTableHead';
+import SmsTableBody from './SmsTableBody';
+import { SmsContext } from '@/context/SmsContext';
+import Loader from '@/components/Loader';
+import SmsPagination from './SmsPagination';
+import { Queries } from '@/api/queries';
+
+const SmsTable = () => {
+ const smsContext = useContext(SmsContext);
+ if (!smsContext) {
+ throw new Error('smsContext must be used within an AuthProvider');
+ }
+ const {
+ tableIsLoading,
+ smsData,
+ smsTableData,
+ setSmsTableData,
+ setTableIsLoading,
+ setCurrentPage,
+ setIsError,
+ currentPage,
+ activeNumber,
+ searchFecth,
+ activeSort,
+ dateValue,
+ timeDate,
+ } = smsContext;
+
+ const getMessages = () => {
+ if (smsData && activeNumber) {
+ setTableIsLoading(true);
+
+ try {
+ Queries.getMessages(activeNumber, currentPage, dateValue, activeSort, searchFecth).then(
+ (res) => {
+ setSmsTableData(res);
+ setTableIsLoading(false);
+
+ if (!res.data) {
+ setTableIsLoading(true);
+
+ setIsError(true);
+ }
+ },
+ );
+ } catch (error) {
+ setTableIsLoading(true);
+
+ setIsError(true);
+ }
+ }
+ };
+
+ useEffect(() => {
+ getMessages();
+ }, [smsData, currentPage, activeNumber, searchFecth, activeSort, dateValue]);
+
+ useEffect(() => {
+ setCurrentPage(1);
+ }, [activeNumber]);
+
+ if (tableIsLoading) {
+ return (
+ Sahypalar
+
+
+ {pages.map((page, index) => (
+ typeof page === 'number' && setCurrentPage(page)}>
+ {page}
+
+ ))}
+
+
+
+
+ );
+ }
+
+ return smsTableData?.data.length ? (
+
+
+ ) : (
+
+
+ {smsTableData.meta.last_page > 1 ? + Нет результатов! +
+ ); +}; + +export default SmsTable; diff --git a/src/components/smsTable/SmsTableBody.tsx b/src/components/smsTable/SmsTableBody.tsx new file mode 100644 index 0000000..18df143 --- /dev/null +++ b/src/components/smsTable/SmsTableBody.tsx @@ -0,0 +1,34 @@ +import React, { useContext, useEffect, useState } from 'react'; +import SmsTableRow from './SmsTableRow'; + +import { SmsContext } from '@/context/SmsContext'; + +const SmsTableBody = () => { + const smsContext = useContext(SmsContext); + if (!smsContext) { + throw new Error('smsContext must be used within an AuthProvider'); + } + const { smsTableData, currentPage, timeDate } = smsContext; + + console.log(smsTableData?.data[0].dt.slice(11, 15)); + + return ( +
+
+ );
+};
+
+export default SmsTableBody;
diff --git a/src/components/smsTable/SmsTableHead.tsx b/src/components/smsTable/SmsTableHead.tsx
new file mode 100644
index 0000000..7574826
--- /dev/null
+++ b/src/components/smsTable/SmsTableHead.tsx
@@ -0,0 +1,20 @@
+const SmsTableHead = () => {
+ return (
+
+ {smsTableData?.data
+ .filter((item) => (timeDate ? item.dt.slice(11, 15).includes(timeDate) : item))
+ .map((row, index) => (
+
+
+
+ );
+};
+
+export default SmsTableHead;
diff --git a/src/components/smsTable/SmsTableRow.tsx b/src/components/smsTable/SmsTableRow.tsx
new file mode 100644
index 0000000..d3e8601
--- /dev/null
+++ b/src/components/smsTable/SmsTableRow.tsx
@@ -0,0 +1,47 @@
+import clsx from 'clsx';
+
+interface IProps {
+ index: number;
+ number: string;
+ sms: string;
+ date: string;
+}
+
+const SmsTableRow = ({ index, number, sms, date }: IProps) => {
+ const formateDate = (date: string) => {
+ const parsedDate = date.split(' ')[0].split('-').reverse().join('.');
+ const parsedTime = date.split(' ')[1];
+ return {
+ parsedDate,
+ parsedTime,
+ };
+ };
+
+ const { parsedDate, parsedTime } = formateDate(date);
+
+ return (
+
+ ID
+
+
+ Telefon belgi
+
+
+ SMS
+
+
+ Wagty
+
+
+
+ );
+};
+
+export default SmsTableRow;
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 0000000..36496a2
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+ {
+ variants: {
+ variant: {
+ default: "bg-primary text-primary-foreground hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+ outline:
+ "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-10 px-4 py-2",
+ sm: "h-9 rounded-md px-3",
+ lg: "h-11 rounded-md px-8",
+ icon: "h-10 w-10",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes
+ {index}
+
+
+ +{number}
+
+
+
+ {sms}
+
+
+
+ {parsedDate}ý.
+ {parsedTime}
+
+