PWA React App

+ ) +); +Card.displayName = 'Card'; + +const CardHeader = React.forwardRef>( + ({ className, ...props }, ref) => ( +

+ ) +); +CardHeader.displayName = 'CardHeader'; + +const CardTitle = React.forwardRef>( + ({ className, ...props }, ref) => ( +

+ ) +); +CardTitle.displayName = 'CardTitle'; + +const CardDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)); +CardDescription.displayName = 'CardDescription'; + +const CardContent = React.forwardRef>( + ({ className, ...props }, ref) => ( +
+ ) +); +CardContent.displayName = 'CardContent'; + +const CardFooter = React.forwardRef>( + ({ className, ...props }, ref) => ( +
+ ) +); +CardFooter.displayName = 'CardFooter'; + +export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }; + + + + + + + + + + + diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx new file mode 100644 index 0000000..da942bd --- /dev/null +++ b/src/components/ui/input.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; +import { cn } from '@/lib/utils'; + +export interface InputProps extends React.InputHTMLAttributes {} + +const Input = React.forwardRef( + ({ className, type, ...props }, ref) => { + return ( + + ); + } +); +Input.displayName = 'Input'; + +export { Input }; + + + + + + + + + + + diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx new file mode 100644 index 0000000..71c3ed9 --- /dev/null +++ b/src/components/ui/label.tsx @@ -0,0 +1,29 @@ +import * as React from 'react'; +import * as LabelPrimitive from '@radix-ui/react-label'; +import { cva, type VariantProps } from 'class-variance-authority'; +import { cn } from '@/lib/utils'; + +const labelVariants = cva( + 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70' +); + +const Label = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & VariantProps +>(({ className, ...props }, ref) => ( + +)); +Label.displayName = LabelPrimitive.Root.displayName; + +export { Label }; + + + + + + + + + + + diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx new file mode 100644 index 0000000..9b7d5c8 --- /dev/null +++ b/src/components/ui/toast.tsx @@ -0,0 +1,132 @@ +import * as React from 'react'; +import * as ToastPrimitives from '@radix-ui/react-toast'; +import { cva, type VariantProps } from 'class-variance-authority'; +import { X } from 'lucide-react'; +import { cn } from '@/lib/utils'; + +const ToastProvider = ToastPrimitives.Provider; + +const ToastViewport = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +ToastViewport.displayName = ToastPrimitives.Viewport.displayName; + +const toastVariants = cva( + 'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full', + { + variants: { + variant: { + default: 'border bg-background text-foreground', + destructive: + 'destructive group border-destructive bg-destructive text-destructive-foreground' + } + }, + defaultVariants: { + variant: 'default' + } + } +); + +const Toast = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & VariantProps +>(({ className, variant, ...props }, ref) => { + return ( + + ); +}); +Toast.displayName = ToastPrimitives.Root.displayName; + +const ToastAction = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +ToastAction.displayName = ToastPrimitives.Action.displayName; + +const ToastClose = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)); +ToastClose.displayName = ToastPrimitives.Close.displayName; + +const ToastTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +ToastTitle.displayName = ToastPrimitives.Title.displayName; + +const ToastDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +ToastDescription.displayName = ToastPrimitives.Description.displayName; + +type ToastProps = React.ComponentPropsWithoutRef; + +type ToastActionElement = React.ReactElement; + +export { + type ToastProps, + type ToastActionElement, + ToastProvider, + ToastViewport, + Toast, + ToastTitle, + ToastDescription, + ToastClose, + ToastAction +}; + + + + + + + + + + + diff --git a/src/components/ui/toaster.tsx b/src/components/ui/toaster.tsx new file mode 100644 index 0000000..546f1a1 --- /dev/null +++ b/src/components/ui/toaster.tsx @@ -0,0 +1,42 @@ +import { + Toast, + ToastClose, + ToastDescription, + ToastProvider, + ToastTitle, + ToastViewport +} from './toast'; +import { useToast } from './use-toast'; + +export function Toaster() { + const { toasts } = useToast(); + + return ( + + {toasts.map(function ({ id, title, description, action, ...props }) { + return ( + +
+ {title && {title}} + {description && {description}} +
+ {action} + + + ); + })} + + + ); +} + + + + + + + + + + + diff --git a/src/components/ui/use-toast.ts b/src/components/ui/use-toast.ts new file mode 100644 index 0000000..cea6927 --- /dev/null +++ b/src/components/ui/use-toast.ts @@ -0,0 +1,185 @@ +import * as React from 'react'; +import type { ToastActionElement, ToastProps } from './toast'; + +const TOAST_LIMIT = 1; +const TOAST_REMOVE_DELAY = 5000; + +type ToasterToast = ToastProps & { + id: string; + title?: React.ReactNode; + description?: React.ReactNode; + action?: ToastActionElement; +}; + +const actionTypes = { + ADD_TOAST: 'ADD_TOAST', + UPDATE_TOAST: 'UPDATE_TOAST', + DISMISS_TOAST: 'DISMISS_TOAST', + REMOVE_TOAST: 'REMOVE_TOAST' +} as const; + +let count = 0; + +function genId() { + count = (count + 1) % Number.MAX_SAFE_INTEGER; + return count.toString(); +} + +type ActionType = typeof actionTypes; + +type Action = + | { + type: ActionType['ADD_TOAST']; + toast: ToasterToast; + } + | { + type: ActionType['UPDATE_TOAST']; + toast: Partial; + } + | { + type: ActionType['DISMISS_TOAST']; + toastId?: ToasterToast['id']; + } + | { + type: ActionType['REMOVE_TOAST']; + toastId?: ToasterToast['id']; + }; + +interface State { + toasts: ToasterToast[]; +} + +const toastTimeouts = new Map>(); + +const addToRemoveQueue = (toastId: string) => { + if (toastTimeouts.has(toastId)) { + return; + } + + const timeout = setTimeout(() => { + toastTimeouts.delete(toastId); + dispatch({ + type: 'REMOVE_TOAST', + toastId: toastId + }); + }, TOAST_REMOVE_DELAY); + + toastTimeouts.set(toastId, timeout); +}; + +export const reducer = (state: State, action: Action): State => { + switch (action.type) { + case 'ADD_TOAST': + return { + ...state, + toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT) + }; + + case 'UPDATE_TOAST': + return { + ...state, + toasts: state.toasts.map((t) => + t.id === action.toast.id ? { ...t, ...action.toast } : t + ) + }; + + case 'DISMISS_TOAST': { + const { toastId } = action; + + if (toastId) { + addToRemoveQueue(toastId); + } else { + state.toasts.forEach((toast) => { + addToRemoveQueue(toast.id); + }); + } + + return { + ...state, + toasts: state.toasts.map((t) => + t.id === toastId || toastId === undefined + ? { + ...t, + open: false + } + : t + ) + }; + } + case 'REMOVE_TOAST': + if (action.toastId === undefined) { + return { + ...state, + toasts: [] + }; + } + return { + ...state, + toasts: state.toasts.filter((t) => t.id !== action.toastId) + }; + } +}; + +const listeners: Array<(state: State) => void> = []; + +let memoryState: State = { toasts: [] }; + +function dispatch(action: Action) { + memoryState = reducer(memoryState, action); + listeners.forEach((listener) => { + listener(memoryState); + }); +} + +type Toast = Omit; + +function toast({ ...props }: Toast) { + const id = genId(); + + const update = (props: ToasterToast) => + dispatch({ + type: 'UPDATE_TOAST', + toast: { ...props, id } + }); + const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id }); + + dispatch({ + type: 'ADD_TOAST', + toast: { + ...props, + id, + open: true, + onOpenChange: (open) => { + if (!open) dismiss(); + } + } + }); + + return { + id: id, + dismiss, + update + }; +} + +function useToast() { + const [state, setState] = React.useState(memoryState); + + React.useEffect(() => { + listeners.push(setState); + return () => { + const index = listeners.indexOf(setState); + if (index > -1) { + listeners.splice(index, 1); + } + }; + }, [state]); + + return { + ...state, + toast, + dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }) + }; +} + +export { useToast, toast }; diff --git a/src/docs/SETUP.md b/src/docs/SETUP.md new file mode 100644 index 0000000..8c1604e --- /dev/null +++ b/src/docs/SETUP.md @@ -0,0 +1,126 @@ +# راهنمای راه‌اندازی + +## پیش‌نیازها + +- Node.js 18+ و npm/yarn/pnpm +- حساب Supabase + +## مراحل نصب + +### 1. نصب وابستگی‌ها + +```bash +npm install +``` + +### 2. تنظیمات محیط + +یک فایل `.env` در ریشه پروژه ایجاد کنید: + +```env +VITE_SUPABASE_URL=your-supabase-project-url +VITE_SUPABASE_ANON_KEY=your-supabase-anon-key +``` + +مقادیر را از [Supabase Dashboard](https://supabase.com/dashboard) دریافت کنید. + +### 3. راه‌اندازی Database + +در Supabase SQL Editor، این کدها را اجرا کنید: + +```sql +-- ایجاد جدول requests +create table requests ( + id uuid default gen_random_uuid() primary key, + user_id uuid references auth.users(id) on delete cascade not null, + title text not null, + description text not null, + status text default 'pending' check (status in ('pending', 'in_progress', 'completed')), + created_at timestamp with time zone default timezone('utc'::text, now()) not null, + updated_at timestamp with time zone default timezone('utc'::text, now()) not null +); + +alter table requests enable row level security; + +create policy "Anyone can view requests" on requests + for select using (true); + +create policy "Users can insert their own requests" on requests + for insert with check (auth.uid() = user_id); + +create policy "Users can update their own requests" on requests + for update using (auth.uid() = user_id); + +-- ایجاد جدول messages +create table messages ( + id uuid default gen_random_uuid() primary key, + user_id uuid references auth.users(id) on delete cascade not null, + content text not null, + created_at timestamp with time zone default timezone('utc'::text, now()) not null +); + +alter table messages enable row level security; + +create policy "Anyone can view messages" on messages + for select using (true); + +create policy "Authenticated users can insert messages" on messages + for insert with check (auth.uid() = user_id); +``` + +### 4. فعال‌سازی Realtime + +1. به Supabase Dashboard بروید +2. Database > Replication +3. Realtime را برای جداول `requests` و `messages` فعال کنید + +### 5. تنظیمات Google OAuth (اختیاری) + +1. در Supabase Dashboard به Authentication > Providers بروید +2. Google را فعال کنید +3. Client ID و Client Secret را از Google Cloud Console دریافت و وارد کنید + +### 6. اجرای پروژه + +```bash +npm run dev +``` + +پروژه در آدرس `http://localhost:5173` اجرا می‌شود. + +## ساخت برای Production + +```bash +npm run build +``` + +فایل‌های خروجی در فولدر `dist/` قرار می‌گیرند. + +## اضافه کردن فونت IRANSans + +برای استفاده از فونت IRANSans: + +1. فایل‌های فونت را از [این آدرس](https://github.com/font-store/IRANSans) دانلود کنید +2. فایل‌های `.woff2` را در فولدر `public/fonts/` قرار دهید +3. نام فایل‌ها باید `IRANSansWeb.woff2` و `IRANSansWeb_Bold.woff2` باشند + +## اضافه کردن آیکون‌های PWA + +برای کامل کردن PWA: + +1. آیکون‌های 192x192 و 512x512 پیکسل ایجاد کنید +2. آن‌ها را در فولدر `public/` با نام‌های `pwa-192x192.png` و `pwa-512x512.png` قرار دهید +3. همچنین `apple-touch-icon.png` (180x180) و `mask-icon.svg` را اضافه کنید + +می‌توانید از [RealFaviconGenerator](https://realfavicongenerator.net/) استفاده کنید. + + + + + + + + + + + diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts new file mode 100644 index 0000000..90b1da1 --- /dev/null +++ b/src/hooks/useAuth.ts @@ -0,0 +1,104 @@ +import { useEffect } from 'react'; +import { useAtom } from 'jotai'; +import { sessionAtom, userAtom, isAuthenticatedAtom } from '@/atoms/auth'; +import { supabase, isSupabaseConfigured } from '@/services/supabase'; + +export function useAuth() { + const [session, setSession] = useAtom(sessionAtom); + const [user] = useAtom(userAtom); + const [isAuthenticated] = useAtom(isAuthenticatedAtom); + + useEffect(() => { + if (!isSupabaseConfigured) { + // In offline mode, set session to null + setSession(null); + return; + } + + // Get initial session + supabase.auth.getSession().then(({ data: { session } }) => { + setSession(session); + }).catch((error) => { + console.error('Error getting session:', error); + setSession(null); + }); + + // Listen for auth changes + const { + data: { subscription } + } = supabase.auth.onAuthStateChange((_event, session) => { + setSession(session); + }); + + return () => { + subscription.unsubscribe(); + }; + }, [setSession]); + + const signInWithGoogle = async () => { + const { error } = await supabase.auth.signInWithOAuth({ + provider: 'google', + options: { + redirectTo: `${window.location.origin}/account` + } + }); + if (error) throw error; + }; + + const signInWithPhone = async (phone: string) => { + const { error } = await supabase.auth.signInWithOtp({ + phone, + options: { + channel: 'sms' + } + }); + if (error) throw error; + }; + + const verifyOTP = async (phone: string, token: string) => { + const { error } = await supabase.auth.verifyOtp({ + phone, + token, + type: 'sms' + }); + if (error) throw error; + }; + + const signUp = async (email: string, password: string) => { + const { data, error } = await supabase.auth.signUp({ + email, + password, + options: { + emailRedirectTo: `${window.location.origin}/account` + } + }); + if (error) throw error; + return { data, error: null }; + }; + + const signIn = async (email: string, password: string) => { + const { error } = await supabase.auth.signInWithPassword({ + email, + password + }); + if (error) throw error; + }; + + const signOut = async () => { + const { error } = await supabase.auth.signOut(); + if (error) throw error; + }; + + return { + session, + user, + isAuthenticated, + signInWithGoogle, + signInWithPhone, + verifyOTP, + signUp, + signIn, + signOut + }; +} + diff --git a/src/hooks/useChat.ts b/src/hooks/useChat.ts new file mode 100644 index 0000000..92c5270 --- /dev/null +++ b/src/hooks/useChat.ts @@ -0,0 +1,89 @@ +import { useState, useEffect } from 'react'; +import { supabase, isSupabaseConfigured, type Message } from '@/services/supabase'; + +export function useChat() { + const [messages, setMessages] = useState([]); + const [loading, setLoading] = useState(true); + + useEffect(() => { + loadMessages(); + + if (!isSupabaseConfigured) { + return; + } + + // Subscribe to real-time messages + const channel = supabase + .channel('messages') + .on( + 'postgres_changes', + { + event: 'INSERT', + schema: 'public', + table: 'messages' + }, + (payload) => { + setMessages((prev) => [payload.new as Message, ...prev]); + } + ) + .subscribe(); + + return () => { + supabase.removeChannel(channel); + }; + }, []); + + const loadMessages = async () => { + if (!isSupabaseConfigured) { + setMessages([]); + setLoading(false); + return; + } + + try { + const { data, error } = await supabase + .from('messages') + .select('') + .order('created_at', { ascending: false }) + .limit(50); + + if (error) throw error; + + // For now, user data will be fetched separately in the component + // You can create a profiles table and join it here if needed + setMessages((data || []) as Message[]); + } catch (error) { + console.error('Error loading messages:', error); + setMessages([]); + } finally { + setLoading(false); + } + }; + + const sendMessage = async (content: string, userId: string) => { + if (!isSupabaseConfigured) { + throw new Error('Supabase is not configured. Cannot send messages in offline mode.'); + } + + try { + const { data, error } = await supabase + .from('messages') + .insert([ + { + user_id: userId, + content + } + ]) + .select() + .single(); + + if (error) throw error; + return data; + } catch (error) { + console.error('Error sending message:', error); + throw error; + } + }; + + return { messages, loading, sendMessage }; +} diff --git a/src/hooks/useRequests.ts b/src/hooks/useRequests.ts new file mode 100644 index 0000000..9f01ed5 --- /dev/null +++ b/src/hooks/useRequests.ts @@ -0,0 +1,88 @@ +import { useState, useEffect } from 'react'; +import { supabase, isSupabaseConfigured, type Request } from '@/services/supabase'; + +export function useRequests() { + const [requests, setRequests] = useState([]); + const [loading, setLoading] = useState(true); + + useEffect(() => { + loadRequests(); + + if (!isSupabaseConfigured) { + return; + } + + // Subscribe to real-time updates + const channel = supabase + .channel('requests_changes') + .on( + 'postgres_changes', + { + event: '', + schema: 'public', + table: 'requests' + }, + () => { + loadRequests(); + } + ) + .subscribe(); + + return () => { + supabase.removeChannel(channel); + }; + }, []); + + const loadRequests = async () => { + if (!isSupabaseConfigured) { + setRequests([]); + setLoading(false); + return; + } + + try { + const { data, error } = await supabase + .from('requests') + .select('') + .order('created_at', { ascending: false }); + + if (error) throw error; + setRequests(data || []); + } catch (error) { + console.error('Error loading requests:', error); + setRequests([]); + } finally { + setLoading(false); + } + }; + + const createRequest = async (title: string, description: string, userId: string) => { + if (!isSupabaseConfigured) { + throw new Error('Supabase is not configured. Cannot create requests in offline mode.'); + } + + try { + const { data, error } = await supabase + .from('requests') + .insert([ + { + user_id: userId, + title, + description, + status: 'pending' + } + ]) + .select() + .single(); + + if (error) throw error; + return data; + } catch (error) { + console.error('Error creating request:', error); + throw error; + } + }; + + return { requests, loading, createRequest, loadRequests }; +} + diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts new file mode 100644 index 0000000..0e38e8d --- /dev/null +++ b/src/hooks/useTheme.ts @@ -0,0 +1,43 @@ +import { useAtom } from 'jotai'; +import { useEffect } from 'react'; +import { themeAtom, type Theme } from '@/atoms/theme'; + +export function useTheme() { + const [theme, setTheme] = useAtom(themeAtom); + + useEffect(() => { + // بارگذاری theme از localStorage در اولین بار + const savedTheme = localStorage.getItem('theme') as Theme | null; + if (savedTheme && (savedTheme === 'light' || savedTheme === 'dark')) { + setTheme(savedTheme); + } else { + // بررسی ترجیح سیستم + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + setTheme(prefersDark ? 'dark' : 'light'); + } + }, [setTheme]); + + useEffect(() => { + // اعمال theme به document + const root = document.documentElement; + if (theme === 'dark') { + root.classList.add('dark'); + } else { + root.classList.remove('dark'); + } + // ذخیره در localStorage + localStorage.setItem('theme', theme); + }, [theme]); + + const toggleTheme = () => { + setTheme((prev: Theme) => (prev === 'light' ? 'dark' : 'light')); + }; + + return { + theme, + setTheme, + toggleTheme, + isDark: theme === 'dark' + }; +} + diff --git a/src/lib/utils.ts b/src/lib/utils.ts new file mode 100644 index 0000000..fb4efe3 --- /dev/null +++ b/src/lib/utils.ts @@ -0,0 +1,12 @@ +export from '../utils/cn'; + + + + + + + + + + + diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..1d59d81 --- /dev/null +++ b/src/main.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App.tsx'; +import './styles/globals.css'; + +ReactDOM.createRoot(document.getElementById('root')!).render( + + + +); + + + + + + + + + + + diff --git a/src/pages/Account/AccountPage.tsx b/src/pages/Account/AccountPage.tsx new file mode 100644 index 0000000..94fb156 --- /dev/null +++ b/src/pages/Account/AccountPage.tsx @@ -0,0 +1,125 @@ +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; +import { Button } from '@/components/ui/button'; +import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; +import { useAuth } from '@/hooks/useAuth'; +import { useNavigate } from 'react-router-dom'; +import { LogOut, User as UserIcon, Mail, Phone } from 'lucide-react'; +import { useToast } from '@/components/ui/use-toast'; + +export default function AccountPage() { + const { user, signOut } = useAuth(); + const navigate = useNavigate(); + const { toast } = useToast(); + + const handleSignOut = async () => { + try { + await signOut(); + toast({ + title: 'خروج موفق', + description: 'با موفقیت خارج شدید' + }); + navigate('/'); + } catch (error) { + toast({ + title: 'خطا', + description: 'خطا در خروج از حساب کاربری', + variant: 'destructive' + }); + } + }; + + const getUserInitials = () => { + if (user?.email) { + return user.email.substring(0, 2).toUpperCase(); + } + if (user?.phone) { + return user.phone.slice(-2); + } + return 'U'; + }; + + return ( +
+
+
+
حساب کاربری
+
مدیریت اطلاعات و تنظیمات حساب کاربری
+
+ + + + اطلاعات کاربری + جزئیات حساب کاربری شما + + +
+ + + {getUserInitials()} + +
+
+ {user?.user_metadata?.full_name || user?.email || user?.phone || 'کاربر'} +
+
+ {user?.email && ( +
+ + {user.email} +
+ )} + {user?.phone && ( +
+ + {user.phone} +
+ )} +
+
+
+ +
+
+
+
+
شناسه کاربری
+
+ {user?.id?.substring(0, 8)}... +
+
+ +
+ + {user?.created_at && ( +
+
+
تاریخ عضویت
+
+ {new Date(user.created_at).toLocaleDateString('fa-IR')} +
+
+
+ )} +
+
+ +
+ +
+ + +
+
+ ); +} + + + + diff --git a/src/pages/Auth/Login/LoginPage.tsx b/src/pages/Auth/Login/LoginPage.tsx new file mode 100644 index 0000000..f5c6ead --- /dev/null +++ b/src/pages/Auth/Login/LoginPage.tsx @@ -0,0 +1,349 @@ +import { useState } from 'react'; +import { useNavigate, Link } from 'react-router-dom'; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import { useAuth } from '@/hooks/useAuth'; +import { useTheme } from '@/hooks/useTheme'; +import { useToast } from '@/components/ui/use-toast'; +import { Loader2, Mail, Phone, LogIn, Moon, Sun } from 'lucide-react'; + +export default function LoginPage() { + const navigate = useNavigate(); + const { signIn, signInWithGoogle, signInWithPhone, verifyOTP } = useAuth(); + const { toggleTheme, isDark } = useTheme(); + const { toast } = useToast(); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [phone, setPhone] = useState(''); + const [otp, setOtp] = useState(''); + const [isLoading, setIsLoading] = useState(false); + const [otpSent, setOtpSent] = useState(false); + const [authMethod, setAuthMethod] = useState<'email' | 'phone' | 'google'>('email'); + + const handleEmailLogin = async (e: React.FormEvent) => { + e.preventDefault(); + if (!email || !password) { + toast({ + title: 'خطا', + description: 'لطفا ایمیل و رمز عبور را وارد کنید', + variant: 'destructive' + }); + return; + } + + setIsLoading(true); + try { + await signIn(email, password); + toast({ + title: 'موفق', + description: 'با موفقیت وارد شدید' + }); + navigate('/account'); + } catch (error: any) { + let errorMessage = 'خطا در ورود'; + + if (error.message) { + if (error.message.includes('Invalid login credentials')) { + errorMessage = 'ایمیل یا رمز عبور اشتباه است. لطفا دوباره تلاش کنید یا ثبت نام کنید.'; + } else if (error.message.includes('Email not confirmed')) { + errorMessage = 'لطفا ابتدا ایمیل خود را تأیید کنید.'; + } else { + errorMessage = error.message; + } + } + + toast({ + title: 'خطا', + description: errorMessage, + variant: 'destructive' + }); + } finally { + setIsLoading(false); + } + }; + + const handleGoogleLogin = async () => { + setIsLoading(true); + try { + await signInWithGoogle(); + // Redirect happens automatically + } catch (error: any) { + toast({ + title: 'خطا', + description: error.message || 'خطا در ورود با گوگل', + variant: 'destructive' + }); + setIsLoading(false); + } + }; + + const handleSendOTP = async (e: React.FormEvent) => { + e.preventDefault(); + if (!phone) { + toast({ + title: 'خطا', + description: 'لطفا شماره تلفن را وارد کنید', + variant: 'destructive' + }); + return; + } + + setIsLoading(true); + try { + await signInWithPhone(phone); + setOtpSent(true); + toast({ + title: 'موفق', + description: 'کد تأیید ارسال شد' + }); + } catch (error: any) { + toast({ + title: 'خطا', + description: error.message || 'خطا در ارسال کد', + variant: 'destructive' + }); + } finally { + setIsLoading(false); + } + }; + + const handleVerifyOTP = async (e: React.FormEvent) => { + e.preventDefault(); + if (!otp) { + toast({ + title: 'خطا', + description: 'لطفا کد تأیید را وارد کنید', + variant: 'destructive' + }); + return; + } + + setIsLoading(true); + try { + await verifyOTP(phone, otp); + toast({ + title: 'موفق', + description: 'با موفقیت وارد شدید' + }); + navigate('/account'); + } catch (error: any) { + toast({ + title: 'خطا', + description: error.message || 'کد تأیید نامعتبر است', + variant: 'destructive' + }); + } finally { + setIsLoading(false); + } + }; + + return ( +
+ {/* Dark Mode Toggle Button /} + + + +
+ +
+ ورود + + به حساب کاربری خود وارد شوید + + + + {/ Auth Method Selector /} +
+ + +
+ + {/ Email Login /} + {authMethod === 'email' && ( +
+
+ ایمیل + setEmail(e.target.value)} + disabled={isLoading} + /> +
+
+ رمز عبور + setPassword(e.target.value)} + disabled={isLoading} + /> +
+ +
+ )} + + {/ Phone OTP Login /} + {authMethod === 'phone' && ( + <> + {!otpSent ? ( +
+
+ شماره تلفن + setPhone(e.target.value)} + disabled={isLoading} + /> +
+ +
+ ) : ( +
+
+ کد تأیید + setOtp(e.target.value)} + disabled={isLoading} + /> +
+ + +
+ )} + + )} + + {/ Google Login /} +
+
+ +
+
+ یا +
+
+ + + +
+ حساب کاربری ندارید؟{' '} + + ثبت نام + +
+ + +
+ ); +} + + + + diff --git a/src/pages/Auth/Signup/SignupPage.tsx b/src/pages/Auth/Signup/SignupPage.tsx new file mode 100644 index 0000000..5b8c97e --- /dev/null +++ b/src/pages/Auth/Signup/SignupPage.tsx @@ -0,0 +1,245 @@ +import { useState } from 'react'; +import { useNavigate, Link } from 'react-router-dom'; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import { useAuth } from '@/hooks/useAuth'; +import { useTheme } from '@/hooks/useTheme'; +import { useToast } from '@/components/ui/use-toast'; +import { Loader2, UserPlus, Moon, Sun } from 'lucide-react'; + +export default function SignupPage() { + const navigate = useNavigate(); + const { signUp, signInWithGoogle } = useAuth(); + const { toggleTheme, isDark } = useTheme(); + const { toast } = useToast(); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [confirmPassword, setConfirmPassword] = useState(''); + const [isLoading, setIsLoading] = useState(false); + + const handleSignup = async (e: React.FormEvent) => { + e.preventDefault(); + if (!email || !password || !confirmPassword) { + toast({ + title: 'خطا', + description: 'لطفا تمام فیلدها را پر کنید', + variant: 'destructive' + }); + return; + } + + if (password !== confirmPassword) { + toast({ + title: 'خطا', + description: 'رمز عبور و تکرار آن مطابقت ندارند', + variant: 'destructive' + }); + return; + } + + if (password.length < 6) { + toast({ + title: 'خطا', + description: 'رمز عبور باید حداقل 6 کاراکتر باشد', + variant: 'destructive' + }); + return; + } + + setIsLoading(true); + try { + const result = await signUp(email, password); + + if (result.error) { + let errorMessage = 'خطا در ثبت نام'; + + if (result.error.message.includes('User already registered')) { + errorMessage = 'این ایمیل قبلاً ثبت شده است. لطفا وارد شوید.'; + } else if (result.error.message.includes('Password')) { + errorMessage = 'رمز عبور باید حداقل 6 کاراکتر باشد.'; + } else { + errorMessage = result.error.message; + } + + toast({ + title: 'خطا', + description: errorMessage, + variant: 'destructive' + }); + } else if (result.data) { + // Check if email confirmation is required + if (result.data.user && !result.data.session) { + toast({ + title: 'موفق', + description: 'حساب کاربری ایجاد شد. لطفا ایمیل خود را بررسی کنید و لینک تأیید را کلیک کنید.', + duration: 5000 + }); + navigate('/login'); + } else if (result.data.session) { + toast({ + title: 'موفق', + description: 'حساب کاربری ایجاد شد. در حال ورود...' + }); + navigate('/account'); + } + } + } catch (error: any) { + let errorMessage = 'خطا در ثبت نام'; + + if (error.message) { + if (error.message.includes('User already registered')) { + errorMessage = 'این ایمیل قبلاً ثبت شده است. لطفا وارد شوید.'; + } else if (error.message.includes('Password')) { + errorMessage = 'رمز عبور باید حداقل 6 کاراکتر باشد.'; + } else { + errorMessage = error.message; + } + } + + toast({ + title: 'خطا', + description: errorMessage, + variant: 'destructive' + }); + } finally { + setIsLoading(false); + } + }; + + const handleGoogleSignup = async () => { + setIsLoading(true); + try { + await signInWithGoogle(); + // Redirect happens automatically + } catch (error: any) { + toast({ + title: 'خطا', + description: error.message || 'خطا در ثبت نام با گوگل', + variant: 'destructive' + }); + setIsLoading(false); + } + }; + + return ( +
+ {/ Dark Mode Toggle Button /} + + + +
+ +
+ ثبت نام + + حساب کاربری جدید ایجاد کنید + + + +
+
+ ایمیل + setEmail(e.target.value)} + disabled={isLoading} + /> +
+
+ رمز عبور + setPassword(e.target.value)} + disabled={isLoading} + /> +
+
+ تکرار رمز عبور + setConfirmPassword(e.target.value)} + disabled={isLoading} + /> +
+ +
+ +
+
+ +
+
+ یا +
+
+ + + +
+ قبلا ثبت نام کرده‌اید؟{' '} + + ورود + +
+ + +
+ ); +} + diff --git a/src/pages/Chat/ChatPage.tsx b/src/pages/Chat/ChatPage.tsx new file mode 100644 index 0000000..fcae513 --- /dev/null +++ b/src/pages/Chat/ChatPage.tsx @@ -0,0 +1,167 @@ +import { useState, useRef, useEffect } from 'react'; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; +import { useAuth } from '@/hooks/useAuth'; +import { useChat } from '@/hooks/useChat'; +import { useToast } from '@/components/ui/use-toast'; +import { Send, MessageSquare, Loader2 } from 'lucide-react'; + +export default function ChatPage() { + const { user } = useAuth(); + const { messages, loading, sendMessage } = useChat(); + const { toast } = useToast(); + const [message, setMessage] = useState(''); + const [isSending, setIsSending] = useState(false); + const messagesEndRef = useRef(null); + + useEffect(() => { + messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); + }, [messages]); + + const handleSend = async (e: React.FormEvent) => { + e.preventDefault(); + if (!user) { + toast({ + title: 'خطا', + description: 'لطفا ابتدا وارد حساب کاربری شوید', + variant: 'destructive' + }); + return; + } + + if (!message.trim()) { + return; + } + + setIsSending(true); + try { + await sendMessage(message, user.id); + setMessage(''); + } catch (error) { + toast({ + title: 'خطا', + description: 'خطا در ارسال پیام', + variant: 'destructive' + }); + } finally { + setIsSending(false); + } + }; + + const getUserDisplayName = (msg: typeof messages[0]) => { + if (msg.user_id === user?.id) return 'شما'; + // For other users, show a simplified identifier + // In production, you'd fetch from a profiles table + if (msg.user?.full_name) return msg.user.full_name; + if (msg.user?.email) return msg.user.email; + if (msg.user?.phone) return msg.user.phone; + return `کاربر ${msg.user_id.substring(0, 8)}`; + }; + + const getUserInitials = (msg: typeof messages[0]) => { + const name = getUserDisplayName(msg); + if (name === 'شما') return 'ش'; + if (name.length >= 2) return name.substring(0, 2); + return 'ک'; + }; + + return ( +
+
+
+
چت
+
ارسال پیام و ارتباط با دیگران
+
+ + + +
+ + پیام‌ها +
+ + {loading ? 'در حال بارگذاری...' : `${messages.length} پیام`} + + + + {loading ? ( +
+ +
+ ) : ( + <> +
+ {messages.length === 0 ? ( +
+ هیچ پیامی وجود ندارد. اولین پیام را ارسال کنید! +
+ ) : ( + messages.map((msg) => { + const isOwnMessage = msg.user_id === user?.id; + return ( +
+ + + + {getUserInitials(msg)} + + +
+
+ + {getUserDisplayName(msg)} + + + {new Date(msg.created_at).toLocaleTimeString('fa-IR', { + hour: '2-digit', + minute: '2-digit' + })} + +
+
+
{msg.content}
+
+
+
+ ); + }) + )} +
+
+
+ setMessage(e.target.value)} + disabled={isSending || !user} + /> + +
+ + )} + + +
+
+ ); +} diff --git a/src/pages/Main/MainPage.tsx b/src/pages/Main/MainPage.tsx new file mode 100644 index 0000000..29ab5dc --- /dev/null +++ b/src/pages/Main/MainPage.tsx @@ -0,0 +1,96 @@ +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; +import { Button } from '@/components/ui/button'; +import { useAuth } from '@/hooks/useAuth'; +import { useNavigate } from 'react-router-dom'; +import { Home, User, MessageSquare, FileText } from 'lucide-react'; + +export default function MainPage() { + const { user, isAuthenticated } = useAuth(); + const navigate = useNavigate(); + + return ( +
+
+
+
خوش آمدید
+
+ {isAuthenticated && user + ? `سلام ${user.email || user.phone || 'کاربر'}` + : 'به اپلیکیشن پیشرفته PWA خوش آمدید'} +
+
+ +
+ navigate('/account')}> + + + حساب کاربری + مدیریت پروفایل و تنظیمات + + + + + + + navigate('/request')}> + + + درخواست‌ها + ایجاد و مدیریت درخواست‌ها + + + + + + + navigate('/chat')}> + + + چت + ارسال پیام و ارتباط + + + + + +
+ + + + + داشبورد اصلی + نمای کلی از عملکرد سیستم + + +
+
+
0
+
درخواست‌های فعال
+
+
+
0
+
پیام‌های جدید
+
+
+
+ {isAuthenticated ? '✓' : '✗'} +
+
وضعیت ورود
+
+
+ + +
+
+ ); +} + + + + diff --git a/src/pages/Request/RequestPage.tsx b/src/pages/Request/RequestPage.tsx new file mode 100644 index 0000000..096b50c --- /dev/null +++ b/src/pages/Request/RequestPage.tsx @@ -0,0 +1,186 @@ +import { useState } from 'react'; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import { useAuth } from '@/hooks/useAuth'; +import { useRequests } from '@/hooks/useRequests'; +import { useToast } from '@/components/ui/use-toast'; +import { Plus, FileText, Loader2 } from 'lucide-react'; + +export default function RequestPage() { + const { user } = useAuth(); + const { requests, loading, createRequest } = useRequests(); + const { toast } = useToast(); + const [title, setTitle] = useState(''); + const [description, setDescription] = useState(''); + const [isSubmitting, setIsSubmitting] = useState(false); + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + if (!user) { + toast({ + title: 'خطا', + description: 'لطفا ابتدا وارد حساب کاربری شوید', + variant: 'destructive' + }); + return; + } + + if (!title.trim() || !description.trim()) { + toast({ + title: 'خطا', + description: 'لطفا تمام فیلدها را پر کنید', + variant: 'destructive' + }); + return; + } + + setIsSubmitting(true); + try { + await createRequest(title, description, user.id); + toast({ + title: 'موفق', + description: 'درخواست با موفقیت ایجاد شد' + }); + setTitle(''); + setDescription(''); + } catch (error) { + toast({ + title: 'خطا', + description: 'خطا در ایجاد درخواست', + variant: 'destructive' + }); + } finally { + setIsSubmitting(false); + } + }; + + const getStatusBadge = (status: string) => { + const variants = { + pending: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200', + in_progress: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200', + completed: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' + }; + const labels = { + pending: 'در انتظار', + in_progress: 'در حال انجام', + completed: 'تکمیل شده' + }; + return ( + + {labels[status as keyof typeof labels] || status} + + ); + }; + + return ( +
+
+
+
درخواست‌ها
+
ایجاد و مدیریت درخواست‌های خود
+
+ +
+ + + + ایجاد درخواست جدید + فرم ایجاد درخواست جدید + + +
+
+ عنوان + setTitle(e.target.value)} + disabled={isSubmitting} + /> +
+
+ توضیحات + setDescription(e.target.value)} + disabled={isSubmitting} + /> + </div> + <Button type="submit" className="w-full" disabled={isSubmitting}> + {isSubmitting ? ( + <> + <Loader2 className="ml-2 h-4 w-4 animate-spin" /> + در حال ایجاد... + </> + ) : ( + <> + <Plus className="ml-2 h-4 w-4" /> + ایجاد درخواست + </> + )} + </Button> + </form> + </CardContent> + </Card> + + <Card> + <CardHeader> + <CardTitle className="text-lg">فهرست درخواست‌ها</CardTitle> + <CardDescription className="text-sm"> + {loading ? 'در حال بارگذاری...' : `${requests.length} درخواست موجود است`} + </CardDescription> + </CardHeader> + <CardContent> + {loading ? ( + <div className="flex items-center justify-center py-8"> + <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" /> + </div> + ) : requests.length === 0 ? ( + <div className="text-center py-8 text-muted-foreground"> + درخواستی وجود ندارد + </div> + ) : ( + <div className="space-y-3"> + {requests.map((request) => ( + <Card key={request.id} className="border"> + <CardHeader> + <div className="flex items-start justify-between gap-2"> + <CardTitle className="text-base flex-1">{request.title}</CardTitle> + {getStatusBadge(request.status)} + </div> + <CardDescription> + {new Date(request.created_at).toLocaleDateString('fa-IR', { + year: 'numeric', + month: 'long', + day: 'numeric', + hour: '2-digit', + minute: '2-digit' + })} + </CardDescription> + </CardHeader> + <CardContent> + <p className="text-sm text-muted-foreground whitespace-pre-wrap"> + {request.description} + </p> + </CardContent> + </Card> + ))} + </div> + )} + </CardContent> + </Card> + </div> + </div> + </div> + ); +} + + + + diff --git a/src/services/supabase.ts b/src/services/supabase.ts new file mode 100644 index 0000000..944f2c4 --- /dev/null +++ b/src/services/supabase.ts @@ -0,0 +1,132 @@ +import { createClient } from '@supabase/supabase-js'; +import type { SupabaseClient } from '@supabase/supabase-js'; + +const supabaseUrl = import.meta.env.VITE_SUPABASE_URL || ''; +const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY || ''; + +// Check if Supabase is configured +export const isSupabaseConfigured = !!(supabaseUrl && supabaseAnonKey); + +// Create a mock Supabase client for offline mode +const createMockClient = (): SupabaseClient => { + const mockClient = { + auth: { + getSession: async () => ({ data: { session: null }, error: null }), + onAuthStateChange: () => ({ data: { subscription: { unsubscribe: () => {} } } }), + signInWithOAuth: async () => ({ data: null, error: { message: 'Supabase not configured' } }), + signInWithOtp: async () => ({ data: null, error: { message: 'Supabase not configured' } }), + verifyOtp: async () => ({ data: null, error: { message: 'Supabase not configured' } }), + signUp: async () => ({ data: null, error: { message: 'Supabase not configured' } }), + signInWithPassword: async () => ({ data: null, error: { message: 'Supabase not configured' } }), + signOut: async () => ({ error: null }) + }, + from: () => ({ + select: () => ({ + order: () => ({ limit: async () => ({ data: [], error: null }) }), + insert: () => ({ select: () => ({ single: async () => ({ data: null, error: { message: 'Supabase not configured' } }) }) }) + }), + on: () => ({ subscribe: () => ({ unsubscribe: () => {} }) }), + insert: () => ({ select: () => ({ single: async () => ({ data: null, error: { message: 'Supabase not configured' } }) }) }) + }), + channel: () => ({ + on: () => ({ + subscribe: () => ({ unsubscribe: () => {} }) + }) + }), + removeChannel: () => {} + } as unknown as SupabaseClient; + + return mockClient; +}; + +// Create real or mock client based on configuration +export const supabase = isSupabaseConfigured + ? createClient(supabaseUrl, supabaseAnonKey, { + auth: { + persistSession: true, + autoRefreshToken: true, + detectSessionInUrl: true + }, + global: { + headers: { + 'apikey': supabaseAnonKey + } + } + }) + : createMockClient(); + +if (!isSupabaseConfigured) { + console.warn('⚠️ Supabase environment variables are not set. Running in offline/mock mode.'); +} else { + // Test connection to Supabase (runs once on module load, but doesn't block) + // Use setTimeout to avoid blocking module initialization + setTimeout(() => { + testSupabaseConnection(); + }, 100); +} + +// Test Supabase connection without needing tables +async function testSupabaseConnection() { + if (!isSupabaseConfigured) return; + + try { + // Simple health check: try to get current session + // This doesn't require any tables, just checks if we can communicate with Supabase + const { data, error } = await supabase.auth.getSession(); + + if (error) { + console.error('❌ خطا در اتصال به Supabase:', error.message); + console.log('📋 اطلاعات اتصال:'); + console.log(' URL:', supabaseUrl); + console.log(' Key:', supabaseAnonKey ? `${supabaseAnonKey.substring(0, 20)}...` : 'not set'); + console.log('💡 نکته: اگر URL شما custom domain است، مطمئن شوید که به درستی پیکربندی شده است.'); + } else { + console.log('✅ اتصال به Supabase با موفقیت برقرار شد!'); + console.log('📋 اطلاعات اتصال:'); + console.log(' URL:', supabaseUrl); + console.log(' Session:', data.session ? 'فعال' : 'غیرفعال (کاربر لاگین نشده)'); + } + } catch (err) { + const errorMessage = err instanceof Error ? err.message : String(err); + console.error('❌ خطا در تست اتصال Supabase:', errorMessage); + console.log('📋 لطفاً بررسی کنید:'); + console.log(' 1. فایل .env درست تنظیم شده است؟'); + console.log(' 2. URL و Key صحیح هستند؟'); + console.log(' 3. اینترنت متصل است؟'); + console.log(' 4. اگر از custom domain استفاده می‌کنید، مطمئن شوید که CORS و تنظیمات درست است.'); + } +} + +// Database types (extend as needed) +export type Profile = { + id: string; + email?: string; + phone?: string; + full_name?: string; + avatar_url?: string; + created_at?: string; +}; + +export type Request = { + id: string; + user_id: string; + title: string; + description: string; + status: 'pending' | 'in_progress' | 'completed'; + created_at: string; + updated_at: string; +}; + +export type Message = { + id: string; + user_id: string; + content: string; + created_at: string; + user?: { + email?: string; + phone?: string; + full_name?: string; + avatar_url?: string; + }; +}; + diff --git a/src/styles/globals.css b/src/styles/globals.css new file mode 100644 index 0000000..a6459b7 --- /dev/null +++ b/src/styles/globals.css @@ -0,0 +1,80 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; + --primary: 221.2 83.2% 53.3%; + --primary-foreground: 210 40% 98%; + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + --ring: 221.2 83.2% 53.3%; + --radius: 0.5rem; + } + + .dark { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + --primary: 217.2 91.2% 59.8%; + --primary-foreground: 222.2 47.4% 11.2%; + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --ring: 224.3 76.3% 48%; + } +} + +/ Custom Font - فونت سفارشی / +@font-face { + font-family: 'IRAN Rounded'; + src: url('/fonts/IRAN Rounded.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@layer base { + { + border-color: hsl(var(--border)); + } + + body { + @apply bg-background text-foreground; + font-family: 'IRAN Rounded', 'Tahoma', 'Arial', system-ui, -apple-system, sans-serif; + } +} + +/* RTL Support */ +[dir='rtl'] { + direction: rtl; + text-align: right; +} + +[dir='ltr'] { + direction: ltr; + text-align: left; +} diff --git a/src/utils/cn.ts b/src/utils/cn.ts new file mode 100644 index 0000000..dda564c --- /dev/null +++ b/src/utils/cn.ts @@ -0,0 +1,17 @@ +import { type ClassValue, clsx } from 'clsx'; +import { twMerge } from 'tailwind-merge'; + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} + + + + + + + + + + + diff --git a/src/utils/constants.ts b/src/utils/constants.ts new file mode 100644 index 0000000..52acb32 --- /dev/null +++ b/src/utils/constants.ts @@ -0,0 +1,38 @@ +// Application constants +export const APP_NAME = 'PWA React App'; +export const APP_DESCRIPTION = 'Production-ready Progressive Web App'; + +// Route paths +export const ROUTES = { + HOME: '/', + ACCOUNT: '/account', + REQUEST: '/request', + CHAT: '/chat', + LOGIN: '/login', + SIGNUP: '/signup' +} as const; + +// Request statuses +export const REQUEST_STATUS = { + PENDING: 'pending', + IN_PROGRESS: 'in_progress', + COMPLETED: 'completed' +} as const; + +// Toast durations +export const TOAST_DURATION = { + SHORT: 3000, + MEDIUM: 5000, + LONG: 7000 +} as const; + + + + + + + + + + + diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..ab6fddd --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1,21 @@ +/// <reference types="vite/client" /> + +interface ImportMetaEnv { + readonly VITE_SUPABASE_URL: string; + readonly VITE_SUPABASE_ANON_KEY: string; +} + +interface ImportMeta { + readonly env: ImportMetaEnv; +} + + + + + + + + + + + diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..88e99ce --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,53 @@ +/** @type {import('tailwindcss').Config} */ +export default { + darkMode: ['class'], + content: [ + './index.html', + './src/**/.{js,ts,jsx,tsx}', + ], + theme: { + extend: { + colors: { + border: 'hsl(var(--border))', + input: 'hsl(var(--input))', + ring: 'hsl(var(--ring))', + background: 'hsl(var(--background))', + foreground: 'hsl(var(--foreground))', + primary: { + DEFAULT: 'hsl(var(--primary))', + foreground: 'hsl(var(--primary-foreground))', + }, + secondary: { + DEFAULT: 'hsl(var(--secondary))', + foreground: 'hsl(var(--secondary-foreground))', + }, + destructive: { + DEFAULT: 'hsl(var(--destructive))', + foreground: 'hsl(var(--destructive-foreground))', + }, + muted: { + DEFAULT: 'hsl(var(--muted))', + foreground: 'hsl(var(--muted-foreground))', + }, + accent: { + DEFAULT: 'hsl(var(--accent))', + foreground: 'hsl(var(--accent-foreground))', + }, + popover: { + DEFAULT: 'hsl(var(--popover))', + foreground: 'hsl(var(--popover-foreground))', + }, + card: { + DEFAULT: 'hsl(var(--card))', + foreground: 'hsl(var(--card-foreground))', + }, + }, + borderRadius: { + lg: 'var(--radius)', + md: 'calc(var(--radius) - 2px)', + sm: 'calc(var(--radius) - 4px)', + }, + }, + }, + plugins: [require('tailwindcss-animate')], +}; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..a1f1b3e --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,32 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + / Bundler mode / + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + + / Linting / + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + + / Path aliases / + "baseUrl": ".", + "paths": { + "@/": ["./src/*"] + } + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} + diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..e428d50 --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,11 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} + diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..1e1cf54 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,53 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import { VitePWA } from 'vite-plugin-pwa'; +import path from 'path'; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + react(), + VitePWA({ + registerType: 'autoUpdate', + includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'mask-icon.svg'], + manifest: { + name: 'PWA React App', + short_name: 'PWA App', + description: 'Production-ready Progressive Web App', + theme_color: '#ffffff', + background_color: '#ffffff', + display: 'standalone', + orientation: 'portrait', + scope: '/', + start_url: '/', + icons: [ + { + src: 'pwa-192x192.png', + sizes: '192x192', + type: 'image/png' + }, + { + src: 'pwa-512x512.png', + sizes: '512x512', + type: 'image/png' + }, + { + src: 'pwa-512x512.png', + sizes: '512x512', + type: 'image/png', + purpose: 'any maskable' + } + ] + }, + workbox: { + globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'] + } + }) + ], + resolve: { + alias: { + '@': path.resolve(__dirname, './src') + } + } +}); +