prototype

package/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "cross-env NODE_OPTIONS=--max-old-space-size=4096 next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -36,6 +36,7 @@
   },
   "devDependencies": {
     "@types/lodash": "4.17.9",
-    "@types/react-syntax-highlighter": "^15.5.13"
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "cross-env": "^10.0.0"
   }
 }

package/src/app/(DashboardLayout)/components/dashboard/TrafficDistribution.tsx → package/src/app/(DashboardLayout)/components/dashboard/ActivityIndex.tsx

@@ -6,7 +6,7 @@ import { IconArrowUpLeft } from '@tabler/icons-react'
 
 import DashboardCard from '@/app/(DashboardLayout)/components/shared/DashboardCard'
 
-const TrafficDistribution = () => {
+const ActivityIndex = () => {
   // chart color
   const theme = useTheme()
   const primary = theme.palette.primary.main
@@ -60,10 +60,11 @@ const TrafficDistribution = () => {
       },
     ],
   }
-  const seriescolumnchart: any = [5368, 3500, 4106]
+  // Calorie Burn Distribution: Cardio, Strength, Flexibility
+  const seriescolumnchart: any = [45, 35, 20]
 
   return (
-    <DashboardCard title='Traffic Distribution'>
+    <DashboardCard title='Daily Calorie Burn'>
       <Grid container spacing={3}>
         {/* column */}
         <Grid
@@ -76,7 +77,7 @@ const TrafficDistribution = () => {
             sx={{
               fontWeight: '700',
             }}>
-            $36,358
+            2,450 kcal
           </Typography>
           <Stack
             direction={{ xs: 'column', sm: 'row' }}
@@ -94,11 +95,11 @@ const TrafficDistribution = () => {
                 sx={{
                   fontWeight: '600',
                 }}>
-                +9%
+                +12%
               </Typography>
             </Stack>
             <Typography variant='subtitle2' color='textSecondary'>
-              last year
+              vs yesterday
             </Typography>
           </Stack>
           <Stack
@@ -126,7 +127,7 @@ const TrafficDistribution = () => {
                 sx={{
                   fontSize: '12px',
                 }}>
-                Oragnic
+                Cardio
               </Typography>
             </Stack>
             <Stack
@@ -148,7 +149,7 @@ const TrafficDistribution = () => {
                 sx={{
                   fontSize: '12px',
                 }}>
-                Refferal
+                Strength
               </Typography>
             </Stack>
           </Stack>
@@ -172,4 +173,4 @@ const TrafficDistribution = () => {
   )
 }
 
-export default TrafficDistribution
+export default ActivityIndex

package/src/app/(DashboardLayout)/components/dashboard/AdvancedAvatarUpload.tsx

@@ -0,0 +1,160 @@
+import React, { useState, useRef } from 'react';
+import { 
+  Box, 
+  Avatar, 
+  IconButton, 
+  Typography, 
+  Stack, 
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button
+} from '@mui/material';
+import { Icon } from '@iconify/react';
+
+interface AdvancedAvatarUploadProps {
+  size?: number;
+  onImageChange?: (imageUrl: string) => void;
+}
+
+const AdvancedAvatarUpload: React.FC<AdvancedAvatarUploadProps> = ({ 
+  size = 96, 
+  onImageChange 
+}) => {
+  const [imageUrl, setImageUrl] = useState<string>('');
+  const [previewUrl, setPreviewUrl] = useState<string>('');
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileSelect = (file: File) => {
+    if (file && file.type.startsWith('image/')) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const result = e.target?.result as string;
+        setPreviewUrl(result);
+        setIsDialogOpen(true);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      handleFileSelect(file);
+    }
+  };
+
+
+
+  const handleConfirmUpload = () => {
+    setImageUrl(previewUrl);
+    onImageChange?.(previewUrl);
+    setIsDialogOpen(false);
+    setPreviewUrl('');
+  };
+
+  const handleCancelUpload = () => {
+    setIsDialogOpen(false);
+    setPreviewUrl('');
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const handleClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  return (
+    <>
+      <Box sx={{ display: 'flex', justifyContent: 'center', mb: 2 }}>
+        <Stack alignItems="center" spacing={1}>
+          <Box sx={{ position: 'relative' }}>
+            <Avatar
+              src={imageUrl}
+              sx={{
+                width: size,
+                height: size,
+                border: '3px solid #d0d7de',
+                bgcolor: imageUrl ? 'transparent' : '#f6f8fa',
+                cursor: 'pointer',
+                '&:hover': {
+                  opacity: 0.8,
+                }
+              }}
+              onClick={handleClick}
+            >
+              {!imageUrl && (
+                <Icon icon="mdi:account" width={size * 0.4} color="#64748B" />
+              )}
+            </Avatar>
+            <IconButton
+              sx={{
+                position: 'absolute',
+                bottom: 0,
+                right: 0,
+                bgcolor: 'primary.main',
+                color: 'white',
+                width: 32,
+                height: 32,
+                '&:hover': {
+                  bgcolor: 'primary.dark',
+                }
+              }}
+              onClick={handleClick}
+            >
+              <Icon icon="mdi:camera" width={16} />
+            </IconButton>
+          </Box>
+
+
+
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/*"
+            onChange={handleFileChange}
+            style={{ display: 'none' }}
+          />
+        </Stack>
+      </Box>
+
+      {/* 预览对话框 */}
+      <Dialog 
+        open={isDialogOpen} 
+        onClose={handleCancelUpload}
+        maxWidth="sm"
+        fullWidth
+      >
+                 <DialogTitle>Preview Avatar</DialogTitle>
+        <DialogContent>
+          <Box sx={{ display: 'flex', justifyContent: 'center', my: 2 }}>
+            <Avatar
+              src={previewUrl}
+              sx={{
+                width: 200,
+                height: 200,
+                border: '3px solid #d0d7de',
+              }}
+            />
+          </Box>
+                     <Typography variant="body2" color="text.secondary" align="center">
+             Confirm to use this image as your avatar?
+           </Typography>
+        </DialogContent>
+        <DialogActions>
+                     <Button onClick={handleCancelUpload} color="inherit">
+             Cancel
+           </Button>
+           <Button onClick={handleConfirmUpload} variant="contained">
+             Confirm
+           </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};
+
+export default AdvancedAvatarUpload;