119 |
123 |
124 |
125 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": "./index.html",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | animation: App-logo-spin infinite 20s linear;
7 | height: 80px;
8 | }
9 |
10 | .App-header {
11 | background-color: #222;
12 | height: 150px;
13 | padding: 20px;
14 | color: white;
15 | }
16 |
17 | .App-intro {
18 | font-size: large;
19 | }
20 |
21 | @keyframes App-logo-spin {
22 | from {
23 | transform: rotate(0deg);
24 | }
25 | to {
26 | transform: rotate(360deg);
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { Admin, Resource } from 'react-admin';
3 | import polyglotI18nProvider from 'ra-i18n-polyglot';
4 |
5 | import './App.css';
6 |
7 | import authProvider from './authProvider';
8 | import themeReducer from './themeReducer';
9 | import { Login, Layout } from './layout';
10 | import { Dashboard } from './dashboard';
11 | import customRoutes from './routes';
12 | import englishMessages from './i18n/en';
13 |
14 | import visitors from './visitors';
15 | import orders from './orders';
16 | import products from './products';
17 | import invoices from './invoices';
18 | import categories from './categories';
19 | import reviews from './reviews';
20 |
21 | import dataProviderFactory from './dataProvider';
22 | import fakeServerFactory from './fakeServer';
23 |
24 | const i18nProvider = polyglotI18nProvider(locale => {
25 | if (locale === 'fr') {
26 | return import('./i18n/fr').then(messages => messages.default);
27 | }
28 |
29 | // Always fallback on english
30 | return englishMessages;
31 | }, 'en');
32 |
33 | const App = () => {
34 | const [dataProvider, setDataProvider] = useState(null);
35 |
36 | useEffect(() => {
37 | let restoreFetch;
38 |
39 | const fetchDataProvider = async () => {
40 | restoreFetch = await fakeServerFactory(
41 | process.env.REACT_APP_DATA_PROVIDER
42 | );
43 |
44 | setDataProvider(
45 | await dataProviderFactory(process.env.REACT_APP_DATA_PROVIDER)
46 | );
47 | };
48 |
49 | fetchDataProvider();
50 |
51 | return restoreFetch;
52 | }, []);
53 |
54 | if (!dataProvider) {
55 | return (
56 |
120 |
122 | Loading...
121 |
57 |
59 | );
60 | }
61 |
62 | return (
63 | Loading...
58 | -
8 |
28 | {translate('pos.theme.name')}
29 |
30 |
38 |
46 | {translate('pos.language')}
49 |
57 |
65 |
29 |
31 |
32 | {translate('pos.dashboard.monthly_revenue')}
33 |
34 |
35 | {value}
36 |
37 |
38 |
39 | );
40 | };
41 |
42 | export default MonthlyRevenue;
43 |
--------------------------------------------------------------------------------
/src/dashboard/NbNewOrders.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Card from '@material-ui/core/Card';
3 | import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
4 | import { makeStyles } from '@material-ui/core/styles';
5 | import Typography from '@material-ui/core/Typography';
6 | import { useTranslate } from 'react-admin';
7 |
8 | import CardIcon from './CardIcon';
9 |
10 | const useStyles = makeStyles({
11 | main: {
12 | flex: '1',
13 | marginLeft: '1em',
14 | marginTop: 20,
15 | },
16 | card: {
17 | overflow: 'inherit',
18 | textAlign: 'right',
19 | padding: 16,
20 | minHeight: 52,
21 | },
22 | });
23 |
24 | const NbNewOrders = ({ value }) => {
25 | const translate = useTranslate();
26 | const classes = useStyles();
27 | return (
28 |
29 |
31 |
32 | {translate('pos.dashboard.new_orders')}
33 |
34 |
35 | {value}
36 |
37 |
38 |
39 | );
40 | };
41 |
42 | export default NbNewOrders;
43 |
--------------------------------------------------------------------------------
/src/dashboard/NewCustomers.js:
--------------------------------------------------------------------------------
1 | import React, { useMemo } from 'react';
2 | import Card from '@material-ui/core/Card';
3 | import List from '@material-ui/core/List';
4 | import ListItem from '@material-ui/core/ListItem';
5 | import ListItemAvatar from '@material-ui/core/ListItemAvatar';
6 | import ListItemText from '@material-ui/core/ListItemText';
7 | import Avatar from '@material-ui/core/Avatar';
8 | import Typography from '@material-ui/core/Typography';
9 | import CustomerIcon from '@material-ui/icons/PersonAdd';
10 | import Divider from '@material-ui/core/Divider';
11 | import { makeStyles } from '@material-ui/core/styles';
12 | import { Link } from 'react-router-dom';
13 | import { useTranslate, useQueryWithStore } from 'react-admin';
14 |
15 | import CardIcon from './CardIcon';
16 |
17 | const useStyles = makeStyles({
18 | main: {
19 | flex: '1',
20 | marginLeft: '1em',
21 | marginTop: 20,
22 | },
23 | card: {
24 | padding: '16px 0',
25 | overflow: 'inherit',
26 | textAlign: 'right',
27 | },
28 | title: {
29 | padding: '0 16px',
30 | },
31 | value: {
32 | padding: '0 16px',
33 | minHeight: 48,
34 | },
35 | });
36 |
37 | const NewCustomers = () => {
38 | const classes = useStyles();
39 | const translate = useTranslate();
40 | const aMonthAgo = useMemo(() => {
41 | const date = new Date();
42 | date.setDate(date.getDate() - 30);
43 | date.setHours(0);
44 | date.setMinutes(0);
45 | date.setSeconds(0);
46 | date.setMilliseconds(0);
47 | return date;
48 | }, []);
49 |
50 | const { loaded, data: visitors } = useQueryWithStore({
51 | type: 'getList',
52 | resource: 'customers',
53 | payload: {
54 | filter: {
55 | has_ordered: true,
56 | first_seen_gte: aMonthAgo.toISOString(),
57 | },
58 | sort: { field: 'first_seen', order: 'DESC' },
59 | pagination: { page: 1, perPage: 100 },
60 | },
61 | });
62 |
63 | if (!loaded) return null;
64 |
65 | const nb = visitors ? visitors.reduce(nb => ++nb, 0) : 0;
66 | return (
67 |
68 |
70 |
71 | {translate('pos.dashboard.new_customers')}
72 |
73 |
78 | {nb}
79 |
80 |
105 |
106 | );
107 | };
108 |
109 | export default NewCustomers;
110 |
--------------------------------------------------------------------------------
/src/dashboard/PendingOrders.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Card from '@material-ui/core/Card';
3 | import CardHeader from '@material-ui/core/CardHeader';
4 | import List from '@material-ui/core/List';
5 | import ListItem from '@material-ui/core/ListItem';
6 | import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
7 | import ListItemAvatar from '@material-ui/core/ListItemAvatar';
8 | import ListItemText from '@material-ui/core/ListItemText';
9 | import Avatar from '@material-ui/core/Avatar';
10 | import { makeStyles } from '@material-ui/core/styles';
11 | import { Link } from 'react-router-dom';
12 | import { useTranslate } from 'react-admin';
13 |
14 | const useStyles = makeStyles(theme => ({
15 | root: {
16 | flex: 1,
17 | },
18 | cost: {
19 | marginRight: '1em',
20 | color: theme.palette.text.primary,
21 | },
22 | }));
23 |
24 | const PendingOrders = ({ orders = [], customers = {} }) => {
25 | const classes = useStyles();
26 | const translate = useTranslate();
27 | return (
28 | -
82 | {visitors
83 | ? visitors.map(record => (
84 |
-
31 | {orders.map(record => (
32 |
60 |
62 |
63 | {translate('pos.dashboard.pending_reviews')}
64 |
65 |
70 |
71 | {nb}
72 |
73 |
74 |
107 |
108 | );
109 | };
110 |
111 | export default PendingReviews;
112 |
--------------------------------------------------------------------------------
/src/dashboard/Welcome.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Card from '@material-ui/core/Card';
3 | import CardActions from '@material-ui/core/CardActions';
4 | import CardContent from '@material-ui/core/CardContent';
5 | import CardMedia from '@material-ui/core/CardMedia';
6 | import Button from '@material-ui/core/Button';
7 | import Typography from '@material-ui/core/Typography';
8 | import HomeIcon from '@material-ui/icons/Home';
9 | import CodeIcon from '@material-ui/icons/Code';
10 | import { makeStyles } from '@material-ui/core/styles';
11 | import { useTranslate } from 'react-admin';
12 |
13 | const useStyles = makeStyles({
14 | media: {
15 | height: '18em',
16 | },
17 | });
18 |
19 | const mediaUrl = `https://marmelab.com/posters/beard-${parseInt(
20 | Math.random() * 10,
21 | 10
22 | ) + 1}.jpeg`;
23 |
24 | const Welcome = () => {
25 | const translate = useTranslate();
26 | const classes = useStyles();
27 | return (
28 | -
76 | {reviews.map(record => (
77 |
17 | {record.address} 18 |
19 | {record.city}, {record.zipcode} 20 |
90 |
98 |
100 |
101 |
44 | {' '}
45 | handleToggle('menuSales')}
48 | isOpen={state.menuSales}
49 | sidebarIsOpen={open}
50 | name="pos.menu.sales"
51 | icon={
75 | handleToggle('menuCatalog')}
77 | isOpen={state.menuCatalog}
78 | sidebarIsOpen={open}
79 | name="pos.menu.catalog"
80 | icon={
104 | handleToggle('menuCustomers')}
106 | isOpen={state.menuCustomers}
107 | sidebarIsOpen={open}
108 | name="pos.menu.customers"
109 | icon={
133 |
155 | );
156 | };
157 |
158 | export default Menu;
159 |
--------------------------------------------------------------------------------
/src/layout/SubMenu.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, Fragment, ReactElement } from 'react';
2 | import ExpandMore from '@material-ui/icons/ExpandMore';
3 | import List from '@material-ui/core/List';
4 | import MenuItem from '@material-ui/core/MenuItem';
5 | import ListItemIcon from '@material-ui/core/ListItemIcon';
6 | import Typography from '@material-ui/core/Typography';
7 | import Divider from '@material-ui/core/Divider';
8 | import Collapse from '@material-ui/core/Collapse';
9 | import Tooltip from '@material-ui/core/Tooltip';
10 | import { makeStyles } from '@material-ui/core/styles';
11 | import { useTranslate } from 'react-admin';
12 |
13 | const useStyles = makeStyles(theme => ({
14 | icon: { minWidth: theme.spacing(5) },
15 | sidebarIsOpen: {
16 | paddingLeft: 25,
17 | transition: 'padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms',
18 | },
19 | sidebarIsClosed: {
20 | paddingLeft: 0,
21 | transition: 'padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms',
22 | },
23 | }));
24 |
25 | interface Props {
26 | dense: boolean;
27 | handleToggle: () => void;
28 | icon: ReactElement;
29 | isOpen: boolean;
30 | name: string;
31 | sidebarIsOpen: boolean;
32 | }
33 |
34 | const SubMenu: FC-
77 | {children}
78 |
45 | {ids.map(id => (
46 |
47 |
50 |
51 | {translate('resources.commands.name', 1)}
52 | :
53 |
64 | }
65 | />
66 |
51 |
56 | {' '}
57 | {times(nbItems, key => (
58 |
59 |
60 |
61 | ))}
62 |
63 |
64 | );
65 | };
66 |
67 | const LoadedGridList = ({ ids, data, basePath, width }) => {
68 | const classes = useStyles();
69 | return (
70 |
71 |
76 | {ids.map(id => (
77 |
82 | 
83 |
88 | {data[id].width}x{data[id].height},{' '}
89 |
103 | ))}
104 |
105 |
106 | );
107 | };
108 |
109 | const GridList = ({ loaded, ...props }) =>
110 | loaded ?
53 |
79 | );
80 | };
81 |
82 | export default ReviewEdit;
83 |
--------------------------------------------------------------------------------
/src/reviews/ReviewEditToolbar.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment } from 'react';
2 | import MuiToolbar from '@material-ui/core/Toolbar';
3 | import { makeStyles } from '@material-ui/core/styles';
4 |
5 | import { SaveButton, DeleteButton } from 'react-admin';
6 | import AcceptButton from './AcceptButton';
7 | import RejectButton from './RejectButton';
8 |
9 | const useStyles = makeStyles({
10 | root: {
11 | backgroundColor: 'white',
12 | display: 'flex',
13 | justifyContent: 'space-between',
14 | },
15 | });
16 |
17 | const ReviewEditToolbar = ({
18 | basePath,
19 | handleSubmitWithRedirect,
20 | invalid,
21 | record,
22 | resource,
23 | saving,
24 | }) => {
25 | const classes = useStyles();
26 | return (
27 |
54 |
55 | {translate('resources.reviews.detail')}
56 |
57 |
58 |
60 |
61 |
51 |
52 | {({ match }) => {
53 | const isMatch = !!(
54 | match &&
55 | match.params &&
56 | match.params.id !== 'create'
57 | );
58 |
59 | return (
60 |
61 |
86 | {/* To avoid any errors if the route does not match, we don't render at all the component in this case */}
87 | {isMatch ? (
88 |
95 |
96 | );
97 | }}
98 |
99 |
100 | );
101 | };
102 |
103 | export default ReviewList;
104 |
--------------------------------------------------------------------------------
/src/reviews/ReviewListDesktop.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Datagrid, DateField, TextField } from 'react-admin';
3 | import { makeStyles } from '@material-ui/core/styles';
4 |
5 | import ProductReferenceField from '../products/ProductReferenceField';
6 | import CustomerReferenceField from '../visitors/CustomerReferenceField';
7 | import StarRatingField from './StarRatingField';
8 |
9 | import rowStyle from './rowStyle';
10 |
11 | const useListStyles = makeStyles({
12 | headerRow: {
13 | borderLeftColor: 'white',
14 | borderLeftWidth: 5,
15 | borderLeftStyle: 'solid',
16 | },
17 | headerCell: {
18 | padding: '6px 8px 6px 8px',
19 | },
20 | rowCell: {
21 | padding: '6px 8px 6px 8px',
22 | },
23 | comment: {
24 | maxWidth: '18em',
25 | overflow: 'hidden',
26 | textOverflow: 'ellipsis',
27 | whiteSpace: 'nowrap',
28 | },
29 | });
30 |
31 | const ReviewListDesktop = props => {
32 | const classes = useListStyles();
33 | return (
34 | -
36 | {ids.map(id => (
37 |
42 |
27 |
34 | ) : null;
35 | };
36 |
37 | const PureFullNameField = pure(FullNameField);
38 |
39 | PureFullNameField.defaultProps = {
40 | source: 'last_name',
41 | label: 'resources.customers.fields.name',
42 | };
43 |
44 | export default PureFullNameField;
45 |
--------------------------------------------------------------------------------
/src/visitors/MobileGrid.tsx:
--------------------------------------------------------------------------------
1 | // in src/comments.js
2 | import React from 'react';
3 | import Card from '@material-ui/core/Card';
4 | import CardContent from '@material-ui/core/CardContent';
5 | import CardHeader from '@material-ui/core/CardHeader';
6 | import { makeStyles } from '@material-ui/core/styles';
7 |
8 | import { DateField, EditButton, useTranslate, NumberField } from 'react-admin';
9 |
10 | import AvatarField from './AvatarField';
11 | import ColoredNumberField from './ColoredNumberField';
12 | import SegmentsField from './SegmentsField';
13 | import { Identifier } from 'ra-core';
14 | import { Customer } from '../types';
15 | import { FC } from 'react';
16 |
17 | const useStyles = makeStyles(theme => ({
18 | root: { margin: '1em' },
19 | card: {
20 | height: '100%',
21 | display: 'flex',
22 | flexDirection: 'column',
23 | margin: '0.5rem 0',
24 | },
25 | cardTitleContent: {
26 | display: 'flex',
27 | flexDirection: 'row',
28 | alignItems: 'center',
29 | justifyContent: 'space-between',
30 | },
31 | cardContent: {
32 | ...theme.typography.body1,
33 | display: 'flex',
34 | flexDirection: 'column',
35 | },
36 | }));
37 |
38 | interface Props {
39 | ids?: Identifier[];
40 | data?: { [key: string]: Customer };
41 | basePath?: string;
42 | }
43 |
44 | const MobileGrid: FC
54 | {ids.map(id => (
55 |
56 |
59 |
68 | }
69 | avatar={{`${data[id].first_name} ${ 60 | data[id].last_name 61 | }`}
62 |
73 | {translate(
74 | 'resources.customers.fields.last_seen_gte'
75 | )}
76 |
77 |
83 |
84 | {translate(
85 | 'resources.commands.name',
86 | data[id].nb_commands || 1
87 | )}
88 | :
89 |
95 |
96 | {translate(
97 | 'resources.customers.fields.total_spent'
98 | )}
99 | :{' '}
100 |
106 |