initial commit

src/pages/Auth.tsx

@@ -0,0 +1,233 @@
+import React, { useState } from "react"
+import { useNavigate, Link } from "react-router-dom"
+import { Button } from "../components/ui/button"
+import { Input } from "../components/ui/input"
+import { SettingsMenu } from "../components/SettingsMenu"
+import { ArrowLeft, ArrowRight, Command, Loader2, Eye, EyeOff } from "lucide-react"
+import { toast } from "sonner"
+import { useTranslation } from "../hooks/useTranslation"
+import { loginWithPassword, sendOtp, loginWithOtp } from "../api/users"
+
+type AuthStep = "mobile" | "password" | "otp"
+type AuthMode = "login" | "register"
+
+export default function Auth() {
+  const navigate = useNavigate()
+  const { t, lang } = useTranslation()
+  const isRtl = lang === "fa"
+  
+  const [step, setStep] = useState<AuthStep>("mobile")
+  const [mode, setMode] = useState<AuthMode>("login")
+  const [mobile, setMobile] = useState("")
+  const [password, setPassword] = useState("")
+  const [otpCode, setOtpCode] = useState("")
+  const [loading, setLoading] = useState(false)
+  const [showPassword, setShowPassword] = useState(false) // Added state for password visibility
+
+  const handleTokenResponse = (access: string, refresh: string) => {
+    localStorage.setItem("accessToken", access)
+    localStorage.setItem("refreshToken", refresh)
+    toast.success(t.login.toasts.successLogin)
+    navigate("/profile")
+  }
+
+  const handleSendOtp = async (selectedMode: AuthMode) => {
+    if (!mobile) return toast.error(t.login.toasts.enterMobile)
+    setLoading(true)
+    
+    try {
+      await sendOtp(mobile, selectedMode)
+      setMode(selectedMode)
+      setStep("otp")
+      toast.success(t.login.toasts.verifySent)
+    } catch (err: any) {
+      toast.error(t.login.toasts.failedOtp)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handlePasswordLogin = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!mobile || !password) return toast.error(t.login.toasts.fillAll)
+    setLoading(true)
+
+    try {
+      const data = await loginWithPassword(mobile, password)
+      handleTokenResponse(data.access, data.refresh)
+    } catch (err: any) {
+      toast.error(t.login.toasts.invalidCreds)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleOtpVerify = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!mobile || !otpCode) return toast.error(t.login.toasts.enterOtp)
+    setLoading(true)
+
+    try {
+      const data = await loginWithOtp(mobile, otpCode)
+      handleTokenResponse(data.access, data.refresh)
+    } catch (err: any) {
+      toast.error(t.login.toasts.invalidOtp)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const BackIcon = isRtl ? ArrowRight : ArrowLeft
+
+  return (
+    <div className="container relative min-h-screen flex-col items-center justify-center grid lg:max-w-none lg:grid-cols-2 lg:px-0 bg-white dark:bg-slate-950 transition-colors">
+      
+      <div className="absolute inset-e-4 top-4 z-50 md:inset-e-8 md:top-8">
+        <SettingsMenu />
+      </div>
+
+      <div className="relative hidden h-full flex-col bg-slate-900 dark:bg-slate-900/50 p-10 text-white lg:flex border-e border-slate-200 dark:border-slate-800">
+        <div className="relative z-20 flex items-center text-lg font-medium gap-2">
+          <Command className="h-6 w-6" />
+          Qlockify
+        </div>
+        <div className="relative z-20 mt-auto">
+          <blockquote className="space-y-2">
+            <p className="text-lg">"{t.login.brandingQuote}"</p>
+          </blockquote>
+        </div>
+      </div>
+
+      <div className="p-8 lg:p-8 flex h-screen items-center justify-center">
+        <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-87.5">
+          
+          <div className="flex flex-col space-y-2 text-center text-slate-900 dark:text-slate-50">
+            <div className="flex justify-center lg:hidden mb-4">
+              <Command className="h-8 w-8" />
+            </div>
+            <h1 className="text-2xl font-semibold tracking-tight">
+              {step === "mobile" && t.login.welcome}
+              {step === "password" && t.login.enterPassword}
+              {step === "otp" && t.login.verifyNumber}
+            </h1>
+            <p className="text-sm text-slate-500 dark:text-slate-400">
+              {step === "mobile" && t.login.enterMobileDesc}
+              {step === "password" && t.login.signInDesc}
+              {step === "otp" && t.login.sentCodeDesc(mobile)}
+            </p>
+          </div>
+
+          <div className="grid gap-6">
+            {step === "mobile" && (
+              <div className="grid gap-4">
+                <Input
+                  id="mobile"
+                  placeholder={t.login.mobilePlaceholder}
+                  type="tel"
+                  dir="ltr"
+                  value={mobile}
+                  onChange={(e) => setMobile(e.target.value)}
+                  maxLength={11}
+                  disabled={loading}
+                  className={`h-11 ${isRtl ? "text-end" : "text-start"}`}
+                />
+                <Button onClick={() => { if (!mobile) return toast.error(t.login.toasts.enterMobile); setStep("password") }} className="w-full h-11">
+                  {t.login.continueWithPassword}
+                </Button>
+
+                <div className="relative">
+                  <div className="absolute inset-0 flex items-center">
+                    <span className="w-full border-t border-slate-200 dark:border-slate-800" />
+                  </div>
+                  <div className="relative flex justify-center text-xs uppercase">
+                    <span className="bg-white dark:bg-slate-950 px-2 text-slate-500 dark:text-slate-400 transition-colors">
+                      {t.login.orContinueWith}
+                    </span>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <Button variant="outline" onClick={() => handleSendOtp("login")} disabled={loading} className="h-11">
+                    {loading && mode === "login" && <Loader2 className="me-2 h-4 w-4 animate-spin" />}
+                    {t.login.otpLogin}
+                  </Button>
+                  <Button variant="outline" onClick={() => handleSendOtp("register")} disabled={loading} className="h-11">
+                    {loading && mode === "register" && <Loader2 className="me-2 h-4 w-4 animate-spin" />}
+                    {t.login.register}
+                  </Button>
+                </div>
+              </div>
+            )}
+
+            {step === "password" && (
+              <form onSubmit={handlePasswordLogin} autoComplete="off" className="grid gap-4">
+                <div className="relative w-full" dir="ltr">
+                  <Input
+                    id="password"
+                    placeholder={t.login.passwordPlaceholder}
+                    type={showPassword ? "text" : "password"}
+                    autoComplete="new-password"
+                    dir="ltr"
+                    name="some-random-name-to-disable-auto-complete-on-browser"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    disabled={loading}
+                    className={`h-11 pr-10 ${isRtl ? "text-end" : "text-start"}`}
+                  />
+                  <button
+                    type="button"
+                    tabIndex={-1}
+                    onClick={() => setShowPassword((prev) => !prev)}
+                    className="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300"
+                  >
+                    {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                  </button>
+                </div>
+                <Button type="submit" className="w-full h-11" disabled={loading}>
+                  {loading && <Loader2 className="me-2 h-4 w-4 animate-spin" />} {t.login.signIn}
+                </Button>
+                <Button type="button" variant="ghost" onClick={() => setStep("mobile")} className="text-sm text-slate-500 dark:text-slate-400">
+                  <BackIcon className="me-2 h-4 w-4" /> {t.login.back}
+                </Button>
+              </form>
+            )}
+
+            {step === "otp" && (
+              <form onSubmit={handleOtpVerify} className="grid gap-4">
+                <Input
+                  id="otp"
+                  placeholder={t.login.otpPlaceholder}
+                  type="text"
+                  dir="ltr"
+                  value={otpCode}
+                  onChange={(e) => setOtpCode(e.target.value)}
+                  maxLength={6}
+                  disabled={loading}
+                  className="h-11 text-center tracking-widest text-lg"
+                />
+                <Button type="submit" className="w-full h-11" disabled={loading}>
+                  {loading && <Loader2 className="me-2 h-4 w-4 animate-spin" />} {t.login.verifyAndContinue}
+                </Button>
+                <Button type="button" variant="ghost" onClick={() => setStep("mobile")} className="text-sm text-slate-500 dark:text-slate-400">
+                  <BackIcon className="me-2 h-4 w-4" /> {t.login.back}
+                </Button>
+              </form>
+            )}
+          </div>
+
+          <div className="mt-6 text-center text-sm text-slate-500 dark:text-slate-400">
+            {t.loginTerms?.prefix}
+            <Link 
+              to="/terms" 
+              className="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300 transition-colors"
+            >
+              {t.loginTerms?.link}
+            </Link>
+            {t.loginTerms?.suffix}
+          </div>
+
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/Profile.tsx

@@ -0,0 +1,423 @@
+import { useEffect, useState, useRef } from "react"
+import { useNavigate } from "react-router-dom"
+import { useTranslation } from "../hooks/useTranslation"
+import { 
+  getUserProfile, 
+  updateUserProfile, 
+  updateProfilePicture, 
+  removeProfilePicture 
+} from "../api/users"
+import { Button } from "../components/ui/button"
+import { Camera, Edit2, Trash2, User as UserIcon, UploadCloud } from "lucide-react"
+import JalaliDatePicker from "../components/ui/JalaliDatePicker"
+import { toast } from "sonner"
+
+export interface UserProfile {
+  id?: string;
+  email?: string;
+  mobile?: string;
+  first_name?: string;
+  last_name?: string;
+  full_name?: string;
+  description?: string;
+  birth_date?: string;
+  age?: number;
+  profile_picture?: string;
+  created_at?: string;
+}
+
+export default function Profile() {
+  const navigate = useNavigate()
+  const [user, setUser] = useState<UserProfile | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+
+  const { t, lang } = useTranslation()
+  const isFa = lang === 'fa'
+  
+  const toPersianNum = (num: string | number | undefined | null) => {
+    if (num === null || num === undefined) return num
+    if (!isFa) return num
+    return num.toString().replace(/\d/g, d => '۰۱۲۳۴۵۶۷۸۹'[d as any])
+  }
+
+  const formatDate = (dateStr: string | undefined) => {
+    if (!dateStr) return "-"
+    try {
+      const date = new Date(dateStr)
+      return new Intl.DateTimeFormat(isFa ? 'fa-IR' : 'en-US', {
+        dateStyle: 'long',
+        timeZone: 'Asia/Tehran'
+      }).format(date)
+    } catch (e) {
+      return dateStr
+    }
+  }
+
+  // Modals state
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false)
+  const [isPicModalOpen, setIsPicModalOpen] = useState(false)
+  const [isSaving, setIsSaving] = useState(false)
+
+  // Form states
+  const [formData, setFormData] = useState<Partial<UserProfile>>({})
+  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+  const [dragActive, setDragActive] = useState(false)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const fetchProfile = async () => {
+    try {
+      const data = await getUserProfile()
+      setUser(data)
+    } catch (error) {
+      navigate("/login")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchProfile()
+  }, [])
+
+  const handleEditClick = () => {
+    if (user) {
+      setFormData({
+        first_name: user.first_name || "",
+        last_name: user.last_name || "",
+        email: user.email || "",
+        description: user.description || "",
+        birth_date: user.birth_date || "",
+      })
+      setIsEditModalOpen(true)
+    }
+  }
+
+  const handleSaveProfile = async () => {
+    setIsSaving(true)
+    try {
+      const payload: Record<string, any> = {}
+      
+      Object.entries(formData).forEach(([key, value]) => {
+        if (key === "birth_date" && value === "") {
+          payload[key] = null 
+        } else if (value !== undefined && value !== null) {
+          payload[key] = value
+        }
+      })
+      
+      const updatedUser = await updateUserProfile(payload)
+      setUser(prev => prev ? { ...prev, ...updatedUser } : updatedUser)
+      setIsEditModalOpen(false)
+      toast.success(t.profile.toasts.successEdit)
+    } catch (error) {
+      toast.error(t.profile.toasts.error)
+      console.error("Failed to update profile", error)
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  const handlePictureUpload = async () => {
+    if (!selectedFile) return
+    setIsSaving(true)
+    try {
+      const response = await updateProfilePicture(selectedFile)
+      setUser(prev => prev ? { ...prev, profile_picture: response.profile_picture } : response)
+      setIsPicModalOpen(false)
+      setSelectedFile(null)
+      toast.success(t.profile.toasts.successImage)
+    } catch (error) {
+      toast.error(t.profile.toasts.error)
+      console.error("Failed to upload picture", error)
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  const handleDeletePicture = async () => {
+    setIsSaving(true)
+    try {
+      const response = await removeProfilePicture()
+      setUser(prev => prev ? { ...prev, profile_picture: response.profile_picture || null } : response)
+      setIsPicModalOpen(false)
+      toast.success(t.profile.toasts.successRemoveImage)
+    } catch (error) {
+      toast.error(t.profile.toasts.error)
+      console.error("Failed to delete picture", error)
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  // Drag & Drop Handlers
+  const handleDrag = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (e.type === "dragenter" || e.type === "dragover") {
+      setDragActive(true)
+    } else if (e.type === "dragleave") {
+      setDragActive(false)
+    }
+  }
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setDragActive(false)
+    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+      setSelectedFile(e.dataTransfer.files[0])
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <>
+        <div className="flex min-h-[calc(100vh-73px)] items-center justify-center bg-slate-50 dark:bg-slate-950 transition-colors">
+          <div className="text-slate-500 dark:text-slate-400">Loading...</div>
+        </div>
+      </>
+    )
+  }
+
+  if (!user) return null
+
+  return (
+    <>
+      <div className="min-h-[calc(100vh-73px)] bg-slate-50 dark:bg-slate-950 p-6 transition-colors">
+        <div className="mx-auto max-w-3xl space-y-6">
+          
+          {/* Header Card */}
+          <div className="flex flex-col md:flex-row items-center gap-6 rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 shadow-sm">
+            
+            <div className="relative group cursor-pointer" onClick={() => setIsPicModalOpen(true)}>
+              <div className="h-24 w-24 overflow-hidden rounded-full bg-slate-200 dark:bg-slate-800 flex items-center justify-center border-4 border-white dark:border-slate-900 shadow-sm">
+                {user.profile_picture ? (
+                  <img src={user.profile_picture} alt="Profile" className="h-full w-full object-cover" />
+                ) : (
+                  <UserIcon className="h-10 w-10 text-slate-400" />
+                )}
+              </div>
+              <div className="absolute inset-0 flex items-center justify-center rounded-full bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity">
+                <Camera className="h-6 w-6 text-white" />
+              </div>
+            </div>
+
+            <div className="flex-1 text-center md:text-start">
+              <h1 className="text-2xl font-bold text-slate-900 dark:text-white">
+                {user.full_name || "-"}
+              </h1>
+              <p className="text-slate-500 dark:text-slate-400 mt-1">{user.email || "-"}</p>
+            </div>
+
+            <Button onClick={handleEditClick} className="flex items-center gap-2">
+              <Edit2 className="h-4 w-4" />
+              {t.profile?.editInfo || 'Edit Profile'}
+            </Button>
+          </div>
+
+          {/* Details Card */}
+          <div className="rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 shadow-sm">
+            <h2 className="text-lg font-bold text-slate-900 dark:text-white mb-6 border-b border-slate-100 dark:border-slate-800 pb-4">
+              {t.profile?.title || 'Personal Information'}
+            </h2>
+            
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div className="space-y-1">
+                <span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.profile?.firstName || 'First Name'}</span>
+                <p className="font-medium text-slate-900 dark:text-slate-100">{user.first_name || "-"}</p>
+              </div>
+              <div className="space-y-1">
+                <span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.profile?.lastName || 'Last Name'}</span>
+                <p className="font-medium text-slate-900 dark:text-slate-100">{user.last_name || "-"}</p>
+              </div>
+              <div className="space-y-1">
+                <span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.profile?.mobileNumber || 'Mobile'}</span>
+                <p className="font-medium text-slate-900 dark:text-slate-100 flex items-center">
+                  {toPersianNum(user.mobile)}
+                </p>
+              </div>
+              <div className="space-y-1">
+                <span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.profile?.birthDate || 'Birth Date'}</span>
+                <p className="font-medium text-slate-900 dark:text-slate-100">
+                  {formatDate(user.birth_date)} {user.age ? `(${toPersianNum(user.age)} ${t.profile?.yearsOld})` : ""}
+                </p>
+              </div>
+              <div className="space-y-1 md:col-span-2">
+                <span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.profile?.description || 'Description'}</span>
+                <p className="font-medium text-slate-900 dark:text-slate-100 whitespace-pre-wrap">{user.description || "-"}</p>
+              </div>
+              {user.created_at && (
+                <div className="space-y-1 md:col-span-2">
+                  <span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.profile?.dateJoined || 'Date Joined'}</span>
+                  <p className="font-medium text-slate-900 dark:text-slate-100">
+                    {formatDate(user.created_at)}
+                  </p>
+                </div>
+              )}
+            </div>
+          </div>
+
+        </div>
+
+        {/* Edit Profile Modal */}
+        {isEditModalOpen && (
+          <div 
+            className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm px-4"
+            onClick={() => !isSaving && setIsEditModalOpen(false)}
+          >
+            <div 
+              className="w-full max-w-lg rounded-xl bg-white p-6 shadow-lg dark:bg-slate-900 border dark:border-slate-800"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <h2 className="mb-4 text-xl font-bold text-slate-900 dark:text-white">
+                {t.profile?.editInfo || 'Edit Profile'}
+              </h2>
+              
+              <div className="space-y-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="text-sm font-medium dark:text-slate-300">{t.profile?.firstName || 'First Name'}</label>
+                    <input
+                      type="text"
+                      value={formData.first_name || ""}
+                      onChange={(e) => setFormData({ ...formData, first_name: e.target.value })}
+                      className="mt-1 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm dark:border-slate-700 dark:text-white"
+                    />
+                  </div>
+                  <div>
+                    <label className="text-sm font-medium dark:text-slate-300">{t.profile?.lastName || 'Last Name'}</label>
+                    <input
+                      type="text"
+                      value={formData.last_name || ""}
+                      onChange={(e) => setFormData({ ...formData, last_name: e.target.value })}
+                      className="mt-1 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm dark:border-slate-700 dark:text-white"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label className="text-sm font-medium dark:text-slate-300">{t.profile?.email || 'Email'}</label>
+                  <input
+                    type="email"
+                    value={formData.email || ""}
+                    onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                    className="mt-1 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm dark:border-slate-700 dark:text-white flex-row-reverse"
+                    dir="ltr"
+                  />
+                </div>
+
+                <JalaliDatePicker
+                  label={t.profile?.birthDate || 'Birth Date'}
+                  value={formData.birth_date}
+                  onChange={(date) => setFormData({ ...formData, birth_date: date })}
+                  disabled={isSaving}
+                />
+
+                <div>
+                  <label className="text-sm font-medium dark:text-slate-300">{t.profile?.description || 'Description'}</label>
+                  <textarea
+                    rows={3}
+                    value={formData.description || ""}
+                    onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                    className="mt-1 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm dark:border-slate-700 dark:text-white resize-none"
+                  />
+                </div>
+              </div>
+
+              <div className="mt-6 flex justify-end gap-3">
+                <Button variant="outline" onClick={() => setIsEditModalOpen(false)} disabled={isSaving}>
+                  {t.profile?.cancel || t.cancel || 'Cancel'}
+                </Button>
+                <Button onClick={handleSaveProfile} disabled={isSaving}>
+                  {isSaving ? '...' : (t.profile?.save || 'Save')}
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Profile Picture Modal */}
+        {isPicModalOpen && (
+          <div 
+            className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm px-4"
+            onClick={() => !isSaving && setIsPicModalOpen(false)}
+          >
+            <div 
+              className="w-full max-w-sm rounded-xl bg-white p-6 shadow-lg dark:bg-slate-900 border dark:border-slate-800"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <h2 className="mb-4 text-xl font-bold text-slate-900 dark:text-white">
+                {t.profile?.changePicture || 'Profile Picture'}
+              </h2>
+              
+              <div className="space-y-4">
+                
+                {/* Drag and Drop Zone */}
+                <div 
+                  onDragEnter={handleDrag}
+                  onDragLeave={handleDrag}
+                  onDragOver={handleDrag}
+                  onDrop={handleDrop}
+                  onClick={() => fileInputRef.current?.click()}
+                  className={`relative flex flex-col items-center justify-center w-full h-48 border-2 border-dashed rounded-xl cursor-pointer transition-colors ${
+                    dragActive 
+                      ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20" 
+                      : "border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 hover:bg-slate-100 dark:hover:bg-slate-800/80"
+                  }`}
+                >
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept="image/*"
+                    className="hidden"
+                    onChange={(e) => setSelectedFile(e.target.files?.[0] || null)}
+                  />
+                  
+                  {selectedFile ? (
+                    <div className="absolute inset-0 p-2">
+                      <img 
+                        src={URL.createObjectURL(selectedFile)} 
+                        alt="Preview" 
+                        className="w-full h-full object-contain rounded-lg" 
+                      />
+                    </div>
+                  ) : (
+                    <div className="flex flex-col items-center text-center p-4">
+                      <UploadCloud className="h-10 w-10 text-slate-400 mb-2" />
+                      <p className="text-sm font-medium text-slate-700 dark:text-slate-300">
+                        { t.profile?.imageInput }
+                      </p>
+                      <p className="text-xs text-slate-500 mt-1">
+                        SVG, PNG, JPG (MAX. 800x400px)
+                      </p>
+                    </div>
+                  )}
+                </div>
+
+                <div className="flex flex-col gap-2 mt-4">
+                  <Button onClick={handlePictureUpload} disabled={!selectedFile || isSaving} className="w-full">
+                    {t.profile?.upload || 'Upload'}
+                  </Button>
+                  
+                  {user.profile_picture && (
+                    <Button variant="destructive" onClick={handleDeletePicture} disabled={isSaving} className="w-full flex items-center justify-center gap-2">
+                      <Trash2 className="h-4 w-4" />
+                      {t.profile?.remove || "Remove"}
+                    </Button>
+                  )}
+                </div>
+              </div>
+
+              <div className="mt-6 flex justify-end">
+                <Button variant="outline" onClick={() => setIsPicModalOpen(false)} disabled={isSaving}>
+                  {t.profile?.cancel || t.cancel || 'Cancel'}
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+
+      </div>
+    </>
+  )
+}

src/pages/Terms.tsx

@@ -0,0 +1,88 @@
+import { useNavigate } from "react-router-dom"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+import { Button } from "../components/ui/button"
+import { useTranslation } from "../hooks/useTranslation"
+
+export default function Terms() {
+  const navigate = useNavigate()
+  const { t, lang } = useTranslation()
+  const isFa = lang === "fa"
+
+  return (
+    <div className="min-h-screen bg-slate-50 dark:bg-slate-950 transition-colors py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-3xl mx-auto bg-white dark:bg-slate-900 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 p-8">
+        <Button 
+          variant="ghost" 
+          onClick={() => navigate(-1)} 
+          className={`mb-6 text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-50 ${isFa ? '-mr-4' : '-ml-4'}`}
+        >
+          {isFa ? <ArrowRight className="ml-2 h-4 w-4" /> : <ArrowLeft className="mr-2 h-4 w-4" />}
+          {t.terms?.back || "Back"}
+        </Button>
+
+        <h1 className="text-3xl font-bold text-slate-900 dark:text-white mb-2">
+          {t.terms?.title}
+        </h1>
+        <p className="text-sm text-slate-500 dark:text-slate-400 mb-8">
+          {t.terms?.lastUpdated}
+        </p>
+
+        <div className="space-y-6 text-slate-700 dark:text-slate-300">
+          <section>
+            <h2 className="text-xl font-semibold text-slate-900 dark:text-white mb-3">
+              {t.terms?.sections?.acceptance?.title}
+            </h2>
+            <p>{t.terms?.sections?.acceptance?.content}</p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-semibold text-slate-900 dark:text-white mb-3">
+              {t.terms?.sections?.license?.title}
+            </h2>
+            <ul className="list-disc px-5 space-y-2">
+              {t.terms?.sections?.license?.items?.map((item: string, index: number) => (
+                <li key={index}>{item}</li>
+              ))}
+            </ul>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-semibold text-slate-900 dark:text-white mb-3">
+              {t.terms?.sections?.privacy?.title}
+            </h2>
+            <p className="mb-2">{t.terms?.sections?.privacy?.p1}</p>
+            <ul className="list-disc px-5 space-y-2">
+              <li>
+                <strong className="text-slate-900 dark:text-white font-semibold">
+                  {t.terms?.sections?.privacy?.personalLabel}:{" "}
+                </strong>
+                {t.terms?.sections?.privacy?.personalText}
+              </li>
+              <li>
+                <strong className="text-slate-900 dark:text-white font-semibold">
+                  {t.terms?.sections?.privacy?.usageLabel}:{" "}
+                </strong>
+                {t.terms?.sections?.privacy?.usageText}
+              </li>
+            </ul>
+            <p className="mt-2">{t.terms?.sections?.privacy?.p2}</p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-semibold text-slate-900 dark:text-white mb-3">
+              {t.terms?.sections?.liability?.title}
+            </h2>
+            <p>{t.terms?.sections?.liability?.content}</p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-semibold text-slate-900 dark:text-white mb-3">
+              {t.terms?.sections?.modifications?.title}
+            </h2>
+            <p>{t.terms?.sections?.modifications?.content}</p>
+          </section>
+        </div>
+      </div>
+    </div>
+  )
+}