add recommend product and color scheme

src/pages/group/[id].tsx

@@ -288,6 +288,8 @@ function GroupDataPage({ groupData }: Props) {
 
  </Paper>
 
+
+
  </Grid>
 
  <Grid item xs={12} md={12} lg={12}>

src/pages/group/index.tsx

@@ -402,7 +402,7 @@ const GroupItem = () => {
  <Grid container spacing={2}>
  <Grid item xs={12} sm={2}>
  <Image
- src={group?.logo === "logo.png" ? "/static/img/logo.png" : groupDataImageURL(group?.logo)}
+ src={group?.logo === "" || group?.logo === "logo.png"  ? "/static/img/logo.png" : groupDataImageURL(group?.logo)}
  alt="Group Image"
  width={100}
  height={100}

src/pages/panel/admin/manage/group/[id].tsx

@@ -425,8 +425,86 @@ function UserPanelManageGroup({ groupDataProp }: Props) {
  </React.Fragment>
  </Grid>
  </Paper>
+
+
  </Grid>
 
+
+ <Grid item xs={12} md={12} lg={12}>
+ <Paper sx={{
+ p: 2,
+ display: "flex",
+ gap: "4rem",
+ flexDirection: {
+ xs: "column",
+ md: "row",
+ },
+ }}>
+
+ <Box>
+ <Typography style={typeographyHeaderStyle}>โทนสีที่มีในร้าน</Typography>
+ {groupDataProp?.products && (
+ <>
+ {[...new Set(groupDataProp?.products?.map((product: any) => product.colorScheme.id) ?? [])].map((colorSchemeId: string, index: number) => {
+ const product = groupDataProp?.products?.find((product: any) => product.colorScheme.id === colorSchemeId);
+ return (
+ <div key={index} style={{ display: 'flex', alignItems: 'center', marginBottom: '4px' }}>
+ <div
+ style={{
+ backgroundColor: product?.colorScheme?.hex,
+ width: '25px',
+ height: '25px',
+ marginRight: '4px',
+ }}
+ ></div>
+ <Typography variant="subtitle1">
+ รหัสสี {product?.colorScheme?.id}
+ </Typography>
+ </div>
+ );
+ })}
+ </>
+ )}
+ </Box>
+
+ </Paper>
+ </Grid>
+
+
+
+ <Grid item xs={12} md={12} lg={12}>
+ <Paper
+ sx={{
+ p: 2,
+ display: "flex",
+ gap: "4rem",
+ flexDirection: {
+ xs: "column",
+ md: "row",
+ },
+ }}
+ >
+ <Box>
+ <Typography style={typeographyHeaderStyle}>สินค้าแนะนำ</Typography>
+ {groupDataProp?.products && (
+ <>
+ {groupDataProp?.products
+ .filter((product: any) => product.recommend === true)
+ .slice(0, 10)
+ .map((product: any, index: number) => (
+ <div key={index} style={{ display: 'flex', alignItems: 'center', marginBottom: '4px' }}>
+ <Typography variant="subtitle1">
+ {product.name}
+ </Typography>
+ </div>
+ ))}
+ </>
+ )}
+ </Box>
+ </Paper>
+ </Grid>
+
+
  <Grid item xs={12} md={12} lg={12}>
  <Paper
  sx={{
@@ -522,6 +600,10 @@ function UserPanelManageGroup({ groupDataProp }: Props) {
  </Grid>
  </Grid>
  </Paper>
+
+
+
+
  </Grid>
 
  <Container

src/pages/panel/profile/index.tsx

@@ -187,6 +187,15 @@ function UserPanelProfile({
  setShowConfirmation(false);
  };
 
+ React.useEffect(() => {
+ const timer = setInterval(() => {
+ setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));
+ }, 800);
+ return () => {
+ clearInterval(timer);
+ };
+ }, []);
+
  const [progress, setProgress] = React.useState(10);
 
  if (loading) {