@canmingir/link 1.1.0

package/minimal/src/sections/user/view/user-edit-view.jsx

@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types';
+
+import Container from '@mui/material/Container';
+
+import { paths } from 'src/routes/paths';
+
+import { _userList } from 'src/_mock';
+
+import { useSettingsContext } from 'src/components/settings';
+import CustomBreadcrumbs from 'src/components/custom-breadcrumbs';
+
+import UserNewEditForm from '../user-new-edit-form';
+
+// ----------------------------------------------------------------------
+
+export default function UserEditView({ id }) {
+  const settings = useSettingsContext();
+
+  const currentUser = _userList.find((user) => user.id === id);
+
+  return (
+    <Container maxWidth={settings.themeStretch ? false : 'lg'}>
+      <CustomBreadcrumbs
+        heading="Edit"
+        links={[
+          {
+            name: 'Dashboard',
+            href: paths.dashboard.root,
+          },
+          {
+            name: 'User',
+            href: paths.dashboard.user.root,
+          },
+          { name: currentUser?.name },
+        ]}
+        sx={{
+          mb: { xs: 3, md: 5 },
+        }}
+      />
+
+      <UserNewEditForm currentUser={currentUser} />
+    </Container>
+  );
+}
+
+UserEditView.propTypes = {
+  id: PropTypes.string,
+};

package/minimal/src/sections/user/view/user-list-view.jsx

@@ -0,0 +1,367 @@
+import isEqual from 'lodash/isEqual';
+import { useState, useCallback } from 'react';
+
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import Card from '@mui/material/Card';
+import Table from '@mui/material/Table';
+import Button from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
+import { alpha } from '@mui/material/styles';
+import Container from '@mui/material/Container';
+import TableBody from '@mui/material/TableBody';
+import IconButton from '@mui/material/IconButton';
+import TableContainer from '@mui/material/TableContainer';
+
+import { paths } from 'src/routes/paths';
+import { useRouter } from 'src/routes/hooks';
+import { RouterLink } from 'src/routes/components';
+
+import { useBoolean } from 'src/hooks/use-boolean';
+
+import { _roles, _userList, USER_STATUS_OPTIONS } from 'src/_mock';
+
+import Label from 'src/components/label';
+import Iconify from 'src/components/iconify';
+import Scrollbar from 'src/components/scrollbar';
+import { ConfirmDialog } from 'src/components/custom-dialog';
+import { useSettingsContext } from 'src/components/settings';
+import CustomBreadcrumbs from 'src/components/custom-breadcrumbs';
+import {
+  useTable,
+  emptyRows,
+  TableNoData,
+  getComparator,
+  TableEmptyRows,
+  TableHeadCustom,
+  TableSelectedAction,
+  TablePaginationCustom,
+} from 'src/components/table';
+
+import UserTableRow from '../user-table-row';
+import UserTableToolbar from '../user-table-toolbar';
+import UserTableFiltersResult from '../user-table-filters-result';
+
+// ----------------------------------------------------------------------
+
+const STATUS_OPTIONS = [{ value: 'all', label: 'All' }, ...USER_STATUS_OPTIONS];
+
+const TABLE_HEAD = [
+  { id: 'name', label: 'Name' },
+  { id: 'phoneNumber', label: 'Phone Number', width: 180 },
+  { id: 'company', label: 'Company', width: 220 },
+  { id: 'role', label: 'Role', width: 180 },
+  { id: 'status', label: 'Status', width: 100 },
+  { id: '', width: 88 },
+];
+
+const defaultFilters = {
+  name: '',
+  role: [],
+  status: 'all',
+};
+
+// ----------------------------------------------------------------------
+
+export default function UserListView() {
+  const table = useTable();
+
+  const settings = useSettingsContext();
+
+  const router = useRouter();
+
+  const confirm = useBoolean();
+
+  const [tableData, setTableData] = useState(_userList);
+
+  const [filters, setFilters] = useState(defaultFilters);
+
+  const dataFiltered = applyFilter({
+    inputData: tableData,
+    comparator: getComparator(table.order, table.orderBy),
+    filters,
+  });
+
+  const dataInPage = dataFiltered.slice(
+    table.page * table.rowsPerPage,
+    table.page * table.rowsPerPage + table.rowsPerPage
+  );
+
+  const denseHeight = table.dense ? 52 : 72;
+
+  const canReset = !isEqual(defaultFilters, filters);
+
+  const notFound = (!dataFiltered.length && canReset) || !dataFiltered.length;
+
+  const handleFilters = useCallback(
+    (name, value) => {
+      table.onResetPage();
+      setFilters((prevState) => ({
+        ...prevState,
+        [name]: value,
+      }));
+    },
+    [table]
+  );
+
+  const handleDeleteRow = useCallback(
+    (id) => {
+      const deleteRow = tableData.filter((row) => row.id !== id);
+      setTableData(deleteRow);
+
+      table.onUpdatePageDeleteRow(dataInPage.length);
+    },
+    [dataInPage.length, table, tableData]
+  );
+
+  const handleDeleteRows = useCallback(() => {
+    const deleteRows = tableData.filter((row) => !table.selected.includes(row.id));
+    setTableData(deleteRows);
+
+    table.onUpdatePageDeleteRows({
+      totalRows: tableData.length,
+      totalRowsInPage: dataInPage.length,
+      totalRowsFiltered: dataFiltered.length,
+    });
+  }, [dataFiltered.length, dataInPage.length, table, tableData]);
+
+  const handleEditRow = useCallback(
+    (id) => {
+      router.push(paths.dashboard.user.edit(id));
+    },
+    [router]
+  );
+
+  const handleFilterStatus = useCallback(
+    (event, newValue) => {
+      handleFilters('status', newValue);
+    },
+    [handleFilters]
+  );
+
+  const handleResetFilters = useCallback(() => {
+    setFilters(defaultFilters);
+  }, []);
+
+  return (
+    <>
+      <Container maxWidth={settings.themeStretch ? false : 'lg'}>
+        <CustomBreadcrumbs
+          heading="List"
+          links={[
+            { name: 'Dashboard', href: paths.dashboard.root },
+            { name: 'User', href: paths.dashboard.user.root },
+            { name: 'List' },
+          ]}
+          action={
+            <Button
+              component={RouterLink}
+              href={paths.dashboard.user.new}
+              variant="contained"
+              startIcon={<Iconify icon="mingcute:add-line" />}
+            >
+              New User
+            </Button>
+          }
+          sx={{
+            mb: { xs: 3, md: 5 },
+          }}
+        />
+
+        <Card>
+          <Tabs
+            value={filters.status}
+            onChange={handleFilterStatus}
+            sx={{
+              px: 2.5,
+              boxShadow: (theme) => `inset 0 -2px 0 0 ${alpha(theme.palette.grey[500], 0.08)}`,
+            }}
+          >
+            {STATUS_OPTIONS.map((tab) => (
+              <Tab
+                key={tab.value}
+                iconPosition="end"
+                value={tab.value}
+                label={tab.label}
+                icon={
+                  <Label
+                    variant={
+                      ((tab.value === 'all' || tab.value === filters.status) && 'filled') || 'soft'
+                    }
+                    color={
+                      (tab.value === 'active' && 'success') ||
+                      (tab.value === 'pending' && 'warning') ||
+                      (tab.value === 'banned' && 'error') ||
+                      'default'
+                    }
+                  >
+                    {tab.value === 'all' && _userList.length}
+                    {tab.value === 'active' &&
+                      _userList.filter((user) => user.status === 'active').length}
+
+                    {tab.value === 'pending' &&
+                      _userList.filter((user) => user.status === 'pending').length}
+                    {tab.value === 'banned' &&
+                      _userList.filter((user) => user.status === 'banned').length}
+                    {tab.value === 'rejected' &&
+                      _userList.filter((user) => user.status === 'rejected').length}
+                  </Label>
+                }
+              />
+            ))}
+          </Tabs>
+
+          <UserTableToolbar
+            filters={filters}
+            onFilters={handleFilters}
+            //
+            roleOptions={_roles}
+          />
+
+          {canReset && (
+            <UserTableFiltersResult
+              filters={filters}
+              onFilters={handleFilters}
+              //
+              onResetFilters={handleResetFilters}
+              //
+              results={dataFiltered.length}
+              sx={{ p: 2.5, pt: 0 }}
+            />
+          )}
+
+          <TableContainer sx={{ position: 'relative', overflow: 'unset' }}>
+            <TableSelectedAction
+              dense={table.dense}
+              numSelected={table.selected.length}
+              rowCount={tableData.length}
+              onSelectAllRows={(checked) =>
+                table.onSelectAllRows(
+                  checked,
+                  tableData.map((row) => row.id)
+                )
+              }
+              action={
+                <Tooltip title="Delete">
+                  <IconButton color="primary" onClick={confirm.onTrue}>
+                    <Iconify icon="solar:trash-bin-trash-bold" />
+                  </IconButton>
+                </Tooltip>
+              }
+            />
+
+            <Scrollbar>
+              <Table size={table.dense ? 'small' : 'medium'} sx={{ minWidth: 960 }}>
+                <TableHeadCustom
+                  order={table.order}
+                  orderBy={table.orderBy}
+                  headLabel={TABLE_HEAD}
+                  rowCount={tableData.length}
+                  numSelected={table.selected.length}
+                  onSort={table.onSort}
+                  onSelectAllRows={(checked) =>
+                    table.onSelectAllRows(
+                      checked,
+                      tableData.map((row) => row.id)
+                    )
+                  }
+                />
+
+                <TableBody>
+                  {dataFiltered
+                    .slice(
+                      table.page * table.rowsPerPage,
+                      table.page * table.rowsPerPage + table.rowsPerPage
+                    )
+                    .map((row) => (
+                      <UserTableRow
+                        key={row.id}
+                        row={row}
+                        selected={table.selected.includes(row.id)}
+                        onSelectRow={() => table.onSelectRow(row.id)}
+                        onDeleteRow={() => handleDeleteRow(row.id)}
+                        onEditRow={() => handleEditRow(row.id)}
+                      />
+                    ))}
+
+                  <TableEmptyRows
+                    height={denseHeight}
+                    emptyRows={emptyRows(table.page, table.rowsPerPage, tableData.length)}
+                  />
+
+                  <TableNoData notFound={notFound} />
+                </TableBody>
+              </Table>
+            </Scrollbar>
+          </TableContainer>
+
+          <TablePaginationCustom
+            count={dataFiltered.length}
+            page={table.page}
+            rowsPerPage={table.rowsPerPage}
+            onPageChange={table.onChangePage}
+            onRowsPerPageChange={table.onChangeRowsPerPage}
+            //
+            dense={table.dense}
+            onChangeDense={table.onChangeDense}
+          />
+        </Card>
+      </Container>
+
+      <ConfirmDialog
+        open={confirm.value}
+        onClose={confirm.onFalse}
+        title="Delete"
+        content={
+          <>
+            Are you sure want to delete <strong> {table.selected.length} </strong> items?
+          </>
+        }
+        action={
+          <Button
+            variant="contained"
+            color="error"
+            onClick={() => {
+              handleDeleteRows();
+              confirm.onFalse();
+            }}
+          >
+            Delete
+          </Button>
+        }
+      />
+    </>
+  );
+}
+
+// ----------------------------------------------------------------------
+
+function applyFilter({ inputData, comparator, filters }) {
+  const { name, status, role } = filters;
+
+  const stabilizedThis = inputData.map((el, index) => [el, index]);
+
+  stabilizedThis.sort((a, b) => {
+    const order = comparator(a[0], b[0]);
+    if (order !== 0) return order;
+    return a[1] - b[1];
+  });
+
+  inputData = stabilizedThis.map((el) => el[0]);
+
+  if (name) {
+    inputData = inputData.filter(
+      (user) => user.name.toLowerCase().indexOf(name.toLowerCase()) !== -1
+    );
+  }
+
+  if (status !== 'all') {
+    inputData = inputData.filter((user) => user.status === status);
+  }
+
+  if (role.length) {
+    inputData = inputData.filter((user) => role.includes(user.role));
+  }
+
+  return inputData;
+}

package/minimal/src/sections/user/view/user-profile-view.jsx

@@ -0,0 +1,134 @@
+import { useState, useCallback } from 'react';
+
+import Tab from '@mui/material/Tab';
+import Card from '@mui/material/Card';
+import Container from '@mui/material/Container';
+import Tabs, { tabsClasses } from '@mui/material/Tabs';
+
+import { paths } from 'src/routes/paths';
+
+import { useMockedUser } from 'src/hooks/use-mocked-user';
+
+import { _userAbout, _userFeeds, _userFriends, _userGallery, _userFollowers } from 'src/_mock';
+
+import Iconify from 'src/components/iconify';
+import { useSettingsContext } from 'src/components/settings';
+import CustomBreadcrumbs from 'src/components/custom-breadcrumbs';
+
+import ProfileHome from '../profile-home';
+import ProfileCover from '../profile-cover';
+import ProfileFriends from '../profile-friends';
+import ProfileGallery from '../profile-gallery';
+import ProfileFollowers from '../profile-followers';
+
+// ----------------------------------------------------------------------
+
+const TABS = [
+  {
+    value: 'profile',
+    label: 'Profile',
+    icon: <Iconify icon="solar:user-id-bold" width={24} />,
+  },
+  {
+    value: 'followers',
+    label: 'Followers',
+    icon: <Iconify icon="solar:heart-bold" width={24} />,
+  },
+  {
+    value: 'friends',
+    label: 'Friends',
+    icon: <Iconify icon="solar:users-group-rounded-bold" width={24} />,
+  },
+  {
+    value: 'gallery',
+    label: 'Gallery',
+    icon: <Iconify icon="solar:gallery-wide-bold" width={24} />,
+  },
+];
+
+// ----------------------------------------------------------------------
+
+export default function UserProfileView() {
+  const settings = useSettingsContext();
+
+  const { user } = useMockedUser();
+
+  const [searchFriends, setSearchFriends] = useState('');
+
+  const [currentTab, setCurrentTab] = useState('profile');
+
+  const handleChangeTab = useCallback((event, newValue) => {
+    setCurrentTab(newValue);
+  }, []);
+
+  const handleSearchFriends = useCallback((event) => {
+    setSearchFriends(event.target.value);
+  }, []);
+
+  return (
+    <Container maxWidth={settings.themeStretch ? false : 'lg'}>
+      <CustomBreadcrumbs
+        heading="Profile"
+        links={[
+          { name: 'Dashboard', href: paths.dashboard.root },
+          { name: 'User', href: paths.dashboard.user.root },
+          { name: user?.displayName },
+        ]}
+        sx={{
+          mb: { xs: 3, md: 5 },
+        }}
+      />
+
+      <Card
+        sx={{
+          mb: 3,
+          height: 290,
+        }}
+      >
+        <ProfileCover
+          role={_userAbout.role}
+          name={user?.displayName}
+          avatarUrl={user?.photoURL}
+          coverUrl={_userAbout.coverUrl}
+        />
+
+        <Tabs
+          value={currentTab}
+          onChange={handleChangeTab}
+          sx={{
+            width: 1,
+            bottom: 0,
+            zIndex: 9,
+            position: 'absolute',
+            bgcolor: 'background.paper',
+            [`& .${tabsClasses.flexContainer}`]: {
+              pr: { md: 3 },
+              justifyContent: {
+                sm: 'center',
+                md: 'flex-end',
+              },
+            },
+          }}
+        >
+          {TABS.map((tab) => (
+            <Tab key={tab.value} value={tab.value} icon={tab.icon} label={tab.label} />
+          ))}
+        </Tabs>
+      </Card>
+
+      {currentTab === 'profile' && <ProfileHome info={_userAbout} posts={_userFeeds} />}
+
+      {currentTab === 'followers' && <ProfileFollowers followers={_userFollowers} />}
+
+      {currentTab === 'friends' && (
+        <ProfileFriends
+          friends={_userFriends}
+          searchFriends={searchFriends}
+          onSearchFriends={handleSearchFriends}
+        />
+      )}
+
+      {currentTab === 'gallery' && <ProfileGallery gallery={_userGallery} />}
+    </Container>
+  );
+}

package/minimal/src/theme/css.js

@@ -0,0 +1,152 @@
+import { alpha } from '@mui/material/styles';
+import { dividerClasses } from '@mui/material/Divider';
+import { checkboxClasses } from '@mui/material/Checkbox';
+import { menuItemClasses } from '@mui/material/MenuItem';
+import { autocompleteClasses } from '@mui/material/Autocomplete';
+
+// ----------------------------------------------------------------------
+
+export const paper = ({ theme, bgcolor, dropdown }) => ({
+  ...bgBlur({
+    blur: 20,
+    opacity: 0.9,
+    color: theme.palette.background.paper,
+    ...(!!bgcolor && {
+      color: bgcolor,
+    }),
+  }),
+  backgroundImage: 'url(/assets/cyan-blur.png), url(/assets/red-blur.png)',
+  backgroundRepeat: 'no-repeat, no-repeat',
+  backgroundPosition: 'top right, left bottom',
+  backgroundSize: '50%, 50%',
+  ...(theme.direction === 'rtl' && {
+    backgroundPosition: 'top left, right bottom',
+  }),
+  ...(dropdown && {
+    padding: theme.spacing(0.5),
+    boxShadow: theme.customShadows.dropdown,
+    borderRadius: theme.shape.borderRadius * 1.25,
+  }),
+});
+
+// ----------------------------------------------------------------------
+
+export const menuItem = (theme) => ({
+  ...theme.typography.body2,
+  padding: theme.spacing(0.75, 1),
+  borderRadius: theme.shape.borderRadius * 0.75,
+  '&:not(:last-of-type)': {
+    marginBottom: 4,
+  },
+  [`&.${menuItemClasses.selected}`]: {
+    fontWeight: theme.typography.fontWeightSemiBold,
+    backgroundColor: theme.palette.action.selected,
+    '&:hover': {
+      backgroundColor: theme.palette.action.hover,
+    },
+  },
+  [`& .${checkboxClasses.root}`]: {
+    padding: theme.spacing(0.5),
+    marginLeft: theme.spacing(-0.5),
+    marginRight: theme.spacing(0.5),
+  },
+  [`&.${autocompleteClasses.option}[aria-selected="true"]`]: {
+    backgroundColor: theme.palette.action.selected,
+    '&:hover': {
+      backgroundColor: theme.palette.action.hover,
+    },
+  },
+  [`&+.${dividerClasses.root}`]: {
+    margin: theme.spacing(0.5, 0),
+  },
+});
+
+// ----------------------------------------------------------------------
+
+export function bgBlur(props) {
+  const color = props?.color || '#000000';
+  const blur = props?.blur || 6;
+  const opacity = props?.opacity || 0.8;
+  const imgUrl = props?.imgUrl;
+
+  if (imgUrl) {
+    return {
+      position: 'relative',
+      backgroundImage: `url(${imgUrl})`,
+      '&:before': {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        zIndex: 9,
+        content: '""',
+        width: '100%',
+        height: '100%',
+        backdropFilter: `blur(${blur}px)`,
+        WebkitBackdropFilter: `blur(${blur}px)`,
+        backgroundColor: alpha(color, opacity),
+      },
+    };
+  }
+
+  return {
+    backdropFilter: `blur(${blur}px)`,
+    WebkitBackdropFilter: `blur(${blur}px)`,
+    backgroundColor: alpha(color, opacity),
+  };
+}
+
+// ----------------------------------------------------------------------
+
+export function bgGradient(props) {
+  const direction = props?.direction || 'to bottom';
+  const startColor = props?.startColor;
+  const endColor = props?.endColor;
+  const imgUrl = props?.imgUrl;
+  const color = props?.color;
+
+  if (imgUrl) {
+    return {
+      background: `linear-gradient(${direction}, ${startColor || color}, ${
+        endColor || color
+      }), url(${imgUrl})`,
+      backgroundSize: 'cover',
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: 'center center',
+    };
+  }
+
+  return {
+    background: `linear-gradient(${direction}, ${startColor}, ${endColor})`,
+  };
+}
+
+// ----------------------------------------------------------------------
+
+export function textGradient(value) {
+  return {
+    background: `-webkit-linear-gradient(${value})`,
+    WebkitBackgroundClip: 'text',
+    WebkitTextFillColor: 'transparent',
+  };
+}
+
+// ----------------------------------------------------------------------
+
+export const hideScroll = {
+  x: {
+    msOverflowStyle: 'none',
+    scrollbarWidth: 'none',
+    overflowX: 'scroll',
+    '&::-webkit-scrollbar': {
+      display: 'none',
+    },
+  },
+  y: {
+    msOverflowStyle: 'none',
+    scrollbarWidth: 'none',
+    overflowY: 'scroll',
+    '&::-webkit-scrollbar': {
+      display: 'none',
+    },
+  },
+};