refactor(auth): replace escaped persian digits

feat(projects): expose implicit-access roles in projects and rates modal
2026-05-24 11:17:55 +03:30 · 2026-05-24 10:31:32 +03:30
8 changed files with 247 additions and 157 deletions
--- a/src/api/projects.ts
+++ b/src/api/projects.ts
@@ -47,7 +47,7 @@ export interface ProjectAccessItem {

 export interface ProjectAccessState {
  workspace: { id: string; name: string };
-  user: { id: string; name: string; mobile: string; role: "member" | "guest" };
+  user: { id: string; name: string; mobile: string; role: "owner" | "admin" | "member" | "guest" };
  items: ProjectAccessItem[];
 }

--- a/src/components/projects/ProjectAccessModal.tsx
+++ b/src/components/projects/ProjectAccessModal.tsx
@@ -69,6 +69,7 @@ type Labels = {
  projectRateRemoved: string;
  projectRateSaveError: string;
  projectRateRemoveError: string;
+  implicitAccessHint: string;
 };

 type RateDraft = {
@@ -76,8 +77,6 @@ type RateDraft = {
  currency: string;
 };

-const MANAGEABLE_ROLES = new Set(["member", "guest"]);
-
 function getMemberName(member: WorkspaceMembership) {
  return (
    member.user?.name ||
@@ -132,22 +131,23 @@ export function ProjectAccessModal({
  const [savingRateProjectId, setSavingRateProjectId] = useState<string | null>(null);
  const [priceUnits, setPriceUnits] = useState<PriceUnit[]>([]);
  const [rateDrafts, setRateDrafts] = useState<Record<string, RateDraft>>({});
+  const [selectedUserRole, setSelectedUserRole] = useState<"owner" | "admin" | "member" | "guest" | "">("");
  const { lang } = useTranslation();
  const isRtl =
    typeof document !== "undefined" && document.documentElement.dir === "rtl";

  const defaultCurrency = priceUnits[0]?.code || "USD";

-  const manageableMembers = useMemo(
-    () => members.filter((member) => member.is_active && MANAGEABLE_ROLES.has(member.role)),
+  const activeMembers = useMemo(
+    () => members.filter((member) => member.is_active),
    [members],
  );

  const filteredMembers = useMemo(() => {
    const normalizedSearch = memberSearchQuery.trim().toLowerCase();
    const baseMembers = !normalizedSearch
-      ? manageableMembers
-      : manageableMembers.filter((member) => {
+      ? activeMembers
+      : activeMembers.filter((member) => {
          const memberName = getMemberName(member).toLowerCase();
          const memberMobile = member.user?.mobile?.toLowerCase() ?? "";
          return memberName.includes(normalizedSearch) || memberMobile.includes(normalizedSearch);
@@ -158,7 +158,9 @@ export function ProjectAccessModal({
      if (b.user.id === selectedUserId) return 1;
      return 0;
    });
-  }, [manageableMembers, memberSearchQuery, selectedUserId]);
+  }, [activeMembers, memberSearchQuery, selectedUserId]);
+
+  const canManageExplicitAccess = selectedUserRole === "member" || selectedUserRole === "guest";

  const clientOptions = useMemo(() => {
    const map = new Map<string, string>();
@@ -246,14 +248,14 @@ export function ProjectAccessModal({
  }, [isOpen, labels.loadError, workspaceId]);

  useEffect(() => {
-    if (!manageableMembers.length) {
+    if (!activeMembers.length) {
      setSelectedUserId("");
      return;
    }
-    if (!manageableMembers.some((member) => member.user.id === selectedUserId)) {
-      setSelectedUserId(manageableMembers[0].user.id);
+    if (!activeMembers.some((member) => member.user.id === selectedUserId)) {
+      setSelectedUserId(activeMembers[0].user.id);
    }
-  }, [manageableMembers, selectedUserId]);
+  }, [activeMembers, selectedUserId]);

  useEffect(() => {
    if (!isOpen || !selectedUserId) {
@@ -265,10 +267,12 @@ export function ProjectAccessModal({
      setLoadingProjects(true);
      try {
        const response = await getProjectAccessState(workspaceId, selectedUserId);
+        setSelectedUserRole(response.user.role);
        setProjectItems(response.items);
        setSelectedProjectIds([]);
      } catch {
        toast.error(labels.loadError);
+        setSelectedUserRole("");
        setProjectItems([]);
      } finally {
        setLoadingProjects(false);
@@ -305,6 +309,7 @@ export function ProjectAccessModal({
  };

  const toggleProjectSelection = (projectId: string) => {
+    if (!canManageExplicitAccess) return;
    setSelectedProjectIds((current) =>
      current.includes(projectId)
        ? current.filter((id) => id !== projectId)
@@ -313,11 +318,12 @@ export function ProjectAccessModal({
  };

  const handleSelectAllVisible = () => {
+    if (!canManageExplicitAccess) return;
    setSelectedProjectIds((current) => Array.from(new Set([...current, ...visibleProjectIds])));
  };

  const handleSelectClientProjects = () => {
-    if (!selectedClientId) return;
+    if (!selectedClientId || !canManageExplicitAccess) return;
    const clientProjectIds = visibleProjects
      .filter((item) => item.client?.id === selectedClientId)
      .map((item) => item.id);
@@ -442,7 +448,7 @@ export function ProjectAccessModal({
        type="button"
        variant="outline"
        onClick={() => void handleMutation("grant")}
-        disabled={!selectedProjectIds.length || isSaving}
+        disabled={!canManageExplicitAccess || !selectedProjectIds.length || isSaving}
        className="gap-2"
      >
        {isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <ShieldCheck className="h-4 w-4" />}
@@ -452,7 +458,7 @@ export function ProjectAccessModal({
        type="button"
        variant="destructive"
        onClick={() => void handleMutation("revoke")}
-        disabled={!selectedProjectIds.length || isSaving}
+        disabled={!canManageExplicitAccess || !selectedProjectIds.length || isSaving}
        className="gap-2"
      >
        {isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <ShieldAlert className="h-4 w-4" />}
@@ -473,6 +479,11 @@ export function ProjectAccessModal({
        <p className="max-w-3xl text-sm text-slate-600 dark:text-slate-400">
          {labels.description}
        </p>
+        {!canManageExplicitAccess && selectedUserRole ? (
+          <div className="rounded-2xl border border-sky-200 bg-sky-50 px-4 py-3 text-sm text-sky-800 dark:border-sky-500/30 dark:bg-sky-500/10 dark:text-sky-100">
+            {labels.implicitAccessHint}
+          </div>
+        ) : null}

        <div className="grid w-full grid-cols-1 gap-4 lg:grid-cols-12" dir="ltr">
          <section
@@ -518,7 +529,7 @@ export function ProjectAccessModal({
                variant="secondary"
                size="icon"
                onClick={handleSelectAllVisible}
-                disabled={!visibleProjects.length}
+                disabled={!canManageExplicitAccess || !visibleProjects.length}
                title={labels.selectAllVisible}
                aria-label={labels.selectAllVisible}
              >
@@ -542,7 +553,7 @@ export function ProjectAccessModal({
                variant="secondary"
                size="icon"
                onClick={handleSelectClientProjects}
-                disabled={!selectedClientId}
+                disabled={!canManageExplicitAccess || !selectedClientId}
                title={labels.selectClientProjects}
                aria-label={labels.selectClientProjects}
              >
@@ -583,7 +594,7 @@ export function ProjectAccessModal({
                        <button
                          type="button"
                          onClick={() => toggleProjectSelection(item.id)}
-                          className="flex w-full items-start gap-3 text-start"
+                          className={`flex w-full items-start gap-3 text-start ${!canManageExplicitAccess ? "cursor-default" : ""}`}
                        >
                          <div
                            className={`mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border transition ${
@@ -747,6 +758,7 @@ export function ProjectAccessModal({
                ) : (
                  filteredMembers.map((member) => {
                    const isActive = member.user.id === selectedUserId;
+                    const isImplicitUser = member.role === "owner" || member.role === "admin";

                    return (
                      <button
@@ -779,6 +791,11 @@ export function ProjectAccessModal({
                              <span className="shrink-0 rounded-full bg-slate-100 px-2 py-1 text-[11px] font-medium capitalize text-slate-600 dark:bg-slate-800 dark:text-slate-300">
                                {member.role}
                              </span>
+                              {isImplicitUser ? (
+                                <span className="shrink-0 rounded-full bg-sky-100 px-2 py-1 text-[11px] font-medium text-sky-700 dark:bg-sky-500/15 dark:text-sky-200">
+                                  {labels.accessOn}
+                                </span>
+                              ) : null}
                            </div>

                            {isActive ? (
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -527,11 +527,11 @@ export const en = {
    clearClientFilters: "Clear filters",
    namePlaceholder: "Project name...",
    teamMembers: "Team Members",
-    manageAccess: "Manage access",
-    accessModalTitle: "Project access",
-    accessModalDescription: "Grant or revoke project access for workspace members.",
-    accessMemberLabel: "Member",
-    accessNoMembers: "No eligible members were found.",
+    manageAccess: "Projects & Rates",
+    accessModalTitle: "Projects & Rates",
+    accessModalDescription: "Manage project access for members and guests, and set project-specific rates for any workspace user.",
+    accessMemberLabel: "User",
+    accessNoMembers: "No workspace users were found.",
    accessNoProjects: "No projects found.",
    accessSelectVisible: "Select all visible",
    accessClearSelection: "Clear selection",
@@ -544,6 +544,7 @@ export const en = {
    accessRevokeSuccess: "Project access revoked.",
    accessLoadError: "Failed to load project access state.",
    accessSaveError: "Failed to update project access.",
+    implicitAccessHint: "Owners and admins always have access to all projects. You can still set project-specific rate overrides here.",
    creator: "Creator",
    addUser: "Add user by mobile",
    addFromWorkspace: "Add from workspace",
--- a/src/locales/fa.ts
+++ b/src/locales/fa.ts
@@ -536,11 +536,11 @@ export const fa = {
    },
    namePlaceholder: "نام پروژه...",
    teamMembers: "اعضای تیم",
-    manageAccess: "مدیریت دسترسی",
-    accessModalTitle: "دسترسی پروژه‌ها",
-    accessModalDescription: "دسترسی اعضای ورک‌اسپیس به پروژه‌ها را اعطا یا لغو کنید.",
-    accessMemberLabel: "عضو",
-    accessNoMembers: "عضو واجد شرایطی پیدا نشد.",
+    manageAccess: "پروژه‌ها و نرخ‌ها",
+    accessModalTitle: "پروژه‌ها و نرخ‌ها",
+    accessModalDescription: "دسترسی پروژه‌ها را برای اعضا و مهمان‌ها مدیریت کنید و برای هر کاربر ورک‌اسپیس نرخ اختصاصی پروژه ثبت کنید.",
+    accessMemberLabel: "کاربر",
+    accessNoMembers: "کاربری در این ورک‌اسپیس پیدا نشد.",
    accessNoProjects: "پروژه‌ای پیدا نشد.",
    accessSelectVisible: "انتخاب همه موارد قابل مشاهده",
    accessClearSelection: "پاک کردن انتخاب",
@@ -553,6 +553,7 @@ export const fa = {
    accessRevokeSuccess: "دسترسی پروژه با موفقیت لغو شد.",
    accessLoadError: "بارگذاری وضعیت دسترسی پروژه‌ها انجام نشد.",
    accessSaveError: "به‌روزرسانی دسترسی پروژه‌ها انجام نشد.",
+    implicitAccessHint: "مالک‌ها و ادمین‌ها همیشه به همه پروژه‌ها دسترسی دارند. از اینجا فقط می‌توانید نرخ اختصاصی پروژه برای آن‌ها تنظیم کنید.",
    createSuccess: "پروژه با موفقیت ایجاد شد.",
    createError: "خطا در ایجاد پروژه.",
    updateSuccess: "پروژه با موفقیت به‌روزرسانی شد.",
--- a/src/pages/Projects.tsx
+++ b/src/pages/Projects.tsx
@@ -494,6 +494,9 @@ export const Projects: React.FC = () => {
            projectRateRemoved: t.rates?.projectRemoveSuccess || "Project user rate removed.",
            projectRateSaveError: t.rates?.projectSaveError || "Failed to save project user rate.",
            projectRateRemoveError: t.rates?.projectRemoveError || "Failed to remove project user rate.",
+            implicitAccessHint:
+              t.projects?.implicitAccessHint ||
+              "Owners and admins always have access to all projects. You can still set project-specific rate overrides here.",
          }}
        />
      )}
--- a/src/pages/Timesheet.tsx
+++ b/src/pages/Timesheet.tsx
@@ -1837,7 +1837,7 @@ function MobileRecordedEntryCard({
                </p>
                {project && (
                  <span className="inline-flex min-w-0 items-center gap-2 text-xs">
-                    <span className="shrink-0 text-sky-600 dark:text-sky-400">{"\u2022"}</span>
+                    <span className="shrink-0 text-sky-600 dark:text-sky-400">{"•"}</span>
                    <span className={`max-w-[10rem] truncate font-medium ${project.isDeleted ? "italic text-slate-500 dark:text-slate-400" : "text-sky-600 dark:text-sky-400"}`}>
                      {project.isDeleted ? buildDeletedProjectLabel(project.name, deletedProjectLabel) : project.name}
                    </span>
--- a/src/pages/WorkspaceEdit.tsx
+++ b/src/pages/WorkspaceEdit.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, Fragment, useMemo, useCallback } from 'react';
 import { useBlocker, useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from '../hooks/useTranslation';
-import { AlertCircle, UserPlus, Trash2, Shield, UploadCloud } from 'lucide-react';
+import { AlertCircle, ShieldCheck, UserPlus, Trash2, Shield, UploadCloud } from 'lucide-react';
 import { Dialog, Transition } from '@headlessui/react';
 import { toast } from 'sonner';
 import { getPriceUnits, getWorkspaceUserRates, type PriceUnit, type WorkspaceUserRate } from '../api/rates';
@@ -29,6 +29,7 @@ import { Select } from '../components/ui/Select';
 import { Input } from '../components/ui/input';
 import { TextAreaInput } from '../components/ui/TextAreaInput';
 import WorkspaceMemberRateFields from '../components/rates/WorkspaceMemberRateFields';
+import { ProjectAccessModal } from '../components/projects/ProjectAccessModal';

 const toEnglishDigits = (str: string) => {
  return str.replace(/[۰-۹]/g, (d) => '۰۱۲۳۴۵۶۷۸۹'.indexOf(d).toString())
@@ -82,6 +83,7 @@ export default function EditWorkspace() {
  // Modal State
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
  const [memberIdToDelete, setMemberIdToDelete] = useState<string | null>(null);
+  const [isProjectAccessModalOpen, setIsProjectAccessModalOpen] = useState(false);

  const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);

@@ -339,6 +341,7 @@ export default function EditWorkspace() {
  if (isLoading) return <div className="p-8 text-center">{t.workspace?.loading || "Loading..."}</div>;

  return (
+    <>
    <div className="absolute inset-0 flex flex-col overflow-y-auto bg-slate-50 p-4 dark:bg-slate-900 lg:overflow-hidden sm:p-6">
      <h1 className="text-2xl font-bold text-slate-900 dark:text-white mb-4 sm:mb-6 shrink-0">
        {t.workspace?.editTitle || "Edit Workspace"}
@@ -432,9 +435,22 @@ export default function EditWorkspace() {

        <div className="w-full rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900 lg:flex lg:w-2/3 lg:min-h-0 lg:flex-1 lg:flex-col lg:overflow-hidden">
          <div className="p-6 shrink-0 border-b border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900 z-10">
-            <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
+            <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+              <h2 className="text-lg font-semibold text-slate-900 dark:text-white">
                { t.workspace?.members || "Members" }
              </h2>
+              {canWorkspace(myRole, WORKSPACE_EDIT) && id ? (
+                <Button
+                  type="button"
+                  variant="secondary"
+                  onClick={() => setIsProjectAccessModalOpen(true)}
+                  className="gap-2 self-start sm:self-auto"
+                >
+                  <ShieldCheck className="h-4 w-4" />
+                  {t.projects?.manageAccess || "Projects & Rates"}
+                </Button>
+              ) : null}
+            </div>

            <div className="mb-4 flex items-start gap-3 rounded-xl border border-sky-100 bg-sky-50/80 px-4 py-3 text-sm text-sky-900 dark:border-sky-900/60 dark:bg-sky-950/30 dark:text-sky-100">
              <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
@@ -659,5 +675,57 @@ export default function EditWorkspace() {
        </Dialog>
      </Transition>
    </div>
+  
+    {canWorkspace(myRole, WORKSPACE_EDIT) && id ? (
+      <ProjectAccessModal
+        isOpen={isProjectAccessModalOpen}
+        onClose={() => setIsProjectAccessModalOpen(false)}
+        workspaceId={id}
+        onApplied={() => {}}
+        labels={{
+          title: t.projects?.accessModalTitle || "Projects & Rates",
+          description:
+            t.projects?.accessModalDescription ||
+            "Manage project access for members and guests, and set project-specific rates for any workspace user.",
+          close: t.actions?.cancel || "Close",
+          member: t.projects?.accessMemberLabel || "User",
+          projects: t.sidebar?.projects || "Projects",
+          loading: t.loading || "Loading...",
+          noMembers: t.projects?.accessNoMembers || "No workspace users were found.",
+          noProjects: t.projects?.accessNoProjects || "No projects found.",
+          searchPlaceholder: t.projects?.searchPlaceholder || "Search projects...",
+          allClients: t.reports?.allClients || "All clients",
+          selectAllVisible: t.projects?.accessSelectVisible || "Select all visible",
+          clearSelection: t.projects?.accessClearSelection || "Clear selection",
+          selectClientProjects: t.projects?.accessSelectClientProjects || "Select all projects for client",
+          grantSelected: t.projects?.accessGrant || "Grant selected",
+          revokeSelected: t.projects?.accessRevoke || "Revoke selected",
+          accessGranted: t.projects?.accessGrantSuccess || "Project access granted.",
+          accessRevoked: t.projects?.accessRevokeSuccess || "Project access revoked.",
+          memberRole: t.workspace?.roleLabel || "Role",
+          client: t.projects?.clientLabel || "Client",
+          noClient: t.projects?.noClient || "No client",
+          accessOn: t.projects?.accessOn || "Has access",
+          accessOff: t.projects?.accessOff || "No access",
+          loadError: t.projects?.accessLoadError || "Failed to load project access state.",
+          saveError: t.projects?.accessSaveError || "Failed to update project access.",
+          workspaceRate: t.rates?.workspaceRate || "Workspace rate",
+          projectOverride: t.rates?.projectOverride || "Project override",
+          inheritsWorkspaceRate: t.rates?.inheritsWorkspaceRate || "Inherits workspace rate",
+          noRate: t.rates?.noRate || "No rate",
+          hourlyRatePlaceholder: t.rates?.hourlyRatePlaceholder || "0.00",
+          currencyPlaceholder: t.rates?.currencyPlaceholder || "USD",
+          removeRate: t.rates?.removeRate || "Remove rate",
+          projectRateSaved: t.rates?.projectSaveSuccess || "Project user rate saved.",
+          projectRateRemoved: t.rates?.projectRemoveSuccess || "Project user rate removed.",
+          projectRateSaveError: t.rates?.projectSaveError || "Failed to save project user rate.",
+          projectRateRemoveError: t.rates?.projectRemoveError || "Failed to remove project user rate.",
+          implicitAccessHint:
+            t.projects?.implicitAccessHint ||
+            "Owners and admins always have access to all projects. You can still set project-specific rate overrides here.",
+        }}
+      />
+      ) : null}
+    </>
  );
 }
--- a/src/pages/auth/utils.ts
+++ b/src/pages/auth/utils.ts
@@ -3,7 +3,7 @@ import { toast } from "sonner"
 import { ApiError } from "../../api/client"
 import { setSessionTokens } from "../../lib/session"

-const PERSIAN_DIGITS = ["\u06f0", "\u06f1", "\u06f2", "\u06f3", "\u06f4", "\u06f5", "\u06f6", "\u06f7", "\u06f8", "\u06f9"]
+const PERSIAN_DIGITS = ["۰", "۱", "۲", "۳", "۴", "۵", "۶", "۷", "۸", "۹"]

 export const localizeDigits = (value: string, isRtl: boolean) =>
  isRtl ? value.replace(/\d/g, (digit) => PERSIAN_DIGITS[Number.parseInt(digit, 10)] ?? digit) : value
Author	SHA1	Message	Date
Amirhossein Khalili	eb41c8528d	refactor(auth): replace escaped persian digits Some checks failed Frontend CI/CD / build (push) Has been cancelled Details Frontend CI/CD / deploy (push) Has been cancelled Details	2026-05-24 11:17:55 +03:30
Amirhossein Khalili	c673159032	feat(projects): expose implicit-access roles in projects and rates modal	2026-05-24 10:31:32 +03:30