louiscklaw/lettersoup-online
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
39a7d32fcd5faffd58cbecb9abdc1d93e43fbdb8
lettersoup-online/002_source/cms/src/app/dashboard/Sample/_repomix.md
louiscklaw da08798b10 update,
2025-04-24 01:08:44 +08:00

30 KiB
Raw Blame History

This file is a merged representation of the entire codebase, combined into a single document by Repomix.

File Summary

Purpose

This file contains a packed representation of the entire repository's contents. It is designed to be easily consumable by AI systems for analysis, code review, or other automated processes.

File Format

The content is organized as follows:

  1. This summary section
  2. Repository information
  3. Directory structure
  4. Multiple file entries, each consisting of: a. A header with the file path (## File: path/to/file) b. The full contents of the file in a code block

Usage Guidelines

  • This file should be treated as read-only. Any changes should be made to the original repository files, not this packed version.
  • When processing this file, use the file path to distinguish between different files in the repository.
  • Be aware that this file may contain sensitive information. Handle it with the same level of security as you would the original repository.

Notes

  • Some files may have been excluded based on .gitignore rules and Repomix's configuration
  • Binary files are not included in this packed representation. Please refer to the Repository Structure section for a complete list of file paths, including binary files
  • Files matching patterns in .gitignore are excluded
  • Files matching default ignore patterns are excluded
  • Files are sorted by Git change count (files with more changes are at the bottom)

Additional Info

Directory Structure

AddressCard/
  index.tsx
  SampleAddresses.tsx
BasicDetailCard/
  index.tsx
Notifications/
  index.tsx
  type.d.ts
PaymentCard/
  index.tsx
  SamplePayments.tsx
SecurityCard/
  index.tsx
TitleCard/
  index.tsx
Helloworld.tsx
repomix-output.xml

Files

File: AddressCard/index.tsx

'use client';

import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardHeader from '@mui/material/CardHeader';
import Grid from '@mui/material/Unstable_Grid2';
import { House as HouseIcon } from '@phosphor-icons/react/dist/ssr/House';
import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
import { useTranslation } from 'react-i18next';

import type { Address } from '@/types/Address';
import { ShippingAddress } from '@/components/dashboard/lp/categories/shipping-address';

import { SampleAddresses } from './SampleAddresses';

export default function SampleAddressCard(): React.JSX.Element {
  const { t } = useTranslation();
  return (
    <Card>
      <CardHeader
        action={
          <Button
            color="secondary"
            startIcon={<PlusIcon />}
          >
            {t('list.add')}
          </Button>
        }
        avatar={
          <Avatar>
            <HouseIcon fontSize="var(--Icon-fontSize)" />
          </Avatar>
        }
        title={t('list.shipping-addresses')}
      />
      <CardContent>
        <Grid
          container
          spacing={3}
        >
          {(SampleAddresses satisfies Address[]).map((address) => (
            <Grid
              key={address.id}
              md={6}
              xs={12}
            >
              <ShippingAddress address={address} />
            </Grid>
          ))}
        </Grid>
      </CardContent>
    </Card>
  );
}

File: AddressCard/SampleAddresses.tsx

'use client';

import type { Address } from '@/types/Address';

export const SampleAddresses: Address[] = [
  {
    id: 'ADR-001',
    country: 'United States',
    state: 'Michigan',
    city: 'Lansing',
    zipCode: '48933',
    street: '480 Haven Lane',
    primary: true,
  },
  {
    id: 'ADR-002',
    country: 'United States',
    state: 'Missouri',
    city: 'Springfield',
    zipCode: '65804',
    street: '4807 Lighthouse Drive',
  },
];

File: BasicDetailCard/index.tsx

'use client';

import * as React from 'react';
import { useRouter } from 'next/navigation';
import Avatar from '@mui/material/Avatar';
import Card from '@mui/material/Card';
import CardHeader from '@mui/material/CardHeader';
import Chip from '@mui/material/Chip';
import Divider from '@mui/material/Divider';
import IconButton from '@mui/material/IconButton';
import LinearProgress from '@mui/material/LinearProgress';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
import { useTranslation } from 'react-i18next';

import { PropertyItem } from '@/components/core/property-item';
import { PropertyList } from '@/components/core/property-list';

export default function BasicDetailCard({
  lpCatId,
  handleEditClick,
}: {
  lpCatId: string;
  handleEditClick: () => void;
}): React.JSX.Element {
  const { t } = useTranslation();

  return (
    <Card>
      <CardHeader
        action={
          <IconButton
            onClick={() => {
              handleEditClick();
            }}
          >
            <PencilSimpleIcon />
          </IconButton>
        }
        avatar={
          <Avatar>
            <UserIcon fontSize="var(--Icon-fontSize)" />
          </Avatar>
        }
        title={t('list.basic-details')}
      />
      <PropertyList
        divider={<Divider />}
        orientation="vertical"
        sx={{ '--PropertyItem-padding': '12px 24px' }}
      >
        {(
          [
            {
              key: 'Customer ID',
              value: (
                <Chip
                  label="USR-001"
                  size="small"
                  variant="soft"
                />
              ),
            },
            { key: 'Name', value: 'Miron Vitold' },
            { key: 'Email', value: 'miron.vitold@domain.com' },
            { key: 'Phone', value: '(425) 434-5535' },
            { key: 'Company', value: 'Devias IO' },
            {
              key: 'Quota',
              value: (
                <Stack
                  direction="row"
                  spacing={2}
                  sx={{ alignItems: 'center' }}
                >
                  <LinearProgress
                    sx={{ flex: '1 1 auto' }}
                    value={50}
                    variant="determinate"
                  />
                  <Typography
                    color="text.secondary"
                    variant="body2"
                  >
                    50%
                  </Typography>
                </Stack>
              ),
            },
          ] satisfies { key: string; value: React.ReactNode }[]
        ).map(
          (item): React.JSX.Element => (
            <PropertyItem
              key={item.key}
              name={item.key}
              value={item.value}
            />
          )
        )}
      </PropertyList>
    </Card>
  );
}

File: Notifications/index.tsx

'use client';

import { dayjs } from '@/lib/dayjs';

import type { Notification } from './type';

export const SampleNotifications: Notification[] = [
  {
    id: 'EV-002',
    type: 'Refund request approved',
    status: 'pending',
    createdAt: dayjs().subtract(34, 'minute').subtract(5, 'hour').subtract(3, 'day').toDate(),
  },
  {
    id: 'EV-001',
    type: 'Order confirmation',
    status: 'delivered',
    createdAt: dayjs().subtract(49, 'minute').subtract(11, 'hour').subtract(4, 'day').toDate(),
  },
];

File: Notifications/type.d.ts

export interface Notification {
  id: string;
  type: string;
  status: 'delivered' | 'pending' | 'failed';
  createdAt: Date;
}

File: PaymentCard/index.tsx

'use client';

import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardHeader from '@mui/material/CardHeader';
import Divider from '@mui/material/Divider';
import { CreditCard as CreditCardIcon } from '@phosphor-icons/react/dist/ssr/CreditCard';
import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
import { useTranslation } from 'react-i18next';

import { PropertyItem } from '@/components/core/property-item';
import { PropertyList } from '@/components/core/property-list';
import { Payments } from '@/components/dashboard/lp/categories/payments';

import { SamplePayments } from './SamplePayments';

export default function SamplePaymentCard(): React.JSX.Element {
  const { t } = useTranslation();
  return (
    <>
      <Payments
        ordersValue={2069.48}
        payments={SamplePayments}
        refundsValue={324.5}
        totalOrders={5}
      />
      <Card>
        <CardHeader
          action={
            <Button
              color="secondary"
              startIcon={<PencilSimpleIcon />}
            >
              {t('list.edit')}
            </Button>
          }
          avatar={
            <Avatar>
              <CreditCardIcon fontSize="var(--Icon-fontSize)" />
            </Avatar>
          }
          title={t('list.billing-details')}
        />
        <CardContent>
          <Card
            sx={{ borderRadius: 1 }}
            variant="outlined"
          >
            <PropertyList
              divider={<Divider />}
              sx={{ '--PropertyItem-padding': '16px' }}
            >
              {(
                [
                  { key: t('Credit card'), value: '**** 4142' },
                  { key: t('Country'), value: t('United States') },
                  { key: t('State'), value: t('Michigan') },
                  { key: t('City'), value: t('Southfield') },
                  { key: t('Address'), value: t('Address') },
                  { key: t('Tax ID'), value: t('Tax ID') },
                ] satisfies { key: string; value: React.ReactNode }[]
              ).map(
                (item): React.JSX.Element => (
                  <PropertyItem
                    key={item.key}
                    name={item.key}
                    value={item.value}
                  />
                )
              )}
            </PropertyList>
          </Card>
        </CardContent>
      </Card>
    </>
  );
}

File: PaymentCard/SamplePayments.tsx

'use client';

// import { dayjs } from 'dayjs';
import type { Payment } from '@/types/Payment';
import { dayjs } from '@/lib/dayjs';

export const SamplePayments: Payment[] = [
  {
    currency: 'USD',
    amount: 500,
    invoiceId: 'INV-005',
    status: 'completed',
    createdAt: dayjs().subtract(5, 'minute').subtract(1, 'hour').toDate(),
  },
  {
    currency: 'USD',
    amount: 324.5,
    invoiceId: 'INV-004',
    status: 'refunded',
    createdAt: dayjs().subtract(21, 'minute').subtract(2, 'hour').toDate(),
  },
  {
    currency: 'USD',
    amount: 746.5,
    invoiceId: 'INV-003',
    status: 'completed',
    createdAt: dayjs().subtract(7, 'minute').subtract(3, 'hour').toDate(),
  },
  {
    currency: 'USD',
    amount: 56.89,
    invoiceId: 'INV-002',
    status: 'completed',
    createdAt: dayjs().subtract(48, 'minute').subtract(4, 'hour').toDate(),
  },
  {
    currency: 'USD',
    amount: 541.59,
    invoiceId: 'INV-001',
    status: 'completed',
    createdAt: dayjs().subtract(31, 'minute').subtract(5, 'hour').toDate(),
  },
];

File: SecurityCard/index.tsx

'use client';

import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardHeader from '@mui/material/CardHeader';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { ShieldWarning as ShieldWarningIcon } from '@phosphor-icons/react/dist/ssr/ShieldWarning';
import { useTranslation } from 'react-i18next';

export default function SampleSecurityCard(): React.JSX.Element {
  const { t } = useTranslation();

  return (
    <Card>
      <CardHeader
        avatar={
          <Avatar>
            <ShieldWarningIcon fontSize="var(--Icon-fontSize)" />
          </Avatar>
        }
        title={t('list.security')}
      />
      <CardContent>
        <Stack spacing={1}>
          <div>
            <Button
              color="error"
              variant="contained"
            >
              {t('Delete account')}
            </Button>
          </div>
          <Typography
            color="text.secondary"
            variant="body2"
          >
            {t('a-deleted-customer-cannot-be-restored-all-data-will-be-permanently-removed')}
          </Typography>
        </Stack>
      </CardContent>
    </Card>
  );
}

File: TitleCard/index.tsx

'use client';

import * as React from 'react';
import { Button } from '@mui/material';
import Avatar from '@mui/material/Avatar';
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/CaretDown';
import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
import { useTranslation } from 'react-i18next';

export default function SampleTitleCard(): React.JSX.Element {
  const { t } = useTranslation();

  return (
    <>
      <Stack
        direction="row"
        spacing={2}
        sx={{ alignItems: 'center', flex: '1 1 auto' }}
      >
        <Avatar
          src="/assets/avatar-1.png"
          sx={{ '--Avatar-size': '64px' }}
        >
          empty
        </Avatar>
        <div>
          <Stack
            direction="row"
            spacing={2}
            sx={{ alignItems: 'center', flexWrap: 'wrap' }}
          >
            <Typography variant="h4">{t('list.customer-name')}</Typography>
            <Chip
              icon={
                <CheckCircleIcon
                  color="var(--mui-palette-success-main)"
                  weight="fill"
                />
              }
              label={t('list.active')}
              size="small"
              variant="outlined"
            />
          </Stack>
          <Typography
            color="text.secondary"
            variant="body1"
          >
            {t('list.customer-email')}
          </Typography>
        </div>
      </Stack>
      <div>
        <Button
          endIcon={<CaretDownIcon />}
          variant="contained"
        >
          {t('list.action')}
        </Button>
      </div>
    </>
  );
}

File: Helloworld.tsx

'use client';

import * as React from 'react';
import useEnhancedEffect from '@mui/utils/useEnhancedEffect';

function Page(): React.JSX.Element {
  React.useLayoutEffect(() => {
    console.log('helloworld');
  }, []);

  return <>helloworld</>;
}

export default Page;

File: repomix-output.xml

This file is a merged representation of the entire codebase, combined into a single document by Repomix.

<file_summary>
This section contains a summary of this file.

<purpose>
This file contains a packed representation of the entire repository's contents.
It is designed to be easily consumable by AI systems for analysis, code review,
or other automated processes.
</purpose>

<file_format>
The content is organized as follows:
1. This summary section
2. Repository information
3. Directory structure
4. Repository files, each consisting of:
  - File path as an attribute
  - Full contents of the file
</file_format>

<usage_guidelines>
- This file should be treated as read-only. Any changes should be made to the
  original repository files, not this packed version.
- When processing this file, use the file path to distinguish
  between different files in the repository.
- Be aware that this file may contain sensitive information. Handle it with
  the same level of security as you would the original repository.
</usage_guidelines>

<notes>
- Some files may have been excluded based on .gitignore rules and Repomix's configuration
- Binary files are not included in this packed representation. Please refer to the Repository Structure section for a complete list of file paths, including binary files
- Files matching patterns in .gitignore are excluded
- Files matching default ignore patterns are excluded
- Files are sorted by Git change count (files with more changes are at the bottom)
</notes>

<additional_info>

</additional_info>

</file_summary>

<directory_structure>
AddressCard/
  index.tsx
  SampleAddresses.tsx
BasicDetailCard/
  index.tsx
Notifications/
  index.tsx
  type.d.ts
PaymentCard/
  index.tsx
  SamplePayments.tsx
SecurityCard/
  index.tsx
TitleCard/
  index.tsx
Helloworld.tsx
</directory_structure>

<files>
This section contains the contents of the repository's files.

<file path="AddressCard/index.tsx">
'use client';

import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardHeader from '@mui/material/CardHeader';
import Grid from '@mui/material/Unstable_Grid2';
import { House as HouseIcon } from '@phosphor-icons/react/dist/ssr/House';
import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
import { useTranslation } from 'react-i18next';

import type { Address } from '@/types/Address';
import { ShippingAddress } from '@/components/dashboard/lp/categories/shipping-address';

import { SampleAddresses } from './SampleAddresses';

export default function SampleAddressCard(): React.JSX.Element {
  const { t } = useTranslation();
  return (
    <Card>
      <CardHeader
        action={
          <Button
            color="secondary"
            startIcon={<PlusIcon />}
          >
            {t('list.add')}
          </Button>
        }
        avatar={
          <Avatar>
            <HouseIcon fontSize="var(--Icon-fontSize)" />
          </Avatar>
        }
        title={t('list.shipping-addresses')}
      />
      <CardContent>
        <Grid
          container
          spacing={3}
        >
          {(SampleAddresses satisfies Address[]).map((address) => (
            <Grid
              key={address.id}
              md={6}
              xs={12}
            >
              <ShippingAddress address={address} />
            </Grid>
          ))}
        </Grid>
      </CardContent>
    </Card>
  );
}
</file>

<file path="AddressCard/SampleAddresses.tsx">
'use client';

import type { Address } from '@/types/Address';

export const SampleAddresses: Address[] = [
  {
    id: 'ADR-001',
    country: 'United States',
    state: 'Michigan',
    city: 'Lansing',
    zipCode: '48933',
    street: '480 Haven Lane',
    primary: true,
  },
  {
    id: 'ADR-002',
    country: 'United States',
    state: 'Missouri',
    city: 'Springfield',
    zipCode: '65804',
    street: '4807 Lighthouse Drive',
  },
];
</file>

<file path="BasicDetailCard/index.tsx">
'use client';

import * as React from 'react';
import { useRouter } from 'next/navigation';
import Avatar from '@mui/material/Avatar';
import Card from '@mui/material/Card';
import CardHeader from '@mui/material/CardHeader';
import Chip from '@mui/material/Chip';
import Divider from '@mui/material/Divider';
import IconButton from '@mui/material/IconButton';
import LinearProgress from '@mui/material/LinearProgress';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
import { useTranslation } from 'react-i18next';

import { PropertyItem } from '@/components/core/property-item';
import { PropertyList } from '@/components/core/property-list';

export default function BasicDetailCard({
  lpCatId,
  handleEditClick,
}: {
  lpCatId: string;
  handleEditClick: () => void;
}): React.JSX.Element {
  const { t } = useTranslation();

  return (
    <Card>
      <CardHeader
        action={
          <IconButton
            onClick={() => {
              handleEditClick();
            }}
          >
            <PencilSimpleIcon />
          </IconButton>
        }
        avatar={
          <Avatar>
            <UserIcon fontSize="var(--Icon-fontSize)" />
          </Avatar>
        }
        title={t('list.basic-details')}
      />
      <PropertyList
        divider={<Divider />}
        orientation="vertical"
        sx={{ '--PropertyItem-padding': '12px 24px' }}
      >
        {(
          [
            {
              key: 'Customer ID',
              value: (
                <Chip
                  label="USR-001"
                  size="small"
                  variant="soft"
                />
              ),
            },
            { key: 'Name', value: 'Miron Vitold' },
            { key: 'Email', value: 'miron.vitold@domain.com' },
            { key: 'Phone', value: '(425) 434-5535' },
            { key: 'Company', value: 'Devias IO' },
            {
              key: 'Quota',
              value: (
                <Stack
                  direction="row"
                  spacing={2}
                  sx={{ alignItems: 'center' }}
                >
                  <LinearProgress
                    sx={{ flex: '1 1 auto' }}
                    value={50}
                    variant="determinate"
                  />
                  <Typography
                    color="text.secondary"
                    variant="body2"
                  >
                    50%
                  </Typography>
                </Stack>
              ),
            },
          ] satisfies { key: string; value: React.ReactNode }[]
        ).map(
          (item): React.JSX.Element => (
            <PropertyItem
              key={item.key}
              name={item.key}
              value={item.value}
            />
          )
        )}
      </PropertyList>
    </Card>
  );
}
</file>

<file path="Notifications/index.tsx">
'use client';

import { dayjs } from '@/lib/dayjs';

import type { Notification } from './type';

export const SampleNotifications: Notification[] = [
  {
    id: 'EV-002',
    type: 'Refund request approved',
    status: 'pending',
    createdAt: dayjs().subtract(34, 'minute').subtract(5, 'hour').subtract(3, 'day').toDate(),
  },
  {
    id: 'EV-001',
    type: 'Order confirmation',
    status: 'delivered',
    createdAt: dayjs().subtract(49, 'minute').subtract(11, 'hour').subtract(4, 'day').toDate(),
  },
];
</file>

<file path="Notifications/type.d.ts">
export interface Notification {
  id: string;
  type: string;
  status: 'delivered' | 'pending' | 'failed';
  createdAt: Date;
}
</file>

<file path="PaymentCard/index.tsx">
'use client';

import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardHeader from '@mui/material/CardHeader';
import Divider from '@mui/material/Divider';
import { CreditCard as CreditCardIcon } from '@phosphor-icons/react/dist/ssr/CreditCard';
import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
import { useTranslation } from 'react-i18next';

import { PropertyItem } from '@/components/core/property-item';
import { PropertyList } from '@/components/core/property-list';
import { Payments } from '@/components/dashboard/lp/categories/payments';

import { SamplePayments } from './SamplePayments';

export default function SamplePaymentCard(): React.JSX.Element {
  const { t } = useTranslation();
  return (
    <>
      <Payments
        ordersValue={2069.48}
        payments={SamplePayments}
        refundsValue={324.5}
        totalOrders={5}
      />
      <Card>
        <CardHeader
          action={
            <Button
              color="secondary"
              startIcon={<PencilSimpleIcon />}
            >
              {t('list.edit')}
            </Button>
          }
          avatar={
            <Avatar>
              <CreditCardIcon fontSize="var(--Icon-fontSize)" />
            </Avatar>
          }
          title={t('list.billing-details')}
        />
        <CardContent>
          <Card
            sx={{ borderRadius: 1 }}
            variant="outlined"
          >
            <PropertyList
              divider={<Divider />}
              sx={{ '--PropertyItem-padding': '16px' }}
            >
              {(
                [
                  { key: t('Credit card'), value: '**** 4142' },
                  { key: t('Country'), value: t('United States') },
                  { key: t('State'), value: t('Michigan') },
                  { key: t('City'), value: t('Southfield') },
                  { key: t('Address'), value: t('Address') },
                  { key: t('Tax ID'), value: t('Tax ID') },
                ] satisfies { key: string; value: React.ReactNode }[]
              ).map(
                (item): React.JSX.Element => (
                  <PropertyItem
                    key={item.key}
                    name={item.key}
                    value={item.value}
                  />
                )
              )}
            </PropertyList>
          </Card>
        </CardContent>
      </Card>
    </>
  );
}
</file>

<file path="PaymentCard/SamplePayments.tsx">
'use client';

// import { dayjs } from 'dayjs';
import type { Payment } from '@/types/Payment';
import { dayjs } from '@/lib/dayjs';

export const SamplePayments: Payment[] = [
  {
    currency: 'USD',
    amount: 500,
    invoiceId: 'INV-005',
    status: 'completed',
    createdAt: dayjs().subtract(5, 'minute').subtract(1, 'hour').toDate(),
  },
  {
    currency: 'USD',
    amount: 324.5,
    invoiceId: 'INV-004',
    status: 'refunded',
    createdAt: dayjs().subtract(21, 'minute').subtract(2, 'hour').toDate(),
  },
  {
    currency: 'USD',
    amount: 746.5,
    invoiceId: 'INV-003',
    status: 'completed',
    createdAt: dayjs().subtract(7, 'minute').subtract(3, 'hour').toDate(),
  },
  {
    currency: 'USD',
    amount: 56.89,
    invoiceId: 'INV-002',
    status: 'completed',
    createdAt: dayjs().subtract(48, 'minute').subtract(4, 'hour').toDate(),
  },
  {
    currency: 'USD',
    amount: 541.59,
    invoiceId: 'INV-001',
    status: 'completed',
    createdAt: dayjs().subtract(31, 'minute').subtract(5, 'hour').toDate(),
  },
];
</file>

<file path="SecurityCard/index.tsx">
'use client';

import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardHeader from '@mui/material/CardHeader';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { ShieldWarning as ShieldWarningIcon } from '@phosphor-icons/react/dist/ssr/ShieldWarning';
import { useTranslation } from 'react-i18next';

export default function SampleSecurityCard(): React.JSX.Element {
  const { t } = useTranslation();

  return (
    <Card>
      <CardHeader
        avatar={
          <Avatar>
            <ShieldWarningIcon fontSize="var(--Icon-fontSize)" />
          </Avatar>
        }
        title={t('list.security')}
      />
      <CardContent>
        <Stack spacing={1}>
          <div>
            <Button
              color="error"
              variant="contained"
            >
              {t('Delete account')}
            </Button>
          </div>
          <Typography
            color="text.secondary"
            variant="body2"
          >
            {t('a-deleted-customer-cannot-be-restored-all-data-will-be-permanently-removed')}
          </Typography>
        </Stack>
      </CardContent>
    </Card>
  );
}
</file>

<file path="TitleCard/index.tsx">
'use client';

import * as React from 'react';
import { Button } from '@mui/material';
import Avatar from '@mui/material/Avatar';
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/CaretDown';
import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
import { useTranslation } from 'react-i18next';

export default function SampleTitleCard(): React.JSX.Element {
  const { t } = useTranslation();

  return (
    <>
      <Stack
        direction="row"
        spacing={2}
        sx={{ alignItems: 'center', flex: '1 1 auto' }}
      >
        <Avatar
          src="/assets/avatar-1.png"
          sx={{ '--Avatar-size': '64px' }}
        >
          empty
        </Avatar>
        <div>
          <Stack
            direction="row"
            spacing={2}
            sx={{ alignItems: 'center', flexWrap: 'wrap' }}
          >
            <Typography variant="h4">{t('list.customer-name')}</Typography>
            <Chip
              icon={
                <CheckCircleIcon
                  color="var(--mui-palette-success-main)"
                  weight="fill"
                />
              }
              label={t('list.active')}
              size="small"
              variant="outlined"
            />
          </Stack>
          <Typography
            color="text.secondary"
            variant="body1"
          >
            {t('list.customer-email')}
          </Typography>
        </div>
      </Stack>
      <div>
        <Button
          endIcon={<CaretDownIcon />}
          variant="contained"
        >
          {t('list.action')}
        </Button>
      </div>
    </>
  );
}
</file>

<file path="Helloworld.tsx">
'use client';

import * as React from 'react';
import useEnhancedEffect from '@mui/utils/useEnhancedEffect';

function Page(): React.JSX.Element {
  React.useLayoutEffect(() => {
    console.log('helloworld');
  }, []);

  return <>helloworld</>;
}

export default Page;
</file>

</files>