87 | >(({ className, ...props }, ref) => (
88 | [role=checkbox]]:translate-y-[2px]',
92 | className
93 | )}
94 | {...props}
95 | />
96 | ));
97 | TableCell.displayName = 'TableCell';
98 |
99 | const TableCaption = React.forwardRef<
100 | HTMLTableCaptionElement,
101 | React.HTMLAttributes
102 | >(({ className, ...props }, ref) => (
103 | ,
10 | React.ComponentPropsWithoutRef
11 | >(({ className, ...props }, ref) => (
12 | ,
25 | React.ComponentPropsWithoutRef
26 | >(({ className, ...props }, ref) => (
27 | ,
40 | React.ComponentPropsWithoutRef
41 | >(({ className, ...props }, ref) => (
42 | {}
7 |
8 | const Textarea = React.forwardRef(
9 | ({ className, ...props }, ref) => {
10 | return (
11 |
19 | );
20 | }
21 | );
22 | Textarea.displayName = 'Textarea';
23 |
24 | export { Textarea };
25 |
--------------------------------------------------------------------------------
/src/components/ui/toast.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Cross2Icon } from '@radix-ui/react-icons';
3 | import * as ToastPrimitives from '@radix-ui/react-toast';
4 | import { cva, type VariantProps } from 'class-variance-authority';
5 |
6 | import { cn } from '@/lib/utils';
7 |
8 | const ToastProvider = ToastPrimitives.Provider;
9 |
10 | const ToastViewport = React.forwardRef<
11 | React.ElementRef,
12 | React.ComponentPropsWithoutRef
13 | >(({ className, ...props }, ref) => (
14 | ,
43 | React.ComponentPropsWithoutRef &
44 | VariantProps
45 | >(({ className, variant, ...props }, ref) => {
46 | return (
47 | ,
58 | React.ComponentPropsWithoutRef
59 | >(({ className, ...props }, ref) => (
60 | ,
73 | React.ComponentPropsWithoutRef
74 | >(({ className, ...props }, ref) => (
75 |
84 |
86 | ));
87 | ToastClose.displayName = ToastPrimitives.Close.displayName;
88 |
89 | const ToastTitle = React.forwardRef<
90 | React.ElementRef,
91 | React.ComponentPropsWithoutRef
92 | >(({ className, ...props }, ref) => (
93 | ,
103 | React.ComponentPropsWithoutRef
104 | >(({ className, ...props }, ref) => (
105 | ;
114 |
115 | type ToastActionElement = React.ReactElement;
116 |
117 | export {
118 | type ToastProps,
119 | type ToastActionElement,
120 | ToastProvider,
121 | ToastViewport,
122 | Toast,
123 | ToastTitle,
124 | ToastDescription,
125 | ToastClose,
126 | ToastAction
127 | };
128 |
--------------------------------------------------------------------------------
/src/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Toast,
3 | ToastClose,
4 | ToastDescription,
5 | ToastProvider,
6 | ToastTitle,
7 | ToastViewport
8 | } from '@/components/ui/toast';
9 | import { useToast } from '@/components/ui/use-toast';
10 |
11 | export function Toaster() {
12 | const { toasts } = useToast();
13 |
14 | return (
15 |
16 | {toasts.map(function ({ id, title, description, action, ...props }) {
17 | return (
18 |
19 |
20 | {title && {title} }
21 | {description && (
22 | {description}
23 | )}
24 |
25 | {action}
26 |
28 | );
29 | })}
30 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/ui/toggle-group.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
3 | import { VariantProps } from 'class-variance-authority';
4 |
5 | import { cn } from '@/lib/utils';
6 | import { toggleVariants } from '@/components/ui/toggle';
7 |
8 | const ToggleGroupContext = React.createContext<
9 | VariantProps
10 | >({
11 | size: 'default',
12 | variant: 'default'
13 | });
14 |
15 | const ToggleGroup = React.forwardRef<
16 | React.ElementRef,
17 | React.ComponentPropsWithoutRef &
18 | VariantProps
19 | >(({ className, variant, size, children, ...props }, ref) => (
20 |
25 |
26 | {children}
27 |
28 |
29 | ));
30 |
31 | ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
32 |
33 | const ToggleGroupItem = React.forwardRef<
34 | React.ElementRef,
35 | React.ComponentPropsWithoutRef &
36 | VariantProps
37 | >(({ className, children, variant, size, ...props }, ref) => {
38 | const context = React.useContext(ToggleGroupContext);
39 |
40 | return (
41 |
52 | {children}
53 |
54 | );
55 | });
56 |
57 | ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
58 |
59 | export { ToggleGroup, ToggleGroupItem };
60 |
--------------------------------------------------------------------------------
/src/components/ui/toggle.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import * as TogglePrimitive from '@radix-ui/react-toggle';
3 | import { cva, type VariantProps } from 'class-variance-authority';
4 |
5 | import { cn } from '@/lib/utils';
6 |
7 | const toggleVariants = cva(
8 | 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
9 | {
10 | variants: {
11 | variant: {
12 | default: 'bg-transparent',
13 | outline:
14 | 'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground'
15 | },
16 | size: {
17 | default: 'h-9 px-3',
18 | sm: 'h-8 px-2',
19 | lg: 'h-10 px-3'
20 | }
21 | },
22 | defaultVariants: {
23 | variant: 'default',
24 | size: 'default'
25 | }
26 | }
27 | );
28 |
29 | const Toggle = React.forwardRef<
30 | React.ElementRef,
31 | React.ComponentPropsWithoutRef &
32 | VariantProps
33 | >(({ className, variant, size, ...props }, ref) => (
34 | ,
14 | React.ComponentPropsWithoutRef
15 | >(({ className, sideOffset = 4, ...props }, ref) => (
16 | ;
40 | }
41 | | {
42 | type: ActionType['DISMISS_TOAST'];
43 | toastId?: ToasterToast['id'];
44 | }
45 | | {
46 | type: ActionType['REMOVE_TOAST'];
47 | toastId?: ToasterToast['id'];
48 | };
49 |
50 | interface State {
51 | toasts: ToasterToast[];
52 | }
53 |
54 | const toastTimeouts = new Map>();
55 |
56 | const addToRemoveQueue = (toastId: string) => {
57 | if (toastTimeouts.has(toastId)) {
58 | return;
59 | }
60 |
61 | const timeout = setTimeout(() => {
62 | toastTimeouts.delete(toastId);
63 | dispatch({
64 | type: 'REMOVE_TOAST',
65 | toastId: toastId
66 | });
67 | }, TOAST_REMOVE_DELAY);
68 |
69 | toastTimeouts.set(toastId, timeout);
70 | };
71 |
72 | export const reducer = (state: State, action: Action): State => {
73 | switch (action.type) {
74 | case 'ADD_TOAST':
75 | return {
76 | ...state,
77 | toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
78 | };
79 |
80 | case 'UPDATE_TOAST':
81 | return {
82 | ...state,
83 | toasts: state.toasts.map((t) =>
84 | t.id === action.toast.id ? { ...t, ...action.toast } : t
85 | )
86 | };
87 |
88 | case 'DISMISS_TOAST': {
89 | const { toastId } = action;
90 |
91 | // ! Side effects ! - This could be extracted into a dismissToast() action,
92 | // but I'll keep it here for simplicity
93 | if (toastId) {
94 | addToRemoveQueue(toastId);
95 | } else {
96 | state.toasts.forEach((toast) => {
97 | addToRemoveQueue(toast.id);
98 | });
99 | }
100 |
101 | return {
102 | ...state,
103 | toasts: state.toasts.map((t) =>
104 | t.id === toastId || toastId === undefined
105 | ? {
106 | ...t,
107 | open: false
108 | }
109 | : t
110 | )
111 | };
112 | }
113 | case 'REMOVE_TOAST':
114 | if (action.toastId === undefined) {
115 | return {
116 | ...state,
117 | toasts: []
118 | };
119 | }
120 | return {
121 | ...state,
122 | toasts: state.toasts.filter((t) => t.id !== action.toastId)
123 | };
124 | }
125 | };
126 |
127 | const listeners: Array<(state: State) => void> = [];
128 |
129 | let memoryState: State = { toasts: [] };
130 |
131 | function dispatch(action: Action) {
132 | memoryState = reducer(memoryState, action);
133 | listeners.forEach((listener) => {
134 | listener(memoryState);
135 | });
136 | }
137 |
138 | type Toast = Omit;
139 |
140 | function toast({ ...props }: Toast) {
141 | const id = genId();
142 |
143 | const update = (props: ToasterToast) =>
144 | dispatch({
145 | type: 'UPDATE_TOAST',
146 | toast: { ...props, id }
147 | });
148 | const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id });
149 |
150 | dispatch({
151 | type: 'ADD_TOAST',
152 | toast: {
153 | ...props,
154 | id,
155 | open: true,
156 | onOpenChange: (open) => {
157 | if (!open) dismiss();
158 | }
159 | }
160 | });
161 |
162 | return {
163 | id: id,
164 | dismiss,
165 | update
166 | };
167 | }
168 |
169 | function useToast() {
170 | const [state, setState] = React.useState(memoryState);
171 |
172 | React.useEffect(() => {
173 | listeners.push(setState);
174 | return () => {
175 | const index = listeners.indexOf(setState);
176 | if (index > -1) {
177 | listeners.splice(index, 1);
178 | }
179 | };
180 | }, [state]);
181 |
182 | return {
183 | ...state,
184 | toast,
185 | dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId })
186 | };
187 | }
188 |
189 | export { useToast, toast };
190 |
--------------------------------------------------------------------------------
/src/constants/data.ts:
--------------------------------------------------------------------------------
1 | import { NavItem } from '@/types';
2 |
3 | export const navItems: NavItem[] = [
4 | {
5 | title: 'Dashboard',
6 | href: '/',
7 | icon: 'dashboard',
8 | label: 'Dashboard'
9 | },
10 | {
11 | title: 'Students',
12 | href: '/student',
13 | icon: 'user',
14 | label: 'Student'
15 | },
16 | {
17 | title: 'Login',
18 | href: '/login',
19 | icon: 'login',
20 | label: 'Login'
21 | }
22 | ];
23 |
24 | export const users = [
25 | {
26 | id: 1,
27 | name: 'Candice Schiner',
28 | company: 'Dell',
29 | role: 'Frontend Developer',
30 | verified: false,
31 | status: 'Active'
32 | },
33 | {
34 | id: 2,
35 | name: 'John Doe',
36 | company: 'TechCorp',
37 | role: 'Backend Developer',
38 | verified: true,
39 | status: 'Active'
40 | },
41 | {
42 | id: 3,
43 | name: 'Alice Johnson',
44 | company: 'WebTech',
45 | role: 'UI Designer',
46 | verified: true,
47 | status: 'Active'
48 | },
49 | {
50 | id: 4,
51 | name: 'David Smith',
52 | company: 'Innovate Inc.',
53 | role: 'Fullstack Developer',
54 | verified: false,
55 | status: 'Inactive'
56 | },
57 | {
58 | id: 5,
59 | name: 'Emma Wilson',
60 | company: 'TechGuru',
61 | role: 'Product Manager',
62 | verified: true,
63 | status: 'Active'
64 | },
65 | {
66 | id: 6,
67 | name: 'James Brown',
68 | company: 'CodeGenius',
69 | role: 'QA Engineer',
70 | verified: false,
71 | status: 'Active'
72 | },
73 | {
74 | id: 7,
75 | name: 'Laura White',
76 | company: 'SoftWorks',
77 | role: 'UX Designer',
78 | verified: true,
79 | status: 'Active'
80 | },
81 | {
82 | id: 8,
83 | name: 'Michael Lee',
84 | company: 'DevCraft',
85 | role: 'DevOps Engineer',
86 | verified: false,
87 | status: 'Active'
88 | },
89 | {
90 | id: 9,
91 | name: 'Olivia Green',
92 | company: 'WebSolutions',
93 | role: 'Frontend Developer',
94 | verified: true,
95 | status: 'Active'
96 | },
97 | {
98 | id: 10,
99 | name: 'Robert Taylor',
100 | company: 'DataTech',
101 | role: 'Data Analyst',
102 | verified: false,
103 | status: 'Active'
104 | }
105 | ];
106 |
107 | export const dashboardCard = [
108 | {
109 | date: 'Today',
110 | total: 2000,
111 | role: 'Students',
112 | color: 'bg-[#EC4D61] bg-opacity-40'
113 | },
114 | {
115 | date: 'Today',
116 | total: 2000,
117 | role: 'Teachers',
118 | color: 'bg-[#FFEB95] bg-opacity-100'
119 | },
120 | {
121 | date: 'Today',
122 | total: 2000,
123 | role: 'Parents',
124 | color: 'bg-[#84BD47] bg-opacity-30'
125 | },
126 | {
127 | date: 'Today',
128 | total: 2000,
129 | role: 'Schools',
130 | color: 'bg-[#D289FF] bg-opacity-30'
131 | }
132 | ];
133 |
134 | export type Employee = {
135 | id: number;
136 | first_name: string;
137 | last_name: string;
138 | email: string;
139 | phone: string;
140 | gender: string;
141 | date_of_birth: string; // Consider using a proper date type if possible
142 | street: string;
143 | city: string;
144 | state: string;
145 | country: string;
146 | zipcode: string;
147 | longitude?: number; // Optional field
148 | latitude?: number; // Optional field
149 | job: string;
150 | profile_picture?: string | null; // Profile picture can be a string (URL) or null (if no picture)
151 | };
152 |
--------------------------------------------------------------------------------
/src/hooks/use-sidebar.tsx:
--------------------------------------------------------------------------------
1 | import React, { createContext, useContext, useState } from 'react';
2 |
3 | const SidebarContext = createContext<{
4 | isMinimized: boolean;
5 | toggle: () => void;
6 | }>({
7 | isMinimized: false,
8 | toggle: () => {}
9 | });
10 |
11 | export const useSidebar = () => useContext(SidebarContext);
12 |
13 | export const SidebarProvider: React.FC<{ children: React.ReactNode }> = ({
14 | children
15 | }) => {
16 | const [isMinimized, setIsMinimized] = useState(false);
17 |
18 | const toggle = () => {
19 | setIsMinimized(!isMinimized);
20 | };
21 |
22 | return (
23 |
24 | {children}
25 |
26 | );
27 | };
28 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
2 | @tailwind base;
3 | @tailwind components;
4 | @tailwind utilities;
5 |
6 | @layer base {
7 | :root {
8 | --background: 0 0% 100%;
9 | --foreground: 222.2 84% 4.9%;
10 | --card: 0 0% 100%;
11 | --card-foreground: 222.2 84% 4.9%;
12 | --popover: 0 0% 100%;
13 | --popover-foreground: 222.2 84% 4.9%;
14 | --primary: 222.2 47.4% 11.2%;
15 | --primary-foreground: 210 40% 98%;
16 | --secondary: 210 40% 96.1%;
17 | --secondary-foreground: 222.2 47.4% 11.2%;
18 | --muted: 210 40% 96.1%;
19 | --muted-foreground: 215.4 16.3% 46.9%;
20 | --accent: 210 40% 96.1%;
21 | --accent-foreground: 222.2 47.4% 11.2%;
22 | --destructive: 0 84.2% 60.2%;
23 | --destructive-foreground: 210 40% 98%;
24 | --border: 214.3 31.8% 91.4%;
25 | --input: 214.3 31.8% 91.4%;
26 | --ring: 222.2 84% 4.9%;
27 | --radius: 0.5rem;
28 | --chart-1: 12 76% 61%;
29 | --chart-2: 173 58% 39%;
30 | --chart-3: 197 37% 24%;
31 | --chart-4: 43 74% 66%;
32 | --chart-5: 27 87% 67%;
33 | }
34 |
35 | .dark {
36 | --background: 222.2 84% 4.9%;
37 | --foreground: 210 40% 98%;
38 | --card: 222.2 84% 4.9%;
39 | --card-foreground: 210 40% 98%;
40 | --popover: 222.2 84% 4.9%;
41 | --popover-foreground: 210 40% 98%;
42 | --primary: 210 40% 98%;
43 | --primary-foreground: 222.2 47.4% 11.2%;
44 | --secondary: 217.2 32.6% 17.5%;
45 | --secondary-foreground: 210 40% 98%;
46 | --muted: 217.2 32.6% 17.5%;
47 | --muted-foreground: 215 20.2% 65.1%;
48 | --accent: 217.2 32.6% 17.5%;
49 | --accent-foreground: 210 40% 98%;
50 | --destructive: 0 62.8% 30.6%;
51 | --destructive-foreground: 210 40% 98%;
52 | --border: 217.2 32.6% 17.5%;
53 | --input: 217.2 32.6% 17.5%;
54 | --ring: 212.7 26.8% 83.9;
55 | --chart-1: 220 70% 50%;
56 | --chart-2: 160 60% 45%;
57 | --chart-3: 30 80% 55%;
58 | --chart-4: 280 65% 60%;
59 | --chart-5: 340 75% 55%;
60 | }
61 | }
62 |
63 | @layer base {
64 | * {
65 | @apply border-border;
66 | }
67 | body {
68 | @apply bg-background text-foreground;
69 | }
70 | }
71 |
72 | @layer base {
73 | html {
74 | font-family: 'Montserrat', sans-serif;
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/src/lib/api.ts:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | // ---------------------------- Student API ------------------------------------------------- //
3 | // export async function resendEmail(email: string) {
4 | // try {
5 | // const res = await axios.post("/auth/register/resend-email/", { email });
6 | // return res.data;
7 | // } catch (error) {
8 | // console.log(error);
9 | // return error;
10 | // }
11 | // }
12 |
13 | export async function getStudents(
14 | offset: number,
15 | pageLimit: number,
16 | country: string
17 | ) {
18 | try {
19 | const res = await axios.get(
20 | `https://api.slingacademy.com/v1/sample-data/users?offset=${offset}&limit=${pageLimit}` +
21 | (country ? `&search=${country}` : '')
22 | );
23 | return res.data;
24 | } catch (error) {
25 | console.log(error);
26 | return error;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/lib/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 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import App from './App.tsx';
4 | import './index.css';
5 |
6 | ReactDOM.createRoot(document.getElementById('root')!).render(
7 |
8 |
10 | );
11 |
--------------------------------------------------------------------------------
/src/pages/auth/signin/components/user-auth-form.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from '@/components/ui/button';
2 | import {
3 | Form,
4 | FormControl,
5 | FormField,
6 | FormItem,
7 | FormLabel,
8 | FormMessage
9 | } from '@/components/ui/form';
10 | import { Input } from '@/components/ui/input';
11 | import { useRouter } from '@/routes/hooks';
12 | import { zodResolver } from '@hookform/resolvers/zod';
13 | import { useState } from 'react';
14 | import { useForm } from 'react-hook-form';
15 | import * as z from 'zod';
16 |
17 | const formSchema = z.object({
18 | email: z.string().email({ message: 'Enter a valid email address' })
19 | });
20 |
21 | type UserFormValue = z.infer;
22 |
23 | export default function UserAuthForm() {
24 | const router = useRouter();
25 | const [loading] = useState(false);
26 | const defaultValues = {
27 | email: 'demo@gmail.com'
28 | };
29 | const form = useForm({
30 | resolver: zodResolver(formSchema),
31 | defaultValues
32 | });
33 |
34 | const onSubmit = async (data: UserFormValue) => {
35 | console.log('data', data);
36 | router.push('/');
37 | };
38 |
39 | return (
40 | <>
41 |
69 |
70 |
71 |
72 |
74 |
75 |
76 | Or continue with
77 |
78 |
79 |
9 |
16 | Login
17 |
18 |
19 |
20 |
21 |
31 |
33 | Logo
34 |
35 |
36 |
37 |
38 | “This library has saved me countless hours of work and
39 | helped me deliver stunning designs to my clients faster than ever
40 | before.”
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | Create an account
51 |
52 |
53 | Enter your email below to create your account
54 |
55 |
56 |
57 |
58 | By clicking continue, you agree to our{' '}
59 |
74 |
75 |
76 |
57 |
58 | `$${value}`}
71 | />
72 |
74 |
75 | );
76 | }
77 |
--------------------------------------------------------------------------------
/src/pages/dashboard/components/recent-sales.tsx:
--------------------------------------------------------------------------------
1 | import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
2 |
3 | export default function RecentSales() {
4 | return (
5 |
6 |
7 |
8 | OM
10 |
11 |
12 |
Olivia Martin
13 |
14 | olivia.martin@email.com
15 |
16 |
17 |
+$1,999.00
18 |
19 |
20 |
21 | JL
23 |
24 |
25 |
Jackson Lee
26 |
jackson.lee@email.com
27 |
28 |
+$39.00
29 |
30 |
31 |
32 | IN
34 |
35 |
36 |
Isabella Nguyen
37 |
38 | isabella.nguyen@email.com
39 |
40 |
41 |
+$299.00
42 |
43 |
44 |
45 | WK
47 |
48 |
49 |
William Kim
50 |
will@email.com
51 |
52 |
+$99.00
53 |
54 |
55 |
56 | SD
58 |
59 |
60 |
Sofia Davis
61 |
sofia.davis@email.com
62 |
63 |
+$39.00
64 |
65 |
>({
33 | resolver: zodResolver(formSchema),
34 | defaultValues: {
35 | name: ''
36 | }
37 | });
38 |
39 | const {
40 | formState: { errors, isSubmitting }
41 | } = form;
42 |
43 | console.log('formState', errors);
44 |
45 | const onSubmit = async (data: z.infer) => {
46 | console.log('onSubmit', data);
47 | };
48 |
49 | return (
50 |
51 |
89 |
90 |
91 | );
92 | }
93 |
--------------------------------------------------------------------------------
/src/pages/not-found/index.tsx:
--------------------------------------------------------------------------------
1 | import { useRouter } from '@/routes/hooks';
2 | import { Button } from '@/components/ui/button';
3 |
4 | export default function NotFound() {
5 | const router = useRouter();
6 |
7 | return (
8 |
9 |
10 | 404
11 |
12 |
13 | Something's missing
14 |
15 |
16 | Sorry, the page you are looking for doesn't exist or has been
17 | moved.
18 |
19 |
20 | router.back()} variant="default" size="lg">
21 | Go back
22 |
23 | router.push('/')} variant="ghost" size="lg">
24 | Back to Home
25 |
26 |
27 |
Loading!!! ;
25 | }
26 | return (
27 |
28 |
29 |
30 |
31 |
32 |
35 | router.back()}>
36 |
39 |
40 |
41 |
42 |
43 |
44 |
45 | Profile
46 | Active
47 |
48 |
49 |
54 |
55 |
56 |
57 | About Me
58 |
59 |
60 | Hello! I'm Srikkath, your dedicated admin at Kutubi, ensuring a
61 | seamless and enriching experience for teachers, students, and
62 | parents. Feel free to reach out for any assistance or feedback
63 |
64 |
65 |
66 |
67 | Last Login
68 |
69 |
70 | 12 Aug 2022 9:30 AM
71 |
72 |
73 |
74 | {/* contact information */}
75 |
76 |
77 | Contact Information
78 |
79 |
80 |
81 |
82 |
83 |
First Name
84 |
John
85 |
86 |
87 |
Last Name
88 |
Doe
89 |
90 |
91 |
User Name
92 |
John
93 |
94 |
98 |
99 |
Position
100 |
Super Admin
101 |
102 |
103 |
Department
104 |
Kutubi
105 |
106 |
107 |
Contact Email
108 |
ElonMusk@x.com
109 |
110 |
111 |
Contact Number
112 |
Nil
113 |
114 |
115 |
City
116 |
Dubai
117 |
118 |
119 |
Language
120 |
English
121 |
122 |
123 |
Date of Birth
124 |
26/4/1989
125 |
126 |
127 |
Social Media
128 |
x
129 |
130 |
132 |
133 |
134 |
135 |
139 |
145 |
4 |
Bio
5 |
6 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
7 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
8 | veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
9 | commodo consequat.
10 |
11 |
4 |
Count
5 |
6 |
7 |
Books
8 |
9 | Completed{' '}
10 | 50
11 |
12 |
13 | On-going{' '}
14 | 5
15 |
16 |
17 |
18 |
19 |
Videos
20 |
Watched
21 |
22 |
23 | 10
24 |
25 |
26 |
27 |
28 |
29 |
Task
30 |
31 | Completed{' '}
32 | 5
33 |
34 |
35 | Not completed{' '}
36 | 2
37 |
38 |
39 |
40 |
41 |
Word
42 |
Count
43 |
44 |
45 | 710
46 |
47 |
48 |
49 |
;
3 | }
4 |
--------------------------------------------------------------------------------
/src/pages/students/components/interest-channel.tsx:
--------------------------------------------------------------------------------
1 | import { useSearchParams } from 'react-router-dom';
2 | import { useGetStudents } from '../queries/queries';
3 | import { useState } from 'react';
4 | import PaginationSection from '@/components/shared/pagination-section';
5 | import { GitHubLogoIcon } from '@radix-ui/react-icons';
6 |
7 | const InterestChannel = ({ title }: { title: string }) => {
8 | const [searchParams] = useSearchParams();
9 | const page = Number(searchParams.get('page') || 1);
10 | const [currentPage, setCurrentPage] = useState(page);
11 | const pageLimit = 6;
12 | const country = searchParams.get('search') || null;
13 | const offset = (currentPage - 1) * pageLimit;
14 | const { data } = useGetStudents(offset, pageLimit, country);
15 | const users = data?.users;
16 | console.log('users', users);
17 | const totalUsers = data?.total_users; //1000
18 |
19 | return (
20 |
21 |
22 |
23 | {title}
24 |
25 |
26 | {/* Mapping through repeatItems array to render the content 7 times */}
27 | {users?.map((item: any, index: number) => (
28 |
29 |
30 |
{item.city}
31 |
32 | ))}
33 |
34 | {/* pagination */}
35 |
41 |
4 |
5 |
6 |
Parent's Name: Fathima Farhan
7 |
Gender: Female
8 |
Email: example@gmail.com
9 |
Phone: +972 13-589-745
10 |
11 |
= ({ data }) => {
20 | const [loading] = useState(false);
21 | const [open, setOpen] = useState(false);
22 | const router = useRouter();
23 |
24 | const onConfirm = async () => {};
25 |
26 | return (
27 | <>
28 | setOpen(false)}
31 | onConfirm={onConfirm}
32 | loading={loading}
33 | />
34 |
35 |
36 |
37 | Open menu
38 |
40 |
41 |
42 | Actions
43 |
44 | router.push(`/dashboard/user/${data.id}`)}
46 | >
47 |
49 | setOpen(true)}>
50 |
52 |
53 |
54 |
55 | );
56 | };
57 |
--------------------------------------------------------------------------------
/src/pages/students/components/student-feed-table/columns.tsx:
--------------------------------------------------------------------------------
1 | import { Checkbox } from '@/components/ui/checkbox';
2 | import { Employee } from '@/constants/data';
3 | import { ColumnDef } from '@tanstack/react-table';
4 | import { CellAction } from './cell-action';
5 |
6 | export const columns: ColumnDef[] = [
7 | {
8 | id: 'select',
9 | header: ({ table }) => (
10 | table.toggleAllPageRowsSelected(!!value)}
13 | aria-label="Select all"
14 | />
15 | ),
16 | cell: ({ row }) => (
17 | row.toggleSelected(!!value)}
20 | aria-label="Select row"
21 | />
22 | ),
23 | enableSorting: false,
24 | enableHiding: false
25 | },
26 | {
27 | accessorKey: 'first_name',
28 | header: 'NAME'
29 | },
30 | {
31 | accessorKey: 'country',
32 | header: 'COUNTRY'
33 | },
34 | {
35 | accessorKey: 'email',
36 | header: 'EMAIL'
37 | },
38 | {
39 | accessorKey: 'job',
40 | header: 'COMPANY'
41 | },
42 | {
43 | accessorKey: 'gender',
44 | header: 'GENDER'
45 | },
46 | {
47 | id: 'actions',
48 | cell: ({ row }) =>
10 |
13 |
14 |
15 |
18 |
19 |
23 |
= ({ data }) => {
20 | const [loading] = useState(false);
21 | const [open, setOpen] = useState(false);
22 | const router = useRouter();
23 |
24 | const onConfirm = async () => {};
25 |
26 | return (
27 | <>
28 | setOpen(false)}
31 | onConfirm={onConfirm}
32 | loading={loading}
33 | />
34 |
35 |
36 |
37 | Open menu
38 |
40 |
41 |
42 | Actions
43 |
44 | router.push(`/dashboard/user/${data.id}`)}
46 | >
47 |
49 | setOpen(true)}>
50 |
52 |
53 |
54 |
55 | );
56 | };
57 |
--------------------------------------------------------------------------------
/src/pages/students/components/students-table/columns.tsx:
--------------------------------------------------------------------------------
1 | import { Checkbox } from '@/components/ui/checkbox';
2 | import { Employee } from '@/constants/data';
3 | import { ColumnDef } from '@tanstack/react-table';
4 | import { CellAction } from './cell-action';
5 |
6 | export const columns: ColumnDef[] = [
7 | {
8 | id: 'select',
9 | header: ({ table }) => (
10 | table.toggleAllPageRowsSelected(!!value)}
13 | aria-label="Select all"
14 | />
15 | ),
16 | cell: ({ row }) => (
17 | row.toggleSelected(!!value)}
20 | aria-label="Select row"
21 | />
22 | ),
23 | enableSorting: false,
24 | enableHiding: false
25 | },
26 | {
27 | accessorKey: 'first_name',
28 | header: 'NAME'
29 | },
30 | {
31 | accessorKey: 'country',
32 | header: 'COUNTRY'
33 | },
34 | {
35 | accessorKey: 'email',
36 | header: 'EMAIL'
37 | },
38 | {
39 | accessorKey: 'job',
40 | header: 'COMPANY'
41 | },
42 | {
43 | accessorKey: 'gender',
44 | header: 'GENDER'
45 | },
46 | {
47 | id: 'actions',
48 | cell: ({ row }) =>
24 |
Time Spent (Today)
25 |
26 |
27 |
28 | `${value}`}
41 | domain={[0, 5]}
42 | ticks={[0, 1, 2, 3, 4, 5]}
43 | />
44 |
51 |
52 |
53 | );
54 | }
55 |
--------------------------------------------------------------------------------
/src/pages/students/index.tsx:
--------------------------------------------------------------------------------
1 | import PageHead from '@/components/shared/page-head';
2 | import { useGetStudents } from './queries/queries';
3 | import StudentsTable from './components/students-table';
4 | import { useSearchParams } from 'react-router-dom';
5 | import { DataTableSkeleton } from '@/components/shared/data-table-skeleton';
6 | import { Breadcrumbs } from '@/components/shared/breadcrumbs';
7 |
8 | export default function StudentPage() {
9 | const [searchParams] = useSearchParams();
10 | const page = Number(searchParams.get('page') || 1);
11 | const pageLimit = Number(searchParams.get('limit') || 10);
12 | const country = searchParams.get('search') || null;
13 | const offset = (page - 1) * pageLimit;
14 | const { data, isLoading } = useGetStudents(offset, pageLimit, country);
15 | const users = data?.users;
16 | const totalUsers = data?.total_users; //1000
17 | const pageCount = Math.ceil(totalUsers / pageLimit);
18 |
19 | if (isLoading) {
20 | return (
21 |
22 |
28 | );
29 | }
30 |
31 | return (
32 |
47 | );
48 | }
49 |
--------------------------------------------------------------------------------
/src/pages/students/queries/queries.ts:
--------------------------------------------------------------------------------
1 | import { getStudents } from '@/lib/api';
2 | import { useQuery } from '@tanstack/react-query';
3 |
4 | export const useGetStudents = (offset, pageLimit, country) => {
5 | return useQuery({
6 | queryKey: ['students', offset, pageLimit, country],
7 | queryFn: async () => getStudents(offset, pageLimit, country)
8 | });
9 | };
10 |
--------------------------------------------------------------------------------
/src/providers/index.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from '@/components/ui/button';
2 | import { useRouter } from '@/routes/hooks';
3 | import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
4 | import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
5 | import { Suspense } from 'react';
6 | import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
7 | import { HelmetProvider } from 'react-helmet-async';
8 | import { BrowserRouter } from 'react-router-dom';
9 | import ThemeProvider from './theme-provider';
10 | import { SidebarProvider } from '@/hooks/use-sidebar';
11 |
12 | export const queryClient = new QueryClient();
13 |
14 | const ErrorFallback = ({ error }: FallbackProps) => {
15 | const router = useRouter();
16 | console.log('error', error);
17 | return (
18 |
22 |
23 | Ooops, something went wrong :({' '}
24 |
25 |
{error.message}
26 |
{error.stack}
27 |
router.back()}>
28 | Go back
29 |
30 |
41 |
42 |
43 |
44 |
45 |
47 | {children}
48 |
49 |
50 |
51 |
52 |
53 |
54 | );
55 | }
56 |
--------------------------------------------------------------------------------
/src/providers/theme-provider.tsx:
--------------------------------------------------------------------------------
1 | import { createContext, useContext, useEffect, useState } from 'react';
2 |
3 | type Theme = 'dark' | 'light' | 'system';
4 |
5 | type ThemeProviderProps = {
6 | children: React.ReactNode;
7 | defaultTheme?: Theme;
8 | storageKey?: string;
9 | };
10 |
11 | type ThemeProviderState = {
12 | theme: Theme;
13 | setTheme: (theme: Theme) => void;
14 | };
15 |
16 | const initialState: ThemeProviderState = {
17 | theme: 'system',
18 | setTheme: () => null
19 | };
20 |
21 | const ThemeProviderContext = createContext(initialState);
22 |
23 | export default function ThemeProvider({
24 | children,
25 | defaultTheme = 'system',
26 | storageKey = 'vite-ui-theme',
27 | ...props
28 | }: ThemeProviderProps) {
29 | const [theme, setTheme] = useState(
30 | () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
31 | );
32 |
33 | useEffect(() => {
34 | const root = window.document.documentElement;
35 |
36 | root.classList.remove('light', 'dark');
37 |
38 | if (theme === 'system') {
39 | const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
40 | .matches
41 | ? 'dark'
42 | : 'light';
43 |
44 | root.classList.add(systemTheme);
45 | return;
46 | }
47 |
48 | root.classList.add(theme);
49 | }, [theme]);
50 |
51 | const value = {
52 | theme,
53 | setTheme: (theme: Theme) => {
54 | localStorage.setItem(storageKey, theme);
55 | setTheme(theme);
56 | }
57 | };
58 |
59 | return (
60 |
61 | {children}
62 |
63 | );
64 | }
65 |
66 | export const useTheme = () => {
67 | const context = useContext(ThemeProviderContext);
68 |
69 | if (context === undefined)
70 | throw new Error('useTheme must be used within a ThemeProvider');
71 |
72 | return context;
73 | };
74 |
--------------------------------------------------------------------------------
/src/routes/hooks/index.tsx:
--------------------------------------------------------------------------------
1 | export { usePathname } from './use-pathname';
2 | export { useRouter } from './use-router';
3 |
--------------------------------------------------------------------------------
/src/routes/hooks/use-pathname.tsx:
--------------------------------------------------------------------------------
1 | import { useMemo } from 'react';
2 | import { useLocation } from 'react-router-dom';
3 |
4 | // ----------------------------------------------------------------------
5 |
6 | export function usePathname() {
7 | const { pathname } = useLocation();
8 |
9 | return useMemo(() => pathname, [pathname]);
10 | }
11 |
--------------------------------------------------------------------------------
/src/routes/hooks/use-router.tsx:
--------------------------------------------------------------------------------
1 | import { useMemo } from 'react';
2 | import { useNavigate } from 'react-router-dom';
3 |
4 | // ----------------------------------------------------------------------
5 |
6 | export function useRouter() {
7 | const navigate = useNavigate();
8 |
9 | const router = useMemo(
10 | () => ({
11 | back: () => navigate(-1),
12 | forward: () => navigate(1),
13 | reload: () => window.location.reload(),
14 | push: (href: string) => navigate(href),
15 | replace: (href: string) => navigate(href, { replace: true })
16 | }),
17 | [navigate]
18 | );
19 |
20 | return router;
21 | }
22 |
--------------------------------------------------------------------------------
/src/routes/index.tsx:
--------------------------------------------------------------------------------
1 | import FormPage from '@/pages/form';
2 | import NotFound from '@/pages/not-found';
3 | import { Suspense, lazy } from 'react';
4 | import { Navigate, Outlet, useRoutes } from 'react-router-dom';
5 |
6 | const DashboardLayout = lazy(
7 | () => import('@/components/layout/dashboard-layout')
8 | );
9 | const SignInPage = lazy(() => import('@/pages/auth/signin'));
10 | const DashboardPage = lazy(() => import('@/pages/dashboard'));
11 | const StudentPage = lazy(() => import('@/pages/students'));
12 | const StudentDetailPage = lazy(
13 | () => import('@/pages/students/StudentDetailPage')
14 | );
15 |
16 | // ----------------------------------------------------------------------
17 |
18 | export default function AppRouter() {
19 | const dashboardRoutes = [
20 | {
21 | path: '/',
22 | element: (
23 |
24 |
25 |
27 |
28 | ),
29 | children: [
30 | {
31 | element: 
53 |