update the dashbord and router

src/components/Home/Analytics&Reporting/TimeFrameSelector.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Button, Stack } from '@mui/material';
+
+const options = ['All Time', '12 Months', '30 Days', '7 Days', '24 Hour'];
+
+const TimeFrameSelector = ({ selected, onChange }) => (
+  <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', mb: 2 }}>
+    {options.map(option => (
+      <Button
+        key={option}
+        size="small"
+        variant={selected === option ? 'contained' : 'outlined'}
+        onClick={() => onChange(option)}
+        sx={{ textTransform: 'none' }}
+      >
+        {option}
+      </Button>
+    ))}
+  </Stack>
+);
+
+export default TimeFrameSelector;