import React, { useEffect, useState, useRef } from 'react';

import {
  Avatar,
  Box,
  Grid,
  IconButton,
  Paper,
  Stack,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TablePagination,
  TableRow,
  Tooltip,
  Typography,
  Skeleton,
  InputBase
} from '@mui/material';
import axios from 'axios';
import dayjs from 'dayjs';
import { useNavigate } from 'react-router-dom';
import {
  MdReceiptLong,
  MdAccessTime,
  MdCheckCircle,
  MdHourglassEmpty,
  MdWarning,
  MdSearch,
  MdClear,
  MdVisibility,
  MdInventory2,
  MdCalendarMonth,
  MdEventBusy
} from 'react-icons/md';
import Loader from 'components/Loader';

// ============================================================================
// Design tokens — shared with the rest of the redesigned operator pages.
// ============================================================================
const DT = {
  radiusPill: 999,
  radiusCard: 16,
  shadowSoft: '0 14px 40px rgba(15, 23, 42, 0.10)',
  shadowMd: '0 8px 24px rgba(15, 23, 42, 0.08)',
  shadowPop: '0 18px 50px rgba(15, 23, 42, 0.18)',
  textPrimary: '#0f172a',
  textSecondary: '#64748b',
  textMuted: '#94a3b8',
  borderSubtle: '#e2e8f0',
  divider: '#f1f5f9',
  surface: '#ffffff',
  surfaceAlt: '#f8fafc'
};
const dtA = (c, suffix) => `${c}${suffix}`;
const tint = (c) => dtA(c, '08');
const soft = (c) => dtA(c, '18');
const ring = (c) => dtA(c, '26');
const edge = (c) => dtA(c, '55');

const BRAND = '#662582';
const BRAND_LIGHT = '#9255AB';

// Status palette for the four invoice buckets.
const INVOICE_STATUS_TABS = [
  { idx: 0, billStatus: 0, label: 'All',     color: BRAND,     icon: MdReceiptLong,    countKey: 'totalcount' },
  { idx: 1, billStatus: 1, label: 'Open',    color: '#f59e0b', icon: MdHourglassEmpty, countKey: 'pendingcount' },
  { idx: 2, billStatus: 2, label: 'Overdue', color: '#ef4444', icon: MdEventBusy,      countKey: 'overduecount' },
  { idx: 3, billStatus: 3, label: 'Paid',    color: '#10b981', icon: MdCheckCircle,    countKey: 'paidcount' }
];

function formatNumberToRupees(value) {
  return new Intl.NumberFormat('en-IN', {
    style: 'currency',
    currency: 'INR',
    minimumFractionDigits: 2
  }).format(value || 0);
}

const Invoice = () => {
  const navigate = useNavigate();
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(10);
  const [value, setValue] = useState(0);
  const [deliveryList, setDeliveryList] = useState([]);
  const [billStatus, setBillStatus] = useState(0);
  const [isloader, setIsLoader] = useState(false);
  const [insightdata, setInsightdata] = useState({});
  const [search, setSearch] = useState('');
  const [debouncedSearch, setDebouncedSearch] = useState('');
  const tenid = localStorage.getItem('tenantid');
  const textFieldRef = useRef(null);

  // ============================================= || handleKeyPress (ctrl+k) || =============================================
  useEffect(() => {
    const handleKeyPress = (event) => {
      if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
        event.preventDefault();
        textFieldRef.current && textFieldRef.current.focus();
      }
      if (event.key === 'Escape' && document.activeElement === textFieldRef.current) {
        textFieldRef.current.blur();
      }
    };
    document.addEventListener('keydown', handleKeyPress);
    return () => document.removeEventListener('keydown', handleKeyPress);
  }, []);

  // Debounce search.
  useEffect(() => {
    const t = setTimeout(() => setDebouncedSearch(search), 350);
    return () => clearTimeout(t);
  }, [search]);

  const handleChangePage = (event, newPage) => setPage(newPage);
  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(+event.target.value);
    setPage(0);
  };

  // ============================================= || fetchinvoiceinsight ||  =============================================
  const fetchinvoiceinsight = async () => {
    try {
      const insightResponse = await axios.get(`${process.env.REACT_APP_URL}/invoice/getinvoiceinsight/?tenantid=${tenid}`);
      setInsightdata(insightResponse.data.details || {});
    } catch (error) {
      console.log('insightResponse', error);
    }
  };
  useEffect(() => {
    fetchinvoiceinsight();
  }, []);

  // ============================================= || fetchdeliverylist ||  =============================================
  const fetchdeliverylist = async () => {
    setIsLoader(true);
    try {
      const url = `${process.env.REACT_APP_URL}/invoice/getallinvoice/?billstatus=${billStatus}&tenantid=${tenid}`;
      const deliveyResponse = await axios.get(url);
      setDeliveryList(deliveyResponse.data.details || []);
    } catch (error) {
      console.log('fetchdeliverylist', error);
    } finally {
      setIsLoader(false);
    }
  };
  useEffect(() => {
    fetchdeliverylist();
    setPage(0);
  }, [billStatus]);

  // Client-side search filter — case-insensitive on invoice number.
  const filteredList = (deliveryList || []).filter((d) =>
    String(d.invoiceno || '').toLowerCase().includes(String(debouncedSearch || '').toLowerCase())
  );

  const handleChangetab = (i) => {
    const tab = INVOICE_STATUS_TABS[i];
    setValue(i);
    setBillStatus(tab.billStatus);
    setSearch('');
  };

  // KPI tile definitions.
  const kpiCards = INVOICE_STATUS_TABS.map((t) => ({
    ...t,
    value: insightdata?.[t.countKey] ?? 0
  }));

  return (
    <>
      {isloader && <Loader />}

      {/* ============================================= || Header (compact) || ============================================= */}
      <Paper
        elevation={0}
        sx={{
          mb: { xs: 1, md: 1.25 },
          px: { xs: 1.5, sm: 2 },
          py: { xs: 1, sm: 1.25 },
          borderRadius: 2,
          border: '1px solid',
          borderColor: DT.borderSubtle,
          background: `linear-gradient(135deg, ${tint(BRAND)} 0%, ${tint(BRAND_LIGHT)} 100%)`,
          boxShadow: DT.shadowMd
        }}
      >
        <Stack direction="row" alignItems="center" spacing={1.25}>
          <Avatar
            variant="rounded"
            sx={{
              width: 36,
              height: 36,
              bgcolor: BRAND,
              color: '#fff',
              borderRadius: 1.5,
              boxShadow: `0 4px 12px ${ring(BRAND)}`
            }}
          >
            <MdReceiptLong size={19} />
          </Avatar>
          <Stack spacing={0.125}>
            <Typography
              variant="h3"
              sx={{
                fontWeight: 800,
                color: DT.textPrimary,
                lineHeight: 1.1,
                fontSize: { xs: '1.1rem', sm: '1.25rem', md: '1.375rem' }
              }}
            >
              Invoices
            </Typography>
            <Stack direction="row" alignItems="center" spacing={0.75}>
              <Box
                sx={{
                  width: 7,
                  height: 7,
                  borderRadius: '50%',
                  bgcolor: '#10b981',
                  boxShadow: '0 0 0 3px rgba(16,185,129,0.18)'
                }}
              />
              <Typography sx={{ fontSize: 11.5, color: DT.textSecondary, fontWeight: 600 }}>
                Live · {INVOICE_STATUS_TABS[value].label}
              </Typography>
            </Stack>
          </Stack>
        </Stack>
      </Paper>

      {/* ============================================= || KPI Cards (compact, clickable) || ============================================= */}
      <Grid container spacing={{ xs: 1, sm: 1.25, md: 1.5 }}>
        {kpiCards.map((item) => {
          const Icon = item.icon;
          const active = value === item.idx;
          return (
            <Grid item key={item.label} xs={6} sm={6} md={3}>
              <Paper
                elevation={0}
                onClick={() => handleChangetab(item.idx)}
                sx={{
                  cursor: 'pointer',
                  position: 'relative',
                  overflow: 'hidden',
                  px: { xs: 1.25, sm: 1.5 },
                  py: { xs: 0.875, sm: 1.125 },
                  borderRadius: 2,
                  border: '1px solid',
                  borderColor: active ? edge(item.color) : DT.borderSubtle,
                  background: '#fff',
                  boxShadow: active ? `0 4px 14px ${ring(item.color)}` : 'none',
                  transition: 'transform 0.15s, box-shadow 0.15s, border-color 0.15s',
                  '&:hover': {
                    transform: 'translateY(-1px)',
                    boxShadow: DT.shadowMd,
                    borderColor: edge(item.color)
                  }
                }}
              >
                <Box
                  sx={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    bottom: 0,
                    width: 3,
                    background: item.color
                  }}
                />
                <Stack direction="row" alignItems="center" justifyContent="space-between" spacing={1} sx={{ pl: 0.5 }}>
                  <Stack spacing={0.125} sx={{ minWidth: 0, flex: 1 }}>
                    <Typography
                      sx={{
                        color: DT.textSecondary,
                        fontWeight: 700,
                        letterSpacing: 0.4,
                        textTransform: 'uppercase',
                        fontSize: 10.5,
                        whiteSpace: 'nowrap',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        lineHeight: 1.2
                      }}
                    >
                      {item.label} Invoices
                    </Typography>
                    <Typography
                      sx={{
                        fontWeight: 800,
                        color: DT.textPrimary,
                        lineHeight: 1.15,
                        fontSize: { xs: '0.95rem', sm: '1.1rem', md: '1.2rem' }
                      }}
                      noWrap
                    >
                      {insightdata && insightdata[item.countKey] != null ? (
                        insightdata[item.countKey]
                      ) : (
                        <Skeleton sx={{ width: 40 }} animation="wave" />
                      )}
                    </Typography>
                  </Stack>
                  <Avatar
                    variant="rounded"
                    sx={{
                      width: 30,
                      height: 30,
                      bgcolor: soft(item.color),
                      color: item.color,
                      borderRadius: 1.25,
                      flexShrink: 0
                    }}
                  >
                    <Icon size={15} />
                  </Avatar>
                </Stack>
              </Paper>
            </Grid>
          );
        })}
      </Grid>

      {/* ============================================= || Status Tabs + Search (compact) || ============================================= */}
      <Paper
        elevation={0}
        sx={{
          mt: { xs: 1, md: 1.25 },
          p: { xs: 0.875, md: 1.125 },
          borderTopLeftRadius: 2,
          borderTopRightRadius: 2,
          borderBottomLeftRadius: 0,
          borderBottomRightRadius: 0,
          border: '1px solid',
          borderColor: DT.borderSubtle,
          borderBottom: 0,
          background: '#fff'
        }}
      >
        <Stack direction="row" alignItems="center" justifyContent="space-between" gap={1.5} sx={{ flexWrap: 'wrap-reverse' }}>
          <Stack
            direction="row"
            spacing={0.75}
            sx={{
              flex: 1,
              overflowX: 'auto',
              py: 0.5,
              px: 0.25,
              '&::-webkit-scrollbar': { height: 6 },
              '&::-webkit-scrollbar-thumb': { backgroundColor: DT.borderSubtle, borderRadius: 4 }
            }}
          >
            {INVOICE_STATUS_TABS.map((t) => {
              const Icon = t.icon;
              const active = value === t.idx;
              const count = insightdata?.[t.countKey] ?? 0;
              return (
                <Box
                  key={t.label}
                  onClick={() => handleChangetab(t.idx)}
                  sx={{
                    display: 'inline-flex',
                    alignItems: 'center',
                    gap: { xs: 0.625, md: 0.875 },
                    pl: 0.5,
                    pr: { xs: 1, md: 1.25 },
                    py: 0.5,
                    flexShrink: 0,
                    cursor: 'pointer',
                    borderRadius: 999,
                    border: `1.5px solid ${active ? t.color : edge(t.color)}`,
                    bgcolor: active ? t.color : tint(t.color),
                    color: active ? '#fff' : t.color,
                    fontWeight: 700,
                    boxShadow: active ? `0 6px 18px ${ring(t.color)}` : 'none',
                    transition: 'all 0.18s',
                    '&:hover': {
                      borderColor: t.color,
                      boxShadow: active ? `0 6px 18px ${ring(t.color)}` : `0 0 0 3px ${ring(t.color)}`
                    }
                  }}
                >
                  <Avatar
                    sx={{
                      width: { xs: 22, md: 26 },
                      height: { xs: 22, md: 26 },
                      bgcolor: active ? 'rgba(255,255,255,0.22)' : soft(t.color),
                      color: active ? '#fff' : t.color
                    }}
                  >
                    <Icon size={13} />
                  </Avatar>
                  <Typography variant="caption" sx={{ fontWeight: 800, fontSize: { xs: 11.5, md: 13 }, lineHeight: 1 }}>
                    {t.label}
                  </Typography>
                  <Box
                    sx={{
                      minWidth: { xs: 22, md: 26 },
                      height: { xs: 18, md: 22 },
                      px: 0.625,
                      display: 'inline-flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      borderRadius: 999,
                      fontSize: { xs: 10, md: 11 },
                      fontWeight: 800,
                      bgcolor: active ? 'rgba(255,255,255,0.22)' : '#fff',
                      color: active ? '#fff' : t.color,
                      border: active ? 'none' : `1px solid ${edge(t.color)}`
                    }}
                  >
                    {count}
                  </Box>
                </Box>
              );
            })}
          </Stack>

          <Box sx={{ width: { xs: '100%', sm: 260, lg: 300 }, flex: { xs: '1 1 100%', sm: '0 0 auto' } }}>
            <Box
              sx={{
                display: 'flex',
                alignItems: 'center',
                gap: 0.75,
                px: 1.25,
                py: 0.5,
                borderRadius: 999,
                bgcolor: tint(BRAND),
                border: `1.5px solid ${edge(BRAND)}`,
                transition: 'all 0.18s',
                '&:focus-within': {
                  borderColor: BRAND,
                  boxShadow: `0 0 0 3px ${ring(BRAND)}`
                }
              }}
            >
              <MdSearch size={16} style={{ color: BRAND, flexShrink: 0 }} />
              <InputBase
                inputRef={textFieldRef}
                placeholder="Search invoice no (ctrl+k)"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                autoComplete="off"
                sx={{
                  flex: 1,
                  fontSize: 13,
                  fontWeight: 600,
                  color: DT.textPrimary,
                  '& input::placeholder': { color: DT.textMuted, opacity: 1 }
                }}
              />
              {search && (
                <IconButton size="small" onClick={() => setSearch('')} sx={{ p: 0.25, color: BRAND }}>
                  <MdClear size={14} />
                </IconButton>
              )}
            </Box>
          </Box>
        </Stack>
      </Paper>

      {/* ============================================= || Table (dense, sticky header) || ============================================= */}
      <Paper
        elevation={0}
        sx={{
          borderTopLeftRadius: 0,
          borderTopRightRadius: 0,
          borderBottomLeftRadius: 2,
          borderBottomRightRadius: 2,
          border: '1px solid',
          borderColor: DT.borderSubtle,
          overflow: 'hidden',
          background: '#fff'
        }}
      >
        <TableContainer
          sx={{
            minHeight: 320,
            maxHeight: { xs: 'calc(100vh - 380px)', md: 'calc(100vh - 350px)' },
            overflow: 'auto',
            '&::-webkit-scrollbar': { width: 10, height: 10 },
            '&::-webkit-scrollbar-thumb': {
              backgroundColor: edge(BRAND),
              borderRadius: 8,
              '&:hover': { backgroundColor: BRAND }
            },
            '&::-webkit-scrollbar-track': { backgroundColor: DT.surfaceAlt }
          }}
        >
          <Table stickyHeader size="small" sx={{ minWidth: 880 }}>
            <TableHead>
              <TableRow
                sx={{
                  '& th': {
                    backgroundColor: DT.surfaceAlt,
                    color: DT.textSecondary,
                    fontSize: 10.5,
                    fontWeight: 800,
                    letterSpacing: 0.5,
                    textTransform: 'uppercase',
                    whiteSpace: 'nowrap',
                    borderBottom: `1px solid ${DT.borderSubtle}`,
                    py: 0.75,
                    px: 1
                  }
                }}
              >
                <TableCell>#</TableCell>
                <TableCell>Client</TableCell>
                <TableCell>Invoice Id</TableCell>
                <TableCell>Invoice Date</TableCell>
                <TableCell>Due Date</TableCell>
                <TableCell align="center">Count</TableCell>
                <TableCell align="right">Amount</TableCell>
                <TableCell align="center">Action</TableCell>
              </TableRow>
            </TableHead>

            <TableBody>
              {isloader && filteredList.length === 0 && (
                Array.from({ length: 10 }).map((_, idx) => (
                  <TableRow key={`sk-${idx}`}>
                    {Array.from({ length: 8 }).map((__, ci) => (
                      <TableCell key={ci} sx={{ borderBottom: `1px solid ${DT.divider}`, py: 0.625, px: 1 }}>
                        <Skeleton animation="wave" height={20} />
                      </TableCell>
                    ))}
                  </TableRow>
                ))
              )}

              {!isloader && filteredList.length === 0 && (
                <TableRow>
                  <TableCell colSpan={8} sx={{ py: 7, borderBottom: 'none' }}>
                    <Stack alignItems="center" spacing={1.25}>
                      <Avatar
                        variant="rounded"
                        sx={{
                          width: 56,
                          height: 56,
                          bgcolor: soft('#94a3b8'),
                          color: DT.textMuted,
                          borderRadius: 2
                        }}
                      >
                        <MdReceiptLong size={26} />
                      </Avatar>
                      <Typography sx={{ fontWeight: 700, color: DT.textPrimary, fontSize: 14 }}>
                        No {INVOICE_STATUS_TABS[value].label.toLowerCase()} invoices
                      </Typography>
                      <Typography sx={{ color: DT.textSecondary, fontSize: 12 }}>
                        {search ? 'Try a different invoice number or clear the search.' : 'Switch tabs above to load invoices.'}
                      </Typography>
                      {search && (
                        <Box
                          component="button"
                          onClick={() => setSearch('')}
                          sx={{
                            mt: 0.5,
                            border: 'none',
                            cursor: 'pointer',
                            display: 'inline-flex',
                            alignItems: 'center',
                            gap: 0.5,
                            height: 28,
                            px: 1,
                            fontSize: 12,
                            fontWeight: 700,
                            color: BRAND,
                            borderRadius: 1.25,
                            background: 'transparent',
                            '&:hover': { bgcolor: tint(BRAND) }
                          }}
                        >
                          <MdClear size={14} /> Clear search
                        </Box>
                      )}
                    </Stack>
                  </TableCell>
                </TableRow>
              )}

              {filteredList.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((item, index) => {
                const tabMeta = INVOICE_STATUS_TABS[value];
                return (
                  <TableRow
                    key={`${item.invoiceno}-${index}`}
                    sx={{
                      cursor: 'pointer',
                      transition: 'background-color 0.12s, box-shadow 0.12s',
                      '& td': {
                        borderBottom: `1px solid ${DT.divider}`,
                        py: 0.5,
                        px: 1,
                        verticalAlign: 'middle'
                      },
                      '&:hover': {
                        backgroundColor: tint(BRAND),
                        boxShadow: `inset 3px 0 0 ${BRAND}`
                      }
                    }}
                    onClick={() => {
                      setIsLoader(true);
                      setTimeout(() => {
                        setIsLoader(false);
                        navigate('/nearle/invoice/preview', { state: item });
                      }, 300);
                    }}
                  >
                    <TableCell>
                      <Typography sx={{ fontWeight: 700, fontSize: 12, color: DT.textMuted }}>
                        {page * rowsPerPage + index + 1}
                      </Typography>
                    </TableCell>

                    <TableCell>
                      <Typography sx={{ fontSize: 12.5, fontWeight: 700, color: DT.textPrimary, lineHeight: 1.25 }} noWrap>
                        {item.tenantname}
                      </Typography>
                      <Typography sx={{ fontSize: 11, fontWeight: 600, color: DT.textSecondary, lineHeight: 1.3 }} noWrap>
                        {item.contactperson}
                      </Typography>
                    </TableCell>

                    <TableCell>
                      <Box
                        sx={{
                          display: 'inline-flex',
                          alignItems: 'center',
                          gap: 0.5,
                          px: 0.875,
                          py: 0.25,
                          borderRadius: 999,
                          bgcolor: tint(BRAND),
                          border: `1px solid ${edge(BRAND)}`,
                          color: BRAND,
                          fontSize: 11,
                          fontWeight: 800,
                          whiteSpace: 'nowrap'
                        }}
                      >
                        <MdReceiptLong size={11} /> {item.invoiceno}
                      </Box>
                    </TableCell>

                    <TableCell>
                      {item.transactiondate ? (
                        <Stack spacing={0} sx={{ lineHeight: 1.1 }}>
                          <Typography sx={{ fontSize: 12.5, fontWeight: 800, color: DT.textPrimary, lineHeight: 1.15 }} noWrap>
                            {dayjs(item.transactiondate).format('hh:mm A')}
                          </Typography>
                          <Typography sx={{ fontSize: 10.5, fontWeight: 600, color: DT.textMuted, lineHeight: 1.2 }} noWrap>
                            {dayjs(item.transactiondate).format('DD MMM YYYY')}
                          </Typography>
                        </Stack>
                      ) : (
                        <Typography sx={{ fontSize: 12, color: DT.textMuted, fontWeight: 700 }}>—</Typography>
                      )}
                    </TableCell>

                    <TableCell>
                      {item.duedate ? (
                        <Stack spacing={0} sx={{ lineHeight: 1.1 }}>
                          <Typography sx={{ fontSize: 12.5, fontWeight: 800, color: DT.textPrimary, lineHeight: 1.15 }} noWrap>
                            {dayjs(item.duedate).format('hh:mm A')}
                          </Typography>
                          <Typography sx={{ fontSize: 10.5, fontWeight: 600, color: DT.textMuted, lineHeight: 1.2 }} noWrap>
                            {dayjs(item.duedate).format('DD MMM YYYY')}
                          </Typography>
                        </Stack>
                      ) : (
                        <Typography sx={{ fontSize: 12, color: DT.textMuted, fontWeight: 700 }}>—</Typography>
                      )}
                    </TableCell>

                    <TableCell align="center">
                      <Box
                        sx={{
                          display: 'inline-flex',
                          alignItems: 'center',
                          gap: 0.5,
                          px: 0.875,
                          py: 0.25,
                          borderRadius: 999,
                          bgcolor: tint('#0ea5e9'),
                          border: `1px solid ${edge('#0ea5e9')}`,
                          color: '#0ea5e9',
                          fontSize: 12,
                          fontWeight: 800
                        }}
                      >
                        <MdInventory2 size={11} /> {item.itemcount ?? 0}
                      </Box>
                    </TableCell>

                    <TableCell align="right">
                      <Typography sx={{ fontWeight: 800, color: tabMeta.color, fontSize: 13, whiteSpace: 'nowrap' }}>
                        {formatNumberToRupees(item.totalamount)}
                      </Typography>
                    </TableCell>

                    <TableCell align="center">
                      <Tooltip title="Preview Invoice">
                        <IconButton
                          size="small"
                          onClick={(e) => {
                            e.stopPropagation();
                            setIsLoader(true);
                            setTimeout(() => {
                              setIsLoader(false);
                              navigate('/nearle/invoice/preview', { state: item });
                            }, 300);
                          }}
                          sx={{
                            bgcolor: tint(BRAND),
                            border: `1px solid ${edge(BRAND)}`,
                            color: BRAND,
                            borderRadius: 999,
                            p: 0.75,
                            '&:hover': {
                              bgcolor: soft(BRAND),
                              borderColor: BRAND
                            }
                          }}
                        >
                          <MdVisibility size={14} />
                        </IconButton>
                      </Tooltip>
                    </TableCell>
                  </TableRow>
                );
              })}
            </TableBody>
          </Table>
        </TableContainer>

        <TablePagination
          rowsPerPageOptions={[5, 10, 25, 100]}
          component="div"
          count={filteredList.length}
          rowsPerPage={rowsPerPage}
          page={page}
          onPageChange={handleChangePage}
          onRowsPerPageChange={handleChangeRowsPerPage}
          sx={{
            borderTop: `1px solid ${DT.divider}`,
            '& .MuiTablePagination-toolbar': { color: DT.textSecondary, fontWeight: 600 }
          }}
        />
      </Paper>
    </>
  );
};

export default Invoice;
