ctms-common-components 1.0.1

package/src/components/Button.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './button.css';
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({ primary, backgroundColor, size, label="Hiii", ...props }) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={backgroundColor && { backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};
+
+Button.propTypes = {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary: PropTypes.bool,
+  /**
+   * What background color to use
+   */
+  backgroundColor: PropTypes.string,
+  /**
+   * How large should the button be?
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /**
+   * Button contents
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * Optional click handler
+   */
+  onClick: PropTypes.func,
+};
+
+Button.defaultProps = {
+  backgroundColor: null,
+  primary: false,
+  size: 'medium',
+  onClick: undefined,
+};

package/src/components/Pagination/PaginationStyles.js

@@ -0,0 +1,49 @@
+import colors from '../../theme/foundations/colors';
+
+const component = {};
+const style = {
+  '.center': {
+    display: 'flex',
+    justifyContent: 'center',
+    marginTop: '10px',
+    paddingTop: '20px !important'
+  },
+  '.p-20': {
+    paddingRight: '20px'
+  },
+  '.rows': {
+    color: 'gray.400'
+  },
+  '#rowsPerPage': {
+    background: 'white'
+  },
+  '.mr-5': {
+    marginRight: '5px'
+  },
+  '.prevBtn, .NxtBtn, .indexBtn': {
+    borderRadius: '5px',
+    marginRight: '5px',
+    border: `1px solid ${colors.tertiary[500]}`,
+    background: 'colors.white',
+    color: 'tertiary.500',
+    fontWeight: 'bold',
+    cursor: 'pointer',
+    padding: '0px 10px 0px 10px'
+  },
+  '.activePrevBtn, .activeIndexBtn, .activeNxtBtn': {
+    borderRadius: '5px',
+    marginRight: '5px',
+    border: `1px solid ${colors.blue[200]}`,
+    background: 'tertiary.500',
+    color: 'white',
+    fontWeight: 'bold',
+    cursor: 'pointer',
+    padding: '0px 10px 0px 10px'
+  },
+  '.flex': {
+    display: 'flex'
+  }
+
+};
+
+export default { component, style };

package/src/components/Pagination/index.jsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import './PaginationStyles.js';
+
+const ROWS_PER_PAGE_OPTIONS = [5, 10, 25, 50];
+
+const Pagination = ({
+  currentPage = 1,
+  itemsPerPage = ROWS_PER_PAGE_OPTIONS[0] || 5,
+  totalItems = 0,
+  handlePageChange = () => {},
+  prevButton = '<',
+  nxtButton = '>',
+  showFirstButton = false,
+  firstBtnLabel = '|<',
+  LastBtnLabel = '>|',
+  boundaryCount = 1 // Number of buttons to show at the start and end
+}) => {
+  const totalPages = Math.ceil(totalItems / itemsPerPage);
+  const buttons = [];
+
+  const startButton = Math.max(1, currentPage - boundaryCount);
+  const endButton = Math.min(totalPages, currentPage + boundaryCount);
+
+  if (startButton > 1) {
+    buttons.push(
+      <button key={1} onClick={() => handlePageChange(1)} className="indexBtn">
+        1
+      </button>
+    );
+    if (startButton > 2) {
+      buttons.push(<span key="dots-start">...</span>);
+    }
+  }
+
+  for (let i = startButton; i <= endButton; i += 1) {
+    buttons.push(
+      <button key={i} onClick={() => handlePageChange(i)} className={currentPage === i ? 'activeIndexBtn' : 'indexBtn'}>
+        {i}
+      </button>
+    );
+  }
+
+  if (endButton < totalPages) {
+    if (endButton < totalPages - 1) {
+      buttons.push(<span key="dots-end">...</span>);
+    }
+    buttons.push(
+      <button key={totalPages} onClick={() => handlePageChange(totalPages)} className="indexBtn">
+        {totalPages}
+      </button>
+    );
+  }
+
+  return (
+    <div>
+      {itemsPerPage > 0 && (
+        <div className="center">
+          {showFirstButton && (
+            <button disabled={currentPage === 1} onClick={() => handlePageChange(1)} className="mr-5">
+              {firstBtnLabel}
+            </button>
+          )}
+          <button disabled={currentPage === 1} onClick={() => handlePageChange(currentPage - 1)} className="prevBtn">
+            {prevButton}
+          </button>
+          {buttons}
+          <button
+            disabled={currentPage === totalPages}
+            onClick={() => handlePageChange(currentPage + 1)}
+            className="NxtBtn"
+          >
+            {nxtButton}
+          </button>
+          {showFirstButton && (
+            <button disabled={currentPage === totalPages} onClick={() => handlePageChange(totalPages)} className="mr-5">
+              {LastBtnLabel}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Pagination;

package/src/components/PoojaCard/index.jsx

@@ -0,0 +1,216 @@
+import React from 'react';
+import {
+  Card,
+  Box,
+  Typography,
+  Chip,
+  Button,
+  Avatar,
+  Stack,
+  Divider
+} from '@mui/material';
+
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import EventSeatIcon from '@mui/icons-material/EventSeat';
+
+const colorVariants = {
+  saffron: {
+    primary: '#F4B942',
+    secondary: '#FFF8EE',
+    accent: '#7A1C1C'
+  },
+  maroon: {
+    primary: '#7A1C1C',
+    secondary: '#FFF5F5',
+    accent: '#5A0E16'
+  },
+  navy: {
+    primary: '#1B2950',
+    secondary: '#F4F7FC',
+    accent: '#0E1A36'
+  }
+};
+
+const sizeVariants = {
+  small: {
+    cardWidth: 340,
+    image: 64,
+    title: '1.2rem',
+    subtitle: '0.8rem',
+    padding: 1.5
+  },
+  medium: {
+    cardWidth: 460,
+    image: 78,
+    title: '1.5rem',
+    subtitle: '0.95rem',
+    padding: 2
+  },
+  large: {
+    cardWidth: 620,
+    image: 90,
+    title: '1.8rem',
+    subtitle: '1rem',
+    padding: 2.5
+  }
+};
+
+const PoojaCard = ({
+  title = 'Abhishekam',
+  subtitle = 'അഭിഷേകം',
+  duration = '30 min',
+  priest = 'Shiva',
+  slots = 8,
+  amount = 500,
+  image = 'https://cdn-icons-png.flaticon.com/512/4359/4359963.png',
+  variant = 'maroon',
+  size = 'medium',
+  badge = 'Popular',
+  buttonText = 'Book Now',
+  showButton = true
+}) => {
+  const colors = colorVariants[variant];
+  const dimensions = sizeVariants[size];
+
+  return (
+    <Card
+    elevation={3}
+    sx={{
+      width: '100%',
+      maxWidth: 700,
+      borderRadius: '24px',
+      overflow: 'hidden',
+      background: '#fff',
+      p: 2
+    }}
+  >
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="space-between"
+      gap={2}
+      flexWrap="wrap"
+    >
+      {/* LEFT SECTION */}
+      <Box display="flex" alignItems="center" gap={2} flex={1}>
+        {/* IMAGE */}
+        <Avatar
+          src={image}
+          variant="rounded"
+          sx={{
+            width: 90,
+            height: 90,
+            borderRadius: '20px'
+          }}
+        />
+
+        {/* CONTENT */}
+        <Box>
+          <Box display="flex" alignItems="center" gap={1} flexWrap="wrap">
+            <Typography
+              fontWeight={700}
+              sx={{
+                fontSize: '2rem'
+              }}
+            >
+              {title}
+            </Typography>
+
+            <Chip
+              label={badge}
+              size="small"
+              sx={{
+                background: '#F6E3B4',
+                color: '#6B4A00',
+                fontWeight: 700
+              }}
+            />
+          </Box>
+
+          <Typography
+            sx={{
+              color: '#555',
+              fontSize: '1rem',
+              mt: 0.3
+            }}
+          >
+            {subtitle}
+          </Typography>
+
+          <Box
+            display="flex"
+            alignItems="center"
+            gap={0.7}
+            mt={1}
+          >
+            <AccessTimeIcon
+              sx={{
+                fontSize: 18,
+                color: '#777'
+              }}
+            />
+
+            <Typography color="#444">
+              {duration} • {priest}
+            </Typography>
+          </Box>
+        </Box>
+      </Box>
+
+      {/* RIGHT SECTION */}
+      <Box
+        display="flex"
+        flexDirection="column"
+        alignItems="flex-end"
+        gap={1.5}
+      >
+        <Typography
+          sx={{
+            fontSize: '2.3rem',
+            fontWeight: 800,
+            color: '#1B2950'
+          }}
+        >
+          ₹{amount}
+        </Typography>
+
+        <Chip
+          icon={<EventSeatIcon />}
+          label={`${slots} slots`}
+          sx={{
+            background: '#DDF7E3',
+            color: '#166534',
+            fontWeight: 700
+          }}
+        />
+
+        {showButton && (
+          <Button
+            variant="contained"
+
+            sx={{
+              background: '#F4D5BD',
+              color: '#5A1623',
+              borderRadius: '16px',
+              px: 3,
+              py: 1,
+              ml:2,
+              textTransform: 'none',
+              fontWeight: 700,
+              boxShadow: 'none',
+              '&:hover': {
+                background: '#EAC4A5',
+                boxShadow: 'none'
+              }
+            }}
+          >
+            {buttonText}
+          </Button>
+        )}
+      </Box>
+    </Box>
+  </Card>
+  );
+};
+
+export default PoojaCard;

package/src/components/StatusCard/index.jsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { Card, Typography, Box } from '@mui/material';
+
+const colorVariants = {
+  saffron: {
+    primary: '#F4C430',
+    secondary: '#A16B00',
+    bg: '#FFF8E1'
+  },
+  maroon: {
+    primary: '#7A1C1C',
+    secondary: '#A94442',
+    bg: '#F8EEEE'
+  },
+  navy: {
+    primary: '#0B1F4D',
+    secondary: '#304878',
+    bg: '#EEF2FA'
+  }
+};
+
+const sizeVariants = {
+  small: {
+    cardWidth: 80,
+    cardHeight: 52,
+    codeSize: '16px',
+    labelSize: '10px',
+    padding: '8px 12px'
+  },
+  medium: {
+    cardWidth: 100,
+    cardHeight: 64,
+    codeSize: '22px',
+    labelSize: '12px',
+    padding: '10px 16px'
+  },
+  large: {
+    cardWidth: 130,
+    cardHeight: 84,
+    codeSize: '30px',
+    labelSize: '16px',
+    padding: '14px 20px'
+  }
+};
+
+const StatusCard = ({
+  code = 'A-044',
+  label = 'Current',
+  color = 'maroon',
+  size = 'medium'
+}) => {
+  const theme = colorVariants[color];
+  const dimensions = sizeVariants[size];
+
+  return (
+    <Card
+      elevation={0}
+      sx={{
+        width: dimensions.cardWidth,
+        height: dimensions.cardHeight,
+        borderRadius: '14px',
+        backgroundColor: theme.bg,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        px: 2,
+        transition: '0.3s ease',
+        cursor: 'pointer',
+        '&:hover': {
+          transform: 'translateY(-2px)',
+          boxShadow: '0 6px 18px rgba(0,0,0,0.08)'
+        }
+      }}
+    >
+      <Box>
+        <Typography
+          sx={{
+            fontSize: dimensions.codeSize,
+            fontWeight: 700,
+            lineHeight: 1,
+            color: theme.primary
+          }}
+        >
+          {code}
+        </Typography>
+
+        <Typography
+          sx={{
+            mt: 0.5,
+            fontSize: dimensions.labelSize,
+            fontWeight: 500,
+            color: theme.secondary
+          }}
+        >
+          {label}
+        </Typography>
+      </Box>
+    </Card>
+  );
+};
+
+export default StatusCard;

package/src/components/TokenCard/index.jsx

@@ -0,0 +1,205 @@
+import React from 'react';
+import {
+  Card,
+  Typography,
+  Box,
+  Chip
+} from '@mui/material';
+
+const colorVariants = {
+  saffron: {
+    bg: 'linear-gradient(135deg, #F4B942 0%, #D98C00 100%)',
+    text: '#FFFFFF',
+    chipBg: '#FFF3D6',
+    chipText: '#8A4B00',
+    divider: 'rgba(255,255,255,0.25)'
+  },
+
+  maroon: {
+    bg: 'linear-gradient(135deg, #8B0E11 0%, #5C0002 100%)',
+    text: '#FFFFFF',
+    chipBg: '#FFE0B2',
+    chipText: '#B45309',
+    divider: 'rgba(255,255,255,0.2)'
+  },
+
+  cream: {
+    bg: 'linear-gradient(135deg, #FFF8EE 0%, #F5E6D3 100%)',
+    text: '#3B2F2F',
+    chipBg: '#F4D5BD',
+    chipText: '#7A1C1C',
+    divider: 'rgba(0,0,0,0.1)'
+  },
+
+  navy: {
+    bg: 'linear-gradient(135deg, #1B2950 0%, #0E162B 100%)',
+    text: '#FFFFFF',
+    chipBg: '#D6E4FF',
+    chipText: '#1B2950',
+    divider: 'rgba(255,255,255,0.18)'
+  },
+
+  teal: {
+    bg: 'linear-gradient(135deg, #0F766E 0%, #115E59 100%)',
+    text: '#FFFFFF',
+    chipBg: '#D1FAE5',
+    chipText: '#065F46',
+    divider: 'rgba(255,255,255,0.2)'
+  }
+};
+
+const sizeVariants = {
+  small: {
+    width: 220,
+    height: 180,
+    tokenSize: '3rem',
+    titleSize: '0.7rem'
+  },
+
+  medium: {
+    width: 280,
+    height: 220,
+    tokenSize: '4.2rem',
+    titleSize: '0.8rem'
+  },
+
+  large: {
+    width: 340,
+    height: 260,
+    tokenSize: '5rem',
+    titleSize: '0.9rem'
+  }
+};
+
+const TokenCard = ({
+  token = 'A-045',
+  status = 'Waiting',
+  waitingCount = 12,
+  estimatedTime = '18 min',
+  variant = 'maroon',
+  size = 'medium'
+}) => {
+  const colors = colorVariants[variant];
+  const dimensions = sizeVariants[size];
+
+  return (
+    <Card
+      elevation={4}
+      sx={{
+        width: dimensions.width,
+        height: dimensions.height,
+        borderRadius: '24px',
+        background: colors.bg,
+        color: colors.text,
+        p: 3,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        position: 'relative',
+        overflow: 'hidden',
+        transition: '0.3s ease',
+        '&:hover': {
+          transform: 'translateY(-4px)',
+          boxShadow: '0 14px 30px rgba(0,0,0,0.18)'
+        }
+      }}
+    >
+      {/* TOP */}
+      <Box textAlign="center">
+        <Typography
+          sx={{
+            fontSize: dimensions.titleSize,
+            fontWeight: 600,
+            letterSpacing: '2px',
+            opacity: 0.85
+          }}
+        >
+          YOUR TOKEN NUMBER
+        </Typography>
+
+        <Typography
+          sx={{
+            fontSize: dimensions.tokenSize,
+            fontWeight: 900,
+            lineHeight: 1.1,
+            mt: 1
+          }}
+        >
+          {token}
+        </Typography>
+
+        <Chip
+          label={status}
+          size="small"
+          sx={{
+            mt: 1.5,
+            background: colors.chipBg,
+            color: colors.chipText,
+            fontWeight: 700,
+            borderRadius: '10px'
+          }}
+        />
+      </Box>
+
+      {/* DIVIDER */}
+      <Box
+        sx={{
+          width: '100%',
+          height: '1px',
+          background: colors.divider,
+          my: 2
+        }}
+      />
+
+      {/* BOTTOM */}
+      <Box
+        sx={{ display: 'flex', justifyContent:'space-between' }}
+
+        alignItems="center"
+      >
+        <Box
+         textAlign="center">
+          <Typography
+            sx={{
+              fontSize: '0.75rem',
+              opacity: 0.8
+            }}
+          >
+            Ahead of you
+          </Typography>
+
+          <Typography
+            sx={{
+              fontSize: '2rem',
+              fontWeight: 800
+            }}
+          >
+            {waitingCount}
+          </Typography>
+        </Box>
+
+        <Box  textAlign="center">
+          <Typography
+            sx={{
+              fontSize: '0.75rem',
+              opacity: 0.8
+            }}
+          >
+            Est. Wait
+          </Typography>
+
+          <Typography
+            sx={{
+              fontSize: '2rem',
+              fontWeight: 800
+            }}
+          >
+            ~{estimatedTime}
+          </Typography>
+        </Box>
+      </Box>
+    </Card>
+  );
+};
+
+export default TokenCard;