Qlockify/qlockify-frontend-deployment
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(demo): show sandbox status controls
Some checks failed
Frontend CI/CD / build (push) Has been cancelled
Details
Frontend CI/CD / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-06-07 00:51:50 +03:30
parent c6b1712486
commit a0190bc7ad
3 changed files with 131 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/Navbar.tsx
View File

@@ -3,13 +3,14 @@ import { useNavigate } from "react-router-dom"
import { useTranslation } from "../hooks/useTranslation"
import { Button } from "./ui/button"
import { SettingsMenu } from "./SettingsMenu"
import { LogOut, User, Moon, Sun, Globe, Command, Menu } from "lucide-react"
import { FlaskConical, LogOut, User, Moon, Sun, Globe, Command, Menu, RefreshCcw } from "lucide-react"
import { useTheme } from "./ThemeProvider"
import { logoutUser, getUserProfile } from "../api/users"
import { WorkspaceSelector } from "./WorkspaceSelector"
import { toast } from "sonner"
import { NotificationBell } from "./notifications/NotificationBell"
import { clearSessionTokens, getAccessToken, getRefreshToken } from "../lib/session"
import { clearSessionTokens, getAccessToken, getRefreshToken, setDemoSessionMeta, setSessionTokens } from "../lib/session"
import { startDemo } from "../api/demo"
type NavbarProps = {
onOpenSidebar?: () => void
@@ -22,6 +23,7 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
const [showLogoutModal, setShowLogoutModal] = useState(false)
const [isDropdownOpen, setIsDropdownOpen] = useState(false)
const [isResettingDemo, setIsResettingDemo] = useState(false)
const [user, setUser] = useState<any>(null)
const dropdownRef = useRef<HTMLDivElement>(null)
@@ -30,6 +32,13 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
const isDarkMode =
theme === "dark" ||
(theme === "system" && document.documentElement.classList.contains("dark"))
const isDemoUser = Boolean(user?.is_demo)
const demoExpiryLabel = user?.demo_expires_at
? new Intl.DateTimeFormat(isFa ? "fa-IR" : "en-US", {
dateStyle: "medium",
timeStyle: "short",
}).format(new Date(user.demo_expires_at))
: null
useEffect(() => {
const handleProfileUpdated = ((e: CustomEvent) => {
@@ -86,6 +95,23 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
}
}
const handleResetDemo = async () => {
if (isResettingDemo) return
setIsResettingDemo(true)
try {
const demo = await startDemo()
setSessionTokens(demo.access, demo.refresh)
setDemoSessionMeta(demo.expires_at)
toast.success(t.demo?.reset || "Fresh demo environment is ready.")
window.location.href = "/timesheet"
} catch (error) {
console.error("Demo reset failed:", error)
toast.error(t.demo?.startError || "Could not start the demo environment.")
} finally {
setIsResettingDemo(false)
}
}
const toggleTheme = () => {
setTheme(isDarkMode ? "light" : "dark")
}
@@ -142,6 +168,12 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
{/* Desktop navbar: keep the old controls here */}
<div className="hidden items-center gap-4 md:flex">
{user && <WorkspaceSelector />}
{isDemoUser && (
<div className="inline-flex items-center gap-2 rounded-full border border-cyan-200 bg-cyan-50 px-3 py-2 text-xs font-semibold text-cyan-800 dark:border-cyan-500/20 dark:bg-cyan-500/10 dark:text-cyan-100">
<FlaskConical className="h-4 w-4" />
<span>{t.demo?.badge || "Demo environment"}</span>
</div>
)}
{user ? (
<>
@@ -178,8 +210,24 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
? `${user.first_name || ""} ${user.last_name || ""}`.trim()
: user.email}
</p>
{isDemoUser && demoExpiryLabel && (
<p className="mt-1 text-xs text-cyan-700 dark:text-cyan-300">
{(t.demo?.expiresAt || "Expires at")}: {demoExpiryLabel}
</p>
)}
</div>
{isDemoUser && (
<button
onClick={handleResetDemo}
disabled={isResettingDemo}
className="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-cyan-700 transition-colors hover:bg-cyan-50 disabled:cursor-not-allowed disabled:opacity-70 dark:text-cyan-300 dark:hover:bg-cyan-950/40"
>
<RefreshCcw className="h-4 w-4" />
<span>{isResettingDemo ? t.demo?.starting || "Preparing demo..." : t.demo?.resetAction || "Reset demo"}</span>
</button>
)}
<button
onClick={() => {
navigate("/profile")

78
src/components/Sidebar.tsx
View File

@@ -17,6 +17,8 @@ import {
Globe,
LogOut,
LogIn,
FlaskConical,
RefreshCcw,
} from "lucide-react"
import { toast } from "sonner"
@@ -27,7 +29,8 @@ import { WorkspaceSelector } from "./WorkspaceSelector"
import { SettingsMenu } from "./SettingsMenu"
import { Button } from "./ui/button"
import { getUserProfile, logoutUser } from "../api/users"
import { clearSessionTokens, getAccessToken, getRefreshToken } from "../lib/session"
import { clearSessionTokens, getAccessToken, getRefreshToken, setDemoSessionMeta, setSessionTokens } from "../lib/session"
import { startDemo } from "../api/demo"
type SidebarProps = {
mobileOpen?: boolean
@@ -37,6 +40,7 @@ type SidebarProps = {
export const Sidebar = ({ mobileOpen = false, onMobileClose }: SidebarProps) => {
const [isCollapsed, setIsCollapsed] = useState(false)
const [showLogoutModal, setShowLogoutModal] = useState(false)
const [isResettingDemo, setIsResettingDemo] = useState(false)
const [user, setUser] = useState<any>(null)
const navigate = useNavigate()
@@ -47,6 +51,13 @@ export const Sidebar = ({ mobileOpen = false, onMobileClose }: SidebarProps) =>
const isRtl = lang === "fa"
const canViewLogs = canWorkspace(activeWorkspace?.my_role, WORKSPACE_LOGS_VIEW)
const isDemoUser = Boolean(user?.is_demo)
const demoExpiryLabel = user?.demo_expires_at
? new Intl.DateTimeFormat(isRtl ? "fa-IR" : "en-US", {
dateStyle: "medium",
timeStyle: "short",
}).format(new Date(user.demo_expires_at))
: null
const ToggleIcon = isRtl
? isCollapsed
@@ -101,6 +112,23 @@ export const Sidebar = ({ mobileOpen = false, onMobileClose }: SidebarProps) =>
}
}
const handleResetDemo = async () => {
if (isResettingDemo) return
setIsResettingDemo(true)
try {
const demo = await startDemo()
setSessionTokens(demo.access, demo.refresh)
setDemoSessionMeta(demo.expires_at)
toast.success(t.demo?.reset || "Fresh demo environment is ready.")
window.location.href = "/timesheet"
} catch (error) {
console.error("Demo reset failed:", error)
toast.error(t.demo?.startError || "Could not start the demo environment.")
} finally {
setIsResettingDemo(false)
}
}
const toggleLanguage = () => {
const newLang = isRtl ? "en" : "fa"
@@ -199,6 +227,19 @@ export const Sidebar = ({ mobileOpen = false, onMobileClose }: SidebarProps) =>
<div className="w-full">
<WorkspaceSelector className="w-full" />
</div>
{isDemoUser && (
<div className="mt-3 rounded-2xl border border-cyan-200 bg-cyan-50 p-3 text-xs font-medium text-cyan-800 dark:border-cyan-500/20 dark:bg-cyan-500/10 dark:text-cyan-100">
<div className="flex items-center gap-2 font-semibold">
<FlaskConical className="h-4 w-4" />
{t.demo?.badge || "Demo environment"}
</div>
{demoExpiryLabel && (
<div className="mt-1 text-cyan-700 dark:text-cyan-300">
{(t.demo?.expiresAt || "Expires at")}: {demoExpiryLabel}
</div>
)}
</div>
)}
</div>
)
}
@@ -256,6 +297,19 @@ export const Sidebar = ({ mobileOpen = false, onMobileClose }: SidebarProps) =>
</span>
</button>
{isDemoUser && (
<button
onClick={handleResetDemo}
disabled={isResettingDemo}
className="flex w-full items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium text-cyan-700 transition-colors hover:bg-cyan-50 disabled:cursor-not-allowed disabled:opacity-70 dark:text-cyan-300 dark:hover:bg-cyan-950/40"
>
<RefreshCcw size={20} className="shrink-0" />
<span className="truncate whitespace-nowrap">
{isResettingDemo ? t.demo?.starting || "Preparing demo..." : t.demo?.resetAction || "Reset demo"}
</span>
</button>
)}
<button
onClick={() => setShowLogoutModal(true)}
className="flex w-full items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 dark:text-red-500 dark:hover:bg-red-950/50"
@@ -300,6 +354,28 @@ export const Sidebar = ({ mobileOpen = false, onMobileClose }: SidebarProps) =>
</div>
<nav className="flex-1 space-y-1 overflow-y-auto overflow-x-hidden p-4">
{isDemoUser && !isCollapsed && (
<div className="mb-3 rounded-2xl border border-cyan-200 bg-cyan-50 p-3 text-xs font-medium text-cyan-800 dark:border-cyan-500/20 dark:bg-cyan-500/10 dark:text-cyan-100">
<div className="flex items-center gap-2 font-semibold">
<FlaskConical className="h-4 w-4" />
{t.demo?.badge || "Demo environment"}
</div>
{demoExpiryLabel && (
<div className="mt-1 text-cyan-700 dark:text-cyan-300">
{(t.demo?.expiresAt || "Expires at")}: {demoExpiryLabel}
</div>
)}
<button
type="button"
onClick={handleResetDemo}
disabled={isResettingDemo}
className="mt-2 inline-flex items-center gap-2 rounded-full bg-cyan-600 px-3 py-1.5 text-white transition hover:bg-cyan-700 disabled:cursor-not-allowed disabled:opacity-70 dark:bg-cyan-400 dark:text-slate-950 dark:hover:bg-cyan-300"
>
<RefreshCcw className="h-3.5 w-3.5" />
{isResettingDemo ? t.demo?.starting || "Preparing demo..." : t.demo?.resetAction || "Reset demo"}
</button>
</div>
)}
{renderNavItems(false)}
</nav>
</aside>

2
src/context/AppContext.tsx
View File

@@ -8,6 +8,8 @@ interface User {
last_name: string;
email?: string;
profile_picture?: string | null;
is_demo?: boolean;
demo_expires_at?: string | null;
}
interface AppContextType {