PA also able to edit program

Author: ehsan6sha

.claude/settings.local.json

@@ -37,7 +37,9 @@
       "Bash(find /mnt/e/GitHub/fula-chain -name *.ts -o -name *.js)",
       "Bash(find /mnt/e/GitHub/fula-chain -type f \\\\\\(-name *.test.ts -o -name *.spec.ts -o -name *test*.ts \\\\\\))",
       "Bash(npm ls:*)",
-      "Bash(npm view:*)"
+      "Bash(npm view:*)",
+      "Bash(ls /mnt/e/GitHub/rewards-program/src/app/global-error*)",
+      "Bash(ls /mnt/e/GitHub/rewards-program/src/app/error*)"
     ]
   }
 }

src/app/balance/page.tsx

@@ -5,7 +5,7 @@ import {
   Typography, Box, Paper, Grid, Chip, Table, TableBody, TableCell,
   TableContainer, TableHead, TableRow, TextField, Button, Alert,
   CircularProgress, Select, MenuItem, FormControl, InputLabel,
-  useMediaQuery, useTheme,
+  useMediaQuery, useTheme, Tabs, Tab,
 } from "@mui/material";
 import { useAccount, useReadContract, useReadContracts } from "wagmi";
 import { useSearchParams } from "next/navigation";
@@ -157,6 +157,7 @@ function OwnerActions({ memberWallet }: { memberWallet: string }) {
   const { data: rewardTypesData } = useRewardTypes();
 
   const [disclaimer, setDisclaimer] = useState(false);
+  const [actionTab, setActionTab] = useState(0);
 
   if (!isOwner) return null;
 
@@ -166,10 +167,15 @@ function OwnerActions({ memberWallet }: { memberWallet: string }) {
       <TextField label="Program ID" value={actionProgramId} onChange={(e) => setActionProgramId(e.target.value)}
         type="number" size="small" sx={{ width: 150, mb: 2 }} />
 
-      <Grid container spacing={3}>
-        {/* Deposit */}
-        <Grid item xs={12} md={4}>
-          <Typography variant="subtitle2" gutterBottom>Deposit FULA</Typography>
+      <Tabs value={actionTab} onChange={(_, v) => setActionTab(v)} sx={{ borderBottom: 1, borderColor: "divider" }}>
+        <Tab label="Deposit" />
+        <Tab label="Transfer to Parent" />
+        <Tab label="Withdraw" />
+      </Tabs>
+
+      {/* Deposit */}
+      {actionTab === 0 && (
+        <Box sx={{ pt: 2, maxWidth: 480 }}>
           <TextField label="Amount (FULA)" value={depositAmount} onChange={(e) => setDepositAmount(e.target.value)}
             fullWidth size="small" type="number" />
           <FormControl fullWidth size="small" sx={{ mt: 1 }}>
@@ -196,11 +202,12 @@ function OwnerActions({ memberWallet }: { memberWallet: string }) {
           </Box>
           {depositSuccess && <Alert severity="success" sx={{ mt: 1 }}>Deposited!</Alert>}
           {depositError && <Alert severity="error" sx={{ mt: 1 }}>{formatContractError(depositError)}</Alert>}
-        </Grid>
+        </Box>
+      )}
 
-        {/* Transfer to Parent */}
-        <Grid item xs={12} md={4}>
-          <Typography variant="subtitle2" gutterBottom>Transfer to Parent</Typography>
+      {/* Transfer to Parent */}
+      {actionTab === 1 && (
+        <Box sx={{ pt: 2, maxWidth: 480 }}>
           {transferLimitData != null && Number(transferLimitData) > 0 && (
             <Alert severity="info" sx={{ mb: 1 }}>
               Transfer limit: <strong>{Number(transferLimitData)}%</strong> of total balance (Clients only).
@@ -217,11 +224,12 @@ function OwnerActions({ memberWallet }: { memberWallet: string }) {
           </Button>
           {transBackSuccess && <Alert severity="success" sx={{ mt: 1 }}>Transferred!</Alert>}
           {transBackError && <Alert severity="error" sx={{ mt: 1 }}>{formatContractError(transBackError)}</Alert>}
-        </Grid>
+        </Box>
+      )}
 
-        {/* Withdraw */}
-        <Grid item xs={12} md={4}>
-          <Typography variant="subtitle2" gutterBottom>Withdraw</Typography>
+      {/* Withdraw */}
+      {actionTab === 2 && (
+        <Box sx={{ pt: 2, maxWidth: 480 }}>
           <TextField label="Amount (FULA)" value={withdrawAmount} onChange={(e) => setWithdrawAmount(e.target.value)}
             fullWidth size="small" type="number" />
           <Button size="small" variant="contained" color="secondary" sx={{ mt: 1 }}
@@ -231,8 +239,8 @@ function OwnerActions({ memberWallet }: { memberWallet: string }) {
           </Button>
           {withdrawSuccess && <Alert severity="success" sx={{ mt: 1 }}>Withdrawn!</Alert>}
           {withdrawError && <Alert severity="error" sx={{ mt: 1 }}>{formatContractError(withdrawError)}</Alert>}
-        </Grid>
-      </Grid>
+        </Box>
+      )}
 
       <OnChainDisclaimer accepted={disclaimer} onChange={setDisclaimer} />
     </Paper>

src/app/programs/page.tsx

@@ -240,7 +240,7 @@ function ProgramDetail({ programId }: { programId: number }) {
   const { data: transferLimit } = useTransferLimit(programId);
 
   const isPA = role === MemberRoleEnum.ProgramAdmin;
-  const canManageProgram = isAdmin;
+  const canManageProgram = isAdmin || isPA;
   const canManageSubTypes = isAdmin || isPA;
   const canSetTransferLimit = isAdmin || isPA;
   const canAddMembers = isAdmin || isPA || role === MemberRoleEnum.TeamLeader;
@@ -601,7 +601,7 @@ function ProgramDetail({ programId }: { programId: number }) {
       {(isAdmin || canManageSubTypes) && program.active && (
         <Paper sx={{ p: 2, mb: 3 }}>
           <Typography variant="h6" gutterBottom>Reward Configuration</Typography>
-          <RewardTypesSection isAdmin={isAdmin} />
+          <RewardTypesSection isAdmin={isAdmin || isPA} />
           <SubTypesSection programId={programId} canManage={canManageSubTypes} />
         </Paper>
       )}

src/components/layout/Navigation.tsx

@@ -9,6 +9,7 @@ import ReceiptLongIcon from "@mui/icons-material/ReceiptLong";
 import AssessmentIcon from "@mui/icons-material/Assessment";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useState, useEffect } from "react";
 import { useUserRole } from "@/hooks/useUserRole";
 
 export const DRAWER_WIDTH = 240;
@@ -27,6 +28,8 @@ export function Navigation({ mobileOpen, onClose }: { mobileOpen: boolean; onClo
   const { isConnected } = useUserRole();
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
 
   const drawerContent = (
     <>
@@ -45,7 +48,7 @@ export function Navigation({ mobileOpen, onClose }: { mobileOpen: boolean; onClo
               component={Link}
               href={item.href}
               selected={pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href))}
-              disabled={item.requiresAuth && !isConnected}
+              disabled={mounted && item.requiresAuth && !isConnected}
               onClick={isMobile ? onClose : undefined}
             >
               <ListItemIcon>{item.icon}</ListItemIcon>